user1315621 user1315621 - 5 months ago 202
HTML Question

Bootstrap hidden-sm-down not working

I am using Boostrap 3. Why the

<div>
with
hidden-sm-down
is still visible when I resize the page on my laptop? I want to hide those two images on small devices in order to have a different menu.

<div class="row">
<div class="col-md-7 left">
<ul class="row">
<li class="col-md-2">
<a href="">Text</a>
</li>
<li class="col-md-2">
<a href="">Text</a>
</li>
<li class="col-md-3">
<a href="">Text</a>
</li>
<li class="col-md-3">
<a href="">Text</a>
</li>
<li class="col-md-2">
<a href="">Text</a>
</li>
</ul>
</div>
<div class="col-md-1 hidden-sm-down wave">
<img src="img/ondina.png" />
</div>
<div class="col-md-3 right">
<ul class="row">
<li class="col-md-6">
<a href="">Text</a>
</li>
<li class="col-md-6">
<a href="">Text</a>
</li>
</ul>
</div>
<div class="col-md-1 hidden-sm-down right-border">
<img src="img/menu-right.png" />
</div>
</div>

Answer

As Jaqen said, if you use Bootrstrap 3, you should use hidden-sm instead.

Also, if you want to hide the image on small screen, you have to add hidden-xs.

Here's a JsFiddle : DEMO