Twitter bootstrap hide element on small devices

Question

I have this code    lt footer class  row  gt     lt nav class  col-sm-3  gt       lt ul class  list-unstyled  gt         lt li gt Text 1 lt  li gt         lt li gt Text 2 lt  li gt         lt li gt Text 3 lt  li gt       lt  ul gt     lt  nav gt     lt nav class  col-sm-3  gt       lt ul class  list-unstyled  gt         lt li gt Text 4 lt  li gt         lt li gt Text 5 lt  li gt         lt li gt Text 6 lt  li gt       lt  ul gt     lt  nav gt     lt nav class  col-sm-3  gt       lt ul class  list-unstyled  gt         lt li gt Text 7 lt  li gt         lt li gt Text 8 lt  li gt         lt li gt Text 9 lt  li gt       lt  ul gt     lt  nav gt     lt nav class  col-sm-3  gt       lt ul class  list-unstyled  gt         lt li gt Text 10 lt  li gt         lt li gt Text 11 lt  li gt         lt li gt Text 12 lt  li gt       lt  ul gt     lt  nav gt   lt  footer gt    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

User · Answer

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     lt nav class  col-sm-3 hidden-xs  gt           lt ul class  list-unstyled  gt           lt li gt Text 10 lt  li gt           lt li gt Text 11 lt  li gt           lt li gt Text 12 lt  li gt           lt  ul gt   lt  nav gt    http   bootply com 90722

User · Answer

lt div class  small hidden-xs  gt      Some Content Here  lt  div gt    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

User · Answer

On small device   4 columns x 3    12       gt  col-sm-3  On extra small   3 columns x 4    12        gt  col-xs-4    lt footer class  row  gt           lt nav class  col-xs-4 col-sm-3  gt               lt ul class  list-unstyled  gt               lt li gt Text 1 lt  li gt               lt li gt Text 2 lt  li gt               lt li gt Text 3 lt  li gt               lt  ul gt           lt  nav gt           lt nav class  col-xs-4 col-sm-3  gt               lt ul class  list-unstyled  gt               lt li gt Text 4 lt  li gt               lt li gt Text 5 lt  li gt               lt li gt Text 6 lt  li gt               lt  ul gt           lt  nav gt           lt nav class  col-xs-4 col-sm-3  gt               lt ul class  list-unstyled  gt               lt li gt Text 7 lt  li gt               lt li gt Text 8 lt  li gt               lt li gt Text 9 lt  li gt               lt  ul gt           lt  nav gt           lt nav class  hidden-xs col-sm-3  gt               lt ul class  list-unstyled  gt               lt li gt Text 10 lt  li gt               lt li gt Text 11 lt  li gt               lt li gt Text 12 lt  li gt               lt  ul gt           lt  nav gt       lt  footer gt    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

User · Answer

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

[html] Twitter bootstrap hide element on small devices

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to responsive-design