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.

Test cases

Resize your browser or load on different devices to test the responsive utility classes.

Responsive embeds

Rules are directly applied to <iframe>, <embed>, <video>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

You don’t need to include frameborder="0" in your <iframe>s as we override that for you.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

Aspect ratios can be customized with modifier classes.

<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9"> 

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3"> 

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">