Twitter bootstrap hide element on small devices

Question

I have this code:

<footer class="row">
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 1</li>
      <li>Text 2</li>
      <li>Text 3</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 4</li>
      <li>Text 5</li>
      <li>Text 6</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 7</li>
      <li>Text 8</li>
      <li>Text 9</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 10</li>
      <li>Text 11</li>
      <li>Text 12</li>
    </ul>
  </nav>
</footer>

Four blocks with some texts inside. They are equal in width, I've set col-sm-3 to all of them and what I want to do is to hide the last nav on extra small devices. I've tried to use hidden-xs on that nav and it hides it, but in the same time I want the other blocks to expand (change class from col-sm-3 to col-sm-4) col-sm-4 X 3 = 12.

Any solution?

BENARD Patrick · Accepted Answer · 2016-03-29T19:47:12.457

On small device : 4 columns x 3 (= 12) ==> col-sm-3

On extra small : 3 columns x 4 (= 12) ==> col-xs-4

 <footer class="row">
        <nav class="col-xs-4 col-sm-3">
            <ul class="list-unstyled">
            <li>Text 1</li>
            <li>Text 2</li>
            <li>Text 3</li>
            </ul>
        </nav>
        <nav class="col-xs-4 col-sm-3">
            <ul class="list-unstyled">
            <li>Text 4</li>
            <li>Text 5</li>
            <li>Text 6</li>
            </ul>
        </nav>
        <nav class="col-xs-4 col-sm-3">
            <ul class="list-unstyled">
            <li>Text 7</li>
            <li>Text 8</li>
            <li>Text 9</li>
            </ul>
        </nav>
        <nav class="hidden-xs col-sm-3">
            <ul class="list-unstyled">
            <li>Text 10</li>
            <li>Text 11</li>
            <li>Text 12</li>
            </ul>
        </nav>
    </footer>

As you say, hidden-xs is not enough, you have to combine xs and sm class.

Here is links to the official doc about available responsive classes and about the grid system.

Have in head :

1 row = 12 cols
For XtraSmall device : col-xs-__
For SMall device : col-sm-__
For MeDium Device: col-md-__
For LarGe Device : col-lg-__
Make visible only (hidden on other) : visible-md (just visible in medium [not in lg xs or sm])
Make hidden only (visible on other) : hidden-xs (just hidden in XtraSmall)

It appears that in Bootstrap 4 you need to specify bubbling via hidden-SIZE-(up|down). Ex: `hidden-sm-down` — Evan Siroky, Mar 15 '16 at 23:26

Carol Skelly · Answer 2 · 2018-04-05T12:06:57.570

90

Bootstrap 4

The display (hidden/visible) classes are changed in Bootstrap 4. To hide on the xs viewport use:

d-none d-sm-block

Also see: Missing visible-** and hidden-** in Bootstrap v4

Bootstrap 3 (original answer)

Use the hidden-xs utility class..

<nav class="col-sm-3 hidden-xs">
        <ul class="list-unstyled">
        <li>Text 10</li>
        <li>Text 11</li>
        <li>Text 12</li>
        </ul>
</nav>

http://bootply.com/90722

edited Apr 05 '18 at 12:06

answered Oct 29 '13 at 13:53

Carol Skelly

351,302
90
710
624

I've used that class but it was not helpfull, but in your example you added some other classes to the other nav's that changed their display from 25% to 33% wide. That was it! Thx – Crisan Raluca Teodora Oct 29 '13 at 14:06
You're welcome, but I did miss that you already mentioned using 'hidden-xs` in your example. +1 for @Jahnux73 answer – Carol Skelly Oct 29 '13 at 14:11

score 23 · Answer 3 · answered Sep 18 '17 at 09:40

For Bootstrap 4.0 there is a change

See the docs: https://getbootstrap.com/docs/4.0/utilities/display/

In order to hide the content on mobile and display on the bigger devices you have to use the following classes:

d-none d-sm-block

The first class set display none all across devices and the second one display it for devices "sm" up (you could use md, lg, etc. instead of sm if you want to show on different devices.

I suggest to read about that before migration:

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

score 12 · Answer 4 · answered Jan 14 '16 at 15:00

12

<div class="small hidden-xs">
    Some Content Here
</div>

This also works for elements not necessarily used in a grid /small column. When it is rendered on larger screens the font-size will be smaller than your default text font-size.

This answer satisfies the question in the OP title (which is how I found this Q/A).

answered Jan 14 '16 at 15:00

Chris O

689
8
22

This worked fine. I used this to hide an image.

– Arindam Roychowdhury Jan 19 '18 at 07:22

Twitter bootstrap hide element on small devices

4 Answers4

For Bootstrap 4.0 there is a change

Linked