For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query.
These use the same viewport width breakpoints as the grid system.
<div class="float-xs-left">Float left on all viewport sizes</div>
<div class="float-xs-right">Float right on all viewport sizes</div>
<div class="float-xs-none">Don't float on all viewport sizes</div>
<div class="float-sm-left">Float left on viewports sized small or wider</div>
<div class="float-md-left">Float left on viewports sized medium or wider</div>
<div class="float-lg-left">Float left on viewports sized large or wider</div>
<div class="float-xl-left">Float left on viewports sized extra-large or wider</div>
Replace {breakpoint}
to xs
, sm
, md
, lg
, xl
or xxl
.
.text-{breakpoint}-left
align text left on all viewport sizes.text-{breakpoint}-center
align text center on all viewport sizes.text-{breakpoint}-right
align text right on all viewport sizes.w-{breakpoint}-100
easily make an element as wide.d-{breakpoint}-block
to simply set an element’s display
property to block
.d-{breakpoint}-inline
to simply set an element’s display
property to inline
.d-{breakpoint}-inline-block
to simply set an element’s display
property to inline-block
.pos-{breakpoint}-relative
change the property position
with value relative
.pos-{breakpoint}-absolute
change the property position
with value absolute
.mx-{breakpoint}-auto
class for horizontally centering fixed-width block level contentReplace {breakpoint}
to sm
, md
, lg
, xl
or xxl
to set on viewport size or wider.
.h1-{breakpoint}
.h2-{breakpoint}
.h3-{breakpoint}
.h4-{breakpoint}
.h5-{breakpoint}
.h6-{breakpoint}
.display-{breakpoint}-1
.display-{breakpoint}-2
.display-{breakpoint}-3
.display-{breakpoint}-4
Create block level buttons adding .btn-{breakpoint}-block
given breakpoint or smaller .
<a href="#" class="btn btn-primary btn-block mb-1">All viewports</a>
<a href="#" class="btn btn-primary btn-md-block mb-1 mb-lg-0">Medium or smaller</a>
<a href="#" class="btn btn-primary btn-xs-block align-top ml-0 ml-lg-1">Only extra small viewport</a>
The class .btn-block
is a shorthand to .btn-xl-block
.
.hidden-*-up
classes hide the element when the viewport is at the given breakpoint or wider..hidden-*-down
classes hide the element when the viewport is at the given breakpoint or smaller..hidden-*-up
class with one .hidden-*-down
class to show an element only on a given interval of screen sizes.Extra small devices Portrait phones (<544px) | Small devices Landscape phones (≥544px - <768px) | Medium devices Tablets (≥768px - <992px) | Large devices Desktops (≥992px - <1200px) | Extra large devices Desktops (≥1200px) | |
---|---|---|---|---|---|
.hidden-xs-down |
Hidden | Visible | Visible | Visible | Visible |
.hidden-sm-down |
Hidden | Hidden | Visible | Visible | Visible |
.hidden-md-down |
Hidden | Hidden | Hidden | Visible | Visible |
.hidden-lg-down |
Hidden | Hidden | Hidden | Hidden | Visible |
.hidden-xl-down |
Hidden | Hidden | Hidden | Hidden | Hidden |
.hidden-xs-up |
Hidden | Hidden | Hidden | Hidden | Hidden |
.hidden-sm-up |
Visible | Hidden | Hidden | Hidden | Hidden |
.hidden-md-up |
Visible | Visible | Hidden | Hidden | Hidden |
.hidden-lg-up |
Visible | Visible | Visible | Hidden | Hidden |
.hidden-xl-up |
Visible | Visible | Visible | Visible | Hidden |
Similar to the regular responsive classes, use these for toggling content for print.
Class | Browser | |
---|---|---|
.visible-print-block |
Hidden | Visible (as display: block ) |
.visible-print-inline |
Hidden | Visible (as display: inline ) |
.visible-print-inline-block |
Hidden | Visible (as display: inline-block ) |
.hidden-print |
Visible | Hidden |