Missing visible-** and hidden-** in Bootstrap v4

Question

In Bootstrap v3 I often use the hidden-** classes combined with clearfix to control multi column layouts at different screen widths. For example,

I could combine multiple hidden-** in one DIV to make my multi columns appear correctly at different screen widths.

As an example if I wanted to display rows of product photos, 4 per row on larger screen sizes, 3 on smaller screens, then 2 on very small screens. The product photos might be different heights so I need the clearfix to ensure the row breaks properly.

Here's an example in v3...

http://jsbin.com/tosebayode/edit?html,css,output

Now that v4 has done away with these classes, and replaced them with the visible/hidden-**-up/down classes I seem to have to do the same thing with multiple DIVs instead.

Here's a similar example in v4...

http://jsbin.com/sagowihowa/edit?html,css,output

So I've gone from single DIVs to having to add multiple DIVs with lots of up/down classes to achieve the same thing.

From...

<div class="clearfix visible-xs-block visible-sm-block"></div>

to...

<div class="clearfix hidden-sm-up"></div>
<div class="clearfix hidden-md-up hidden-xs-down"></div>
<div class="clearfix hidden-md-down"></div>

Is there a better way of doing this in v4 that I have overlooked?

Answer 1

Update for Bootstrap 5 (2020)

Bootstrap 5 (currently alpha) has a new xxl breakpoint. Therefore display classes have a new tier to support this:

Hidden only on xxl: d-xxl-none
Visible only on xxl: d-none d-xxl-block

Bootstrap 4 (2018)

The hidden-* and visible-* classes no longer exist in Bootstrap 4. If you want to hide an element on specific tiers or breakpoints in Bootstrap 4, use the d-* display classes accordingly.

Remember that extra-small/mobile (formerly xs) is the default (implied) breakpoint, unless overridden by a larger breakpoint. Therefore, the -xs infix no longer exists in Bootstrap 4.

Show/hide for breakpoint and down:

• hidden-xs-down (hidden-xs) = d-none d-sm-block
• hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
• hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block
• hidden-lg-down = d-none d-xl-block
• hidden-xl-down (n/a 3.x) = d-none (same as hidden)

Show/hide for breakpoint and up:

• hidden-xs-up = d-none (same as hidden)
• hidden-sm-up = d-sm-none
• hidden-md-up = d-md-none
• hidden-lg-up = d-lg-none
• hidden-xl-up (n/a 3.x) = d-xl-none

Show/hide only for a single breakpoint:

• hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down)
• hidden-sm (only) = d-block d-sm-none d-md-block
• hidden-md (only) = d-block d-md-none d-lg-block
• hidden-lg (only) = d-block d-lg-none d-xl-block
• hidden-xl (n/a 3.x) = d-block d-xl-none
• visible-xs (only) = d-block d-sm-none
• visible-sm (only) = d-none d-sm-block d-md-none
• visible-md (only) = d-none d-md-block d-lg-none
• visible-lg (only) = d-none d-lg-block d-xl-none
• visible-xl (n/a 3.x) = d-none d-xl-block

Demo of the responsive display classes in Bootstrap 4

Also, note that d-*-block can be replaced with d-*-inline, d-*-flex, d-*-table-cell, d-*-table etc.. depending on the display type of the element. Read more on the display classes

Answer 2

Unfortunately all classes hidden-*-up and hidden-*-down were removed from Bootstrap (as of Bootstrap Version 4 Beta, in Version 4 Alpha and Version 3 these classes still existed).

Instead, new classes d-* should be used, as mentioned here: https://getbootstrap.com/docs/4.0/migration/#utilities

I found out that the new approach is less useful under some circumstances. The old approach was to HIDE elements while the new approach is to SHOW elements. Showing elements is not that easy with CSS since you need to know if the element is displayed as block, inline, inline-block, table etc.

You might want to restore the former "hidden-*" styles known from Bootstrap 3 with this CSS:

/*\  * Restore Bootstrap 3 "hidden" utility classes. \*/  /* Breakpoint XS */ @media (max-width: 575px) {     .hidden-xs-down, .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down,      .hidden-xs-up,      .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl     {         display: none !important;     }  }  /* Breakpoint SM */ @media (min-width: 576px) and (max-width: 767px) {     .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down,      .hidden-xs-up, .hidden-sm-up,      .hidden-unless-xs, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl     {         display: none !important;     }  }  /* Breakpoint MD */ @media (min-width: 768px) and (max-width: 991px) {     .hidden-md-down, .hidden-lg-down, .hidden-xl-down,      .hidden-xs-up, .hidden-sm-up, .hidden-md-up,      .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-lg, .hidden-unless-xl     {         display: none !important;     }  }  /* Breakpoint LG */ @media (min-width: 992px) and (max-width: 1199px) {     .hidden-lg-down, .hidden-xl-down,      .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up,      .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-xl     {         display: none !important;     }  }  /* Breakpoint XL */ @media (min-width: 1200px) {     .hidden-xl-down,      .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, .hidden-xl-up,      .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg     {         display: none !important;     }  } 

The classes hidden-unless-* were not included in Bootstrap 3, but they are useful as well and should be self-explanatory.

Answer 3

For bootstrap 4, here's a matrix image explaining the classes used to show / hide elements depends on the screen size:

Source : Meduim : Bootstrap 4 Hidden & Visible

Answer 4

Bootstrap v4.1 uses new classnames for hiding columns on their grid system.

For hiding columns depending on the screen width, use d-none class or any of the d-{sm,md,lg,xl}-none classes. To show columns on certain screen sizes, combine the above mentioned classes with d-block or d-{sm,md,lg,xl}-block classes.

Examples are:

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

More of these here.