Responsive Utility Classes

You can utilize the following classes in your custom markup to hide elements on certain viewport sizes.

Usage Tips

Remember that you can combine CSS classes on the same element. So for example, if you wanted an element to show on small and large desktops, but be hidden on tablets and mobile, you could do something like the following.

<div class="hidden-sm hidden-xs">
    <p>You won't see me on tablets or mobile.</p>
</div>

And you can also use this approach to have multiple versions of the same content. For example, let’s say you had three versions of the same content — for mobile, for tablets, and for desktops.

<div class="hidden-sm hidden-md hidden-lg">
    <p>You'll see me on mobile only.</p>
</div>
<div class="hidden-xs hidden-md hidden-lg">
    <p>You'll see me on tablets only.</p>
</div>
<div class="hidden-sm hidden-xs">
    <p>You'll see me on desktops only.</p>
</div>