Hiding elements in responsive layout

Question

Looking through bootstrap it looks like they support collapsing the menubar items for smaller screens  Is there something similar for other items on the page   For example  I have a  along with nav-pills floated right  On a small screen this causes issues  I d love to at least put it into a similar click-to-show-more dropdown   Is this possible within existing Bootstrap framework

User · Answer

In boostrap 4 1  run snippet because I copied whole table code from Bootstrap documentation     x000D   x000D   fixed headers   x000D    width  750px  x000D    table-layout  fixed  x000D    border-collapse  collapse  x000D    x000D   fixed headers th   x000D    text-decoration  underline  x000D    x000D   fixed headers th  x000D   fixed headers td   x000D    padding  5px  x000D    text-align  left  x000D    x000D   fixed headers td nth-child 1   x000D   fixed headers th nth-child 1    x000D    min-width  200px  x000D    x000D   fixed headers td nth-child 2   x000D   fixed headers th nth-child 2    x000D    min-width  200px  x000D    x000D   fixed headers td nth-child 3   x000D   fixed headers th nth-child 3    x000D    width  350px  x000D    x000D   fixed headers thead   x000D    background-color   333  x000D    color   FDFDFD  x000D    x000D   fixed headers thead tr   x000D    display  block  x000D    position  relative  x000D    x000D   fixed headers tbody   x000D    display  block  x000D    overflow  auto  x000D    width  100   x000D    height  300px  x000D    x000D   fixed headers tbody tr nth-child even    x000D    background-color   DDD  x000D    x000D   old ie wrapper   x000D    height  300px  x000D    width  750px  x000D    overflow-x  hidden  x000D    overflow-y  auto  x000D    x000D   old ie wrapper tbody   x000D    height  auto  x000D    x000D   lt table class  fixed headers  gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt Screen Size lt  th gt  x000D         lt th gt Class lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt Hidden on all lt  td gt  x000D         lt td gt  lt code class  highlighter-rouge  gt  d-none lt  code gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Hidden only on xs lt  td gt  x000D         lt td gt  lt code class  highlighter-rouge  gt  d-none  d-sm-block lt  code gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Hidden only on sm lt  td gt  x000D         lt td gt  lt code class  highlighter-rouge  gt  d-sm-none  d-md-block lt  code gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Hidden only on md lt  td gt  x000D         lt td gt  lt code class  highlighter-rouge  gt  d-md-none  d-lg-block lt  code gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Hidden only on lg lt  td gt  x000D         lt td gt  lt code class  highlighter-rouge  gt  d-lg-none  d-xl-block lt  code gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Hidden only on xl lt  td gt  x000D         lt td gt  lt code class  highlighter-rouge  gt  d-xl-none lt  code gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Visible on all lt  td gt  x000D         lt td gt  lt code class  highlighter-rouge  gt  d-block lt  code gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Visible only on xs lt  td gt  x000D         lt td gt  lt code class  highlighter-rouge  gt  d-block  d-sm-none lt  code gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Visible only on sm lt  td gt  x000D         lt td gt  lt code class  highlighter-rouge  gt  d-none  d-sm-block  d-md-none lt  code gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Visible only on md lt  td gt  x000D         lt td gt  lt code class  highlighter-rouge  gt  d-none  d-md-block  d-lg-none lt  code gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Visible only on lg lt  td gt  x000D         lt td gt  lt code class  highlighter-rouge  gt  d-none  d-lg-block  d-xl-none lt  code gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Visible only on xl lt  td gt  x000D         lt td gt  lt code class  highlighter-rouge  gt  d-none  d-xl-block lt  code gt  lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    https   getbootstrap com docs 4 1 utilities display  hiding-elements

User · Answer

For Bootstrap 4 0 beta  and I assume this will stay for final  there is a change - be aware that the hidden classes were removed   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

User · Answer

New visible classes added to Bootstrap  Extra small devices Phones   lt 768px   Class names    visible-xs-block  hidden-xs   Small devices Tablets   768px   Class names    visible-sm-block  hidden-sm   Medium devices Desktops   992px   Class names    visible-md-block  hidden-md   Large devices Desktops   1200px   Class names    visible-lg-block  hidden-lg   For more information   http   getbootstrap com css  responsive-utilities    Below is deprecated as of v3 2 0    Extra small devices Phones   lt 768px   Class names    visible-xs  hidden-xs   Small devices Tablets   768px   Class names    visible-sm  hidden-sm   Medium devices Desktops   992px   Class names    visible-md  hidden-md   Large devices Desktops   1200px   Class names    visible-lg  hidden-lg     Much older Bootstrap      hidden-phone   hidden-tablet etc  are unsupported obsolete   UPDATE   In Bootstrap 4 there are 2 types of classes    The hidden- -up which hide the element when the viewport is at the given breakpoint or wider  hidden- -down which hide the element when the viewport is at the given breakpoint or smaller    Also  the new xl viewport is added for devices that are more then 1200px width  For more information click here

User · Answer

You can enter these module class suffixes for any module to better control where it will show or be hidden    visible-phone    visible-tablet       visible-desktop      hidden-phone     hidden-tablet    hidden-desktop    http   twitter github com bootstrap scaffolding html  scroll to bottom

User · Answer

All hidden- -up  hidden-  classes doesn t work for me  so I m adding self-made hidden class before visible-  which works for current bootstrap version   It is very useful if you need to show div only for one screen  and hide for all others   CSS    hidden  display none     HTML    lt div class  col-xs-12 hidden visible-xs visible-sm  gt      lt img src  photo png  style  width 100   gt   lt  div gt

User · Answer

Additional CSS Remove Sidebar from all pages in Mobile view   media only screen and  max-width 767px     secondary   display  none

User · Answer

Bootstrap 4 Beta Answer      d-block d-md-none to hide on medium  large and extra large devices       d-none d-md-block to hide on small and extra-small devices          Note that you can also inline by replacing d- -block with d- -inline-block    Old answer  Bootstrap 4 Alpha   You can use the classes  hidden- -up to hide on a given size and larger devices      hidden-md-up to hide on medium  large and extra large devices   The same goes with  hidden- -down to hide on a given size and smaller devices      hidden-md-down to hide on medium  small and extra-small devices  visible-  is no longer an option with bootstrap 4 To display only on medium devices  you can combine the two      hidden-sm-down and hidden-xl-up    The valid sizes are    xs for phones in portrait mode   lt 34em  sm for phones in landscape mode   34em  md for tablets   48em  lg for desktops   62em  xl for desktops   75em    This was as of Bootstrap 4  alpha 5  January 2017   More details here  http   v4-alpha getbootstrap com layout responsive-utilities   On Bootstrap 4 3 x  https   getbootstrap com docs 4 3 utilities display

User · Answer

Bootstrap 4 x answer  hidden-  classes are removed from Bootstrap 4 beta onward   If you want to show on medium and up use the d-  classes  e g     lt div class  d-none d-md-block  gt This will show in medium and up lt  div gt    If you want to show only in small and below use this    lt div class  d-block d-md-none  gt  This will show only in below medium form factors lt  div gt    Screen size and class chart    Screen Size          Class                             -------------------- --------------------------------    Hidden on all         d-none                            Hidden only on xs     d-none  d-sm-block                Hidden only on sm     d-sm-none  d-md-block             Hidden only on md     d-md-none  d-lg-block             Hidden only on lg     d-lg-none  d-xl-block             Hidden only on xl     d-xl-none                         Visible on all        d-block                           Visible only on xs    d-block  d-sm-none                Visible only on sm    d-none  d-sm-block  d-md-none     Visible only on md    d-none  d-md-block  d-lg-none     Visible only on lg    d-none  d-lg-block  d-xl-none     Visible only on xl    d-none  d-xl-block                   Rather than using explicit  visible-  classes  you make an element   visible by simply not hiding it at that screen size  You can combine   one  d- -none class with one  d- -block class to show an element only   on a given interval of screen sizes  e g   d-none d-md-block d-xl-none   shows the element only on medium and large devices     Documentation

User · Answer

I have a couple of clarifications to add here   1  The list shown  visible-phone  visible-tablet  etc   is deprecated in Bootstrap 3  The new values are    visible-xs-   visible-sm-   visible-md-  visible-lg-   hidden-xs-  hidden-sm-   hidden-md-   hidden-lg-    The asterisk translates to the following for each  I show only visible-xs-  below     visible-xs-block visible-xs-inline visible-xs-inline-block   2  When you use these classes  you don t add a period in front  as confusingly shown in part of the answer above    For example    lt div class  visible-md-block col-md-6 text-right text-muted  gt      lt h5 gt Copyright  amp copy  2014 Jazimov lt  h5 gt   lt  div gt    3  You can use visible-  and hidden-   for example  visible-xs and hidden-xs  but these have been deprecated in Bootstrap 3 2 0   For more details and the latest specs  go here and search for  visible   http   getbootstrap com css

[html] Hiding elements in responsive layout?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to responsive-design