Responsive Helpers in Bootstrap 4

I was used to the Boostrap 3 responsive utilities for hiding and showing elements based on the viewport width. However, the syntax completely changed. I found out how the new syntax works through this article on the Medium.

This is the mapping for those used to the Bootstrap 3 syntax.

* `hidden-xs-down` = `d-none d-sm-block`
* `hidden-sm-down` = `d-none d-md-block`
* `hidden-md-down` = `d-none d-lg-block`
* `hidden-lg-down` = `d-none d-xl-block`
* `hidden-xl-down` = `d-none` (always hidden)
* `hidden-xs-up` = `d-none` (always hidden)
* `hidden-sm-up` = `d-sm-none`
* `hidden-md-up` = `d-md-none`
* `hidden-lg-up` = `d-lg-none`
* `hidden-xl-up` = `d-xl-none`
* `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` (only) = `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` (only) = `d-none d-xl-block`

For more details on how the new syntax works and what you can do with it, check out the Medium article.

Advertisements