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...
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...
So I've gone from single DIVs to having to add multiple DIVs with lots of up/down classes to achieve the same thing.
<div class="clearfix visible-xs-block visible-sm-block"></div>
<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?
This question is related to
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:
Visible only on xxl:
Bootstrap 4 (2018)
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-sm-down (hidden-sm hidden-xs)=
hidden-md-down (hidden-md hidden-sm hidden-xs)=
hidden-xl-down(n/a 3.x) =
Show/hide for breakpoint and up:
hidden-xl-up(n/a 3.x) =
Show/hide only for a single breakpoint:
d-none d-sm-block(same as
d-block d-sm-none d-md-block
d-block d-md-none d-lg-block
d-block d-lg-none d-xl-block
hidden-xl(n/a 3.x) =
d-none d-sm-block d-md-none
d-none d-md-block d-lg-none
d-none d-lg-block d-xl-none
visible-xl(n/a 3.x) =
Demo of the responsive display classes in Bootstrap 4
Also, note that
d-*-block can be replaced with
d-*-table etc.. depending on the display type of the element. Read more on the display classes