How to hide the elements using bootstrap classes?-CodePudding

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 > Test 1</h1>
}
else{
<h2 class = "d-block d-sm-none"> Test 2 </h2>
}

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

<h1 >Test 1</h1>

<h2 >Test 2</h2>