I am trying to do do a small testing using bootstrap, where I want to show h1 only for desktop /large and h2 only for mobile but when I use the following , both h1 and h2 show-up on all screens .
h1 and h2 is input element and writing condition depending on whether they are filled or not.
if(h1 != null){
<h1 class="d-none d-lg-block d-xl-none"> Test 1</h1>
}
else{
<h2 class = "d-block d-sm-none"> Test 2 </h2>
}
No need for the conditional statement, Bootstraps display properties should work fine for you.
You only need the . if you are specifying the class outside the markup in CSS or JS for example.
You can use d-xl-block on h1 for it show over 1140px (desktop). Then just use d-xl-none on the h2's since you don't want them to be present when h1 is showing.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<h1 class="d-none d-xl-block">Test 1</h1>
<h2 class="d-block d-xl-none">Test 2</h2>