Responsive utilities

Contents

  1. Get Started
  2. Grid
  3. Containers
  4. Navbars
  5. Positioning
  6. Responsive
  7. Typography
  8. Images
  9. Tables
  10. Buttons
  11. Forms
  12. Callouts
  13. Carousels

Default responsive elements

The elements img, iframe, and video are given a max-width of 100% by default so that they will not overflow their containers. It is not necessary to apply any extra classes to make these elements responsive.

Hiding content

The following helper classes are provided to content on a given viewport size and down along with a given viewport size and up: hide-xs-down, hide-sm-down, hide-md-down, hide-sm-up, hide-md-up, and hide-lg-up. They can be applied to any element. Usage should be fairly obvious. Resize the browser window as you view the sentences below to see a demonstration.

This sentence is visible on the viewports: sm, md, lg, xl.
 This sentence is visible on the viewports: md, lg, xl.
 This sentence is visible on the viewports: lg, xl.
 This sentence is visible on the viewports: xl.
 This sentence is visible on the viewports: xs.
 This sentence is visible on the viewports: xs, sm.
 This sentence is visible on the viewports: xs, sm, md. This sentence is visible on the viewports: xs, sm, md, lg. 

  
<p class="hide-xs-down">This sentence is visible on the viewports: sm, md, lg, xl.</p>
<p class="hide-sm-down">This sentence is visible on the viewports: md, lg, xl.</p>
<p class="hide-md-down">This sentence is visible on the viewports: lg, xl.</p>
<p class="hide-lg-down">This sentence is visible on the viewports: xl.</p>

<p class="hide-sm-up">This sentence is visible on the viewports: xs.</p>
<p class="hide-md-up">This sentence is visible on the viewports: xs, sm</p>
<p class="hide-lg-up">This sentence is visible on the viewports: xs, sm, md.</p>
<p class="hide-xl-up">This sentence is visible on the viewports: xs, sm, md, lg.</p>

You can combine classes to show content on a specific range of viewports.

This sentence is visible on the following viewports: sm, md.

  
<p class="hide-xs-down hide-lg-up">This sentence is visible on the viewports: sm, md.</p>

There are no classes to show content on specific viewports. You'll also need to write custom classes if you want to hide or show content on a non-contiguous range of viewports.