Responsive utilities

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

Version 1.0

Basic Example of Module

Usage & Code Tips

@include title of mixin

@include title of mixin

@include title of mixin

Source code:

 

 

Available classes

Version 1.0

 Extra small devices Phones (<768px)Small devices Tablets (≥768px)Medium devices Desktops (≥992px)Large devices Desktops (≥1200px)
.visible-xs-*Visible
.visible-sm-*Visible
.visible-md-*Visible
.visible-lg-*Visible
.hidden-xsVisibleVisibleVisible
.hidden-smVisibleVisibleVisible
.hidden-mdVisibleVisibleVisible
.hidden-lgVisibleVisibleVisible

Responsive display

 
Group of classesCSS display
.visible-*-blockdisplay: block;
.visible-*-inlinedisplay: inline;
.visible-*-inline-blockdisplay: inline-block;

Source code:

 

 

Print classes

Version 1.0

ClassesBrowserPrint
.visible-print-block
.visible-print-inline
.visible-print-inline-block
Visible
.hidden-printVisible

Usage & Code Tips

The class .visible-print also exists but is deprecated as of v3.2.0. It is approximately equivalent to.visible-print-block, except with additional special cases for <table>-related elements.

Source code: