Bootstrap 4 Hidden & Visible

Bootstrap4-Tiers.txt

How Responsive Display Works in Bootstrap 4 Beta

// Extra small devices (portrait phones, less than 576px)
default (max-width: 575px)

// Small devices (landscape phones, 576px and up)
(sm) small (min-width: 576px) and (max-width: 767px)
 
// Medium devices (tablets, 768px and up)
(md) medium (min-width: 768px) and (max-width: 991px) 

// Large devices (desktops, 992px and up)
(lg) large (min-width: 992px) and (max-width: 1199px) 

// Extra large devices (large desktops, 1200px and up)
(xl)



* `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`