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.

Print classes

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