Responsive

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query.

Responsive floats

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>

Responsive helpers

Replace {breakpoint} to xs, sm, md, lg or xl.

  • .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}-100easily 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 content

Responsive headings

Replace {breakpoint} to sm, md, lg or xl 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

Buttons block

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.

Responsive hide

  • The .hidden-*-up classes hide the element when the viewport is at the given breakpoint or wider.
  • The .hidden-*-down classes hide the element when the viewport is at the given breakpoint or smaller.
  • There are no explicit “visible”/”show” responsive utility classes; you make an element visible by simply not hiding it at that breakpoint size.
  • You can combine one .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 Visible Visible Visible Visible
.hidden-sm-down Visible Visible Visible
.hidden-md-down Visible Visible
.hidden-lg-down Visible
.hidden-xl-down
.hidden-xs-up
.hidden-sm-up Visible
.hidden-md-up Visible Visible
.hidden-lg-up Visible Visible Visible
.hidden-xl-up Visible Visible Visible Visible

Print classes

Similar to the regular responsive classes, use these for toggling content for print.

Class Browser Print
.visible-print-block Visible
(as display: block)
.visible-print-inline Visible
(as display: inline)
.visible-print-inline-block Visible
(as display: inline-block)
.hidden-print Visible