Enabling responsive features

Enable responsive CSS by including the proper meta tag within the of your document.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

Media Queries

Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

  • Modify the width of column in our grid
  • Stack elements instead of float wherever necessary
  • Resize headings and text to be more appropriate for devices
LabelLayout widthColumn widthGutter width
Large display1200px and up70px30px
Default980px and up60px20px
Portrait tablets768px and above42px20px
Phones to tablets767px and belowFluid columns, no fixed widths
Phones480px and belowFluid columns, no fixed widths
/* Large desktop */
@media (min-width: 1200px) { ... }
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
 
/* Landscape phones and down */
@media (max-width: 480px) { ... }

Responsive Utility Class

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.

 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

Print classes

Similar to the regular responsive classes, use these for toggling content for print.

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