Bootstrap Responsive Utilities

Bootstrap provides a set of helper classes to facilitate faster development of mobile-friendly applications. These classes allow content to be displayed or hidden on different devices by combining media queries for large, small, and medium devices.

These tools should be used with caution to avoid creating entirely different versions of the same site. Responsive utilities are currently only applicable to block and table toggles.

Starting from v3.2.0, classes like .visible-- have three variants for each screen size, each targeting a different CSS display property, as listed below:

Thus, for extra small screens (xs), the available .visible-- classes are: .visible-xs-block, .visible-xs-inline, and .visible-xs-inline-block.

The .visible-xs, .visible-sm, .visible-md, and .visible-lg classes also exist but are deprecated starting from v3.2.0. Except for special cases with <table> elements, they are largely equivalent to .visible-*-block.

Print Classes

The following table lists print classes. Use these to toggle content for printing.

Example

The following example demonstrates the usage of the helper classes listed above. Resize your browser window or load the example on different devices to test the responsive utility classes.

Example

<div class="container" style="padding: 40px;">
    <div class="row visible-on">
        &lt;div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-xs">Extra Small</span>
            <span class="visible-xs">✔ Visible on extra small devices</span>
        </div>
        &lt;div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-sm">Small</span>
            <span class="visible-sm">✔ Visible on small devices</span>
        </div>
        <div class="clearfix visible-xs"></div>
        &lt;div class="col-xs-6 col-sm-3" style="background-color: #dedef8;

<div class="container">
    <div class="row">
        &lt;div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-xs">Extra Small</span>
            <span class="visible-xs">✔ Visible on Extra Small Devices</span>
        </div>
        &lt;div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-sm">Small</span>
            <span class="visible-sm">✔ Visible on Small Devices</span>
        </div>
        &lt;div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-md">Medium</span>
            <span class="visible-md">✔ Visible on Medium Devices</span>
        </div>
        &lt;div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-lg">Large</span>
            <span class="visible-lg">✔ Visible on Large Devices</span>
        </div>
    </div>
</div>

The checkmark (✔) indicates that the element is visible in the current viewport.