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?

Answer 1

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)

Answer 2

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