Bootstrap hidden-sm-down not working

Question

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>

score 26 · Answer 1 · edited Jan 06 '22 at 17:31

26

Actually, hidden-sm-down won't work with Bootstrap 4 and above
(there use d-none instead of hidden-sm-down, and use d-sm-none instead of hidden-sm-up, see also understanding-details).

With BS4, display utility classes are completely changed. Use this format instead;

.d-{breakpoint}-{value}

More information ; https://getbootstrap.com/docs/4.0/utilities/display/

edited Jan 06 '22 at 17:31

Top-Master

5,262
5
23
45

answered Jan 13 '18 at 20:51

merkdev

901
10
8

Strange that the Bootstrap 4 docs say to use OP's .hidden-sm-down, but this is the only solution that worked for me. Thanks! – Nathan Strutz Feb 06 '18 at 19:57
For BS4, yes this is the correct way of doing it. Thanks! – Furkan Yavuz Jul 22 '18 at 22:54

score 18 · Accepted Answer · answered Jun 11 '16 at 14:44

18

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

answered Jun 11 '16 at 14:44

Mathieu Schaeffer

792
4
14

Jaqen H'ghar · Answer 3 · 2016-06-14T08:21:51.820

13

You mention you use Bootstrap 3

Use hidden-sm instead of hidden-sm-down which belongs to Bootstrap 4

On a side note:

You also mention:

I want to hide those two images on small devices in order to have a different menu.

hidden-sm will hide the element on small screens such as iPad. To hide on extra small screens (such as Phones < 768px) add hidden-xs.

Take a look at the Bootstrap sizes table here

edited Jun 14 '16 at 08:21

answered Jun 11 '16 at 14:35

Jaqen H'ghar

14,966
7
48
50

score 6 · Answer 4 · edited Dec 20 '20 at 16:47

6

If you are using Bootstrap 4, you can utilize the following:

Hidden only on small screens

<div class="d-none d-lg-block">hidden on screens smaller than lg</div>

Visible only on small screens

<div class="d-none d-sm-block d-md-none">visible on small screens</div>

edited Dec 20 '20 at 16:47

Joseph

4,715
3
11
33

answered Apr 02 '20 at 09:09

Yuvraj Patil

6,242
3
46
50

Bootstrap hidden-sm-down not working

4 Answers4