Display
Change the value of the display property with this responsive display classes.
Display classes that apply to all breakpoints, from xs
to xl
, have no breakpoint abbreviation in them.
Here are all the supported classes:
.d-none
or.d-{sm,md,lg,xl}-none
.d-inline
or.d-{sm,md,lg,xl}-inline
.d-inline-block
or.d-{sm,md,lg,xl}-inline-block
.d-block
or.d-{sm,md,lg,xl}-block
.d-flex
or.d-{sm,md,lg,xl}-flex
.d-inline-flex
or.d-{sm,md,lg,xl}-inline-flex
.d-block
or.d-{sm,md,lg,xl}-block
.d-grid
or.d-{sm,md,lg,xl}-grid
The media queries effect screen widths with the given breakpoint or larger. For example, .d-lg-none
sets display: none;
on both lg
and xl
screens.
For faster responsivness use responsive display classes for showing and hiding elements depending on your screen size. To hide elements simply use the .d-none
class or one of the .d-{sm,md,lg,xl}-none
classes for any responsive screen variation.
To show an element only on a given interval of screen sizes you can combine one .d-*-none
class with a .d-*-*
class, for example .d-none .d-md-block .d-xl-none
will hide the element for all screen sizes except on medium and extra large screens.
Screen Size | Class |
---|---|
Hidden on all | .d-none |
Hidden only on xs | .d-none .d-sm-block |
Hidden only on sm | .d-sm-none .d-md-block |
Hidden only on md | .d-md-none .d-lg-block |
Hidden only on lg | .d-lg-none .d-xl-block |
Hidden only on xl | .d-xl-none |
Visible on all | .d-block |
Visible only on xs | .d-block .d-sm-none |
Visible only on sm | .d-none .d-sm-block .d-md-none |
Visible only on md | .d-none .d-md-block .d-lg-none |
Visible only on lg | .d-none .d-lg-block .d-xl-none |
Visible only on xl | .d-none .d-xl-block |
*resize your screen to test the display classes variation
.d-xs-none
Hide this box on screens larger than XS (larger than 550px)..d-sm-none
Hide this box on screens larger than SM (larger than 769px)..d-md-none
Hide this box on screens larger than MD (larger than 992px)..d-lg-none
Hide this box on screens larger than LG (larger than 1280px)..d-xl-none
Hide this box on screens larger than XL (larger than 1440px)..d-xxl-none
Hide this box on screens larger than XXL (larger than 1680px)..d-none.d-xxl-block
Hide this box on screens smaller than XXL (smaller than 1680px)..d-none.d-xl-block
Hide this box on screens smaller than XL (smaller than 1440px)..d-none.d-lg-block
Hide this box on screens smaller than LG (smaller than 1280px)..d-none.d-md-block
Hide this box on screens smaller than MD (smaller than 992px)..d-none.d-sm-block
Hide this box on screens smaller than SM (smaller than 769px)..d-none.d-xs-block
Hide this box on screens smaller than XS (smaller than 550px).
<div class="d-none">Hide this block all the time</div>
<div class="d-xs-none">Hide this box on screens larger than XS (larger than 550px).</div>
<div class="d-sm-none">Hide this box on screens larger than SM (larger than 769px).</div>
<div class="d-md-none">Hide this box on screens larger than MD (larger than 992px).</div>
<div class="d-lg-none">Hide this box on screens larger than LG (larger than 1280px).</div>
<div class="d-xl-none">Hide this box on screens larger than XL (larger than 1440px).</div>
<div class="d-xxl-none">Hide this box on screens larger than XXL (larger than 1680px).</div>
<div class="d-none d-xxl-block">Hide this box on screens smaller than XXL (smaller than 1680px).</div>
<div class="d-none d-xl-block">Hide this box on screens smaller than XL (smaller than 1440px).</div>
<div class="d-none d-lg-block">Hide this box on screens smaller than LG (smaller than 1280px).</div>
<div class="d-none d-md-block">Hide this box on screens smaller than MD (smaller than 992px).</div>
<div class="d-none d-sm-block">Hide this box on screens smaller than SM (smaller than 769px).</div>
<div class="d-none d-xs-block">Hide this box on screens smaller than XS (smaller than 550px).</div>