Missing visible-** and hidden-** in Bootstrap
bootstrap-4, twitter-bootstrap
Solution
Update for Bootstrap 5 (2021)
Bootstrap 5 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
Problem
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?