2014-07-12 08:19:46 +02:00
---
2015-08-15 07:45:55 +02:00
layout: docs
2014-07-12 08:19:46 +02:00
title: Responsive utilities
2016-10-03 03:19:47 +02:00
description: Use responsive display utility classes for showing and hiding content by device, via media query.
2015-08-06 02:47:45 +02:00
group: layout
2014-07-12 08:19:46 +02:00
---
2014-03-17 03:03:53 +01:00
2014-07-12 08:19:46 +02:00
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.
2014-03-17 03:03:53 +01:00
2014-07-12 08:19:46 +02:00
Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.
2014-03-17 03:03:53 +01:00
2016-11-25 23:01:06 +01:00
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
2014-07-12 08:19:46 +02:00
## Available classes
2014-03-17 03:03:53 +01:00
2014-12-30 04:59:10 +01:00
* The `.hidden-*-up` classes hide the element when the viewport is at the given breakpoint or wider. For example, `.hidden-md-up` hides an element on medium, large, and extra-large viewports.
2015-12-13 06:31:40 +01:00
* The `.hidden-*-down` classes hide the element when the viewport is at the given breakpoint or smaller. For example, `.hidden-md-down` hides an element on extra-small, small, and medium viewports.
2014-12-30 04:59:10 +01:00
* There are no explicit "visible"/"show" responsive utility classes; you make an element visible by simply not hiding it at that breakpoint size.
* You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes. For example, `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large viewports. Using multiple `.hidden-*-up` classes or multiple `.hidden-*-down` classes is redundant and pointless.
* These classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases.
2014-03-17 03:03:53 +01:00
2014-07-12 08:19:46 +02:00
< div class = "table-responsive" >
< table class = "table table-bordered table-striped responsive-utilities" >
< thead >
< tr >
< th > < / th >
< th >
Extra small devices
2015-12-13 00:23:55 +01:00
< small > Portrait phones (< 544px)< / small >
2014-07-12 08:19:46 +02:00
< / th >
< th >
Small devices
2015-12-13 00:23:55 +01:00
< small > Landscape phones (≥ 544px - < 768px)< / small >
2014-07-12 08:19:46 +02:00
< / th >
< th >
Medium devices
2015-12-13 00:23:55 +01:00
< small > Tablets (≥ 768px - < 992px)< / small >
2014-07-12 08:19:46 +02:00
< / th >
< th >
Large devices
2015-12-13 00:23:55 +01:00
< small > Desktops (≥ 992px - < 1200px)< / small >
2014-12-30 04:59:10 +01:00
< / th >
< th >
Extra large devices
2015-12-13 00:23:55 +01:00
< small > Desktops (≥ 1200px)< / small >
2014-07-12 08:19:46 +02:00
< / th >
< / tr >
< / thead >
< tbody >
< tr >
2014-12-30 04:59:10 +01:00
< th scope = "row" > < code > .hidden-xs-down< / code > < / th >
2014-07-12 08:19:46 +02:00
< td class = "is-hidden" > Hidden< / td >
2014-12-30 04:59:10 +01:00
< td class = "is-visible" > Visible< / td >
< td class = "is-visible" > Visible< / td >
< td class = "is-visible" > Visible< / td >
< td class = "is-visible" > Visible< / td >
< / tr >
< tr >
< th scope = "row" > < code > .hidden-sm-down< / code > < / th >
2014-07-12 08:19:46 +02:00
< td class = "is-hidden" > Hidden< / td >
< td class = "is-hidden" > Hidden< / td >
2014-12-30 04:59:10 +01:00
< td class = "is-visible" > Visible< / td >
< td class = "is-visible" > Visible< / td >
< td class = "is-visible" > Visible< / td >
2014-07-12 08:19:46 +02:00
< / tr >
< tr >
2014-12-30 04:59:10 +01:00
< th scope = "row" > < code > .hidden-md-down< / code > < / th >
2014-07-12 08:19:46 +02:00
< td class = "is-hidden" > Hidden< / td >
< td class = "is-hidden" > Hidden< / td >
< td class = "is-hidden" > Hidden< / td >
2014-12-30 04:59:10 +01:00
< td class = "is-visible" > Visible< / td >
< td class = "is-visible" > Visible< / td >
2014-07-12 08:19:46 +02:00
< / tr >
< tr >
2014-12-30 04:59:10 +01:00
< th scope = "row" > < code > .hidden-lg-down< / code > < / th >
< td class = "is-hidden" > Hidden< / td >
2014-07-12 08:19:46 +02:00
< td class = "is-hidden" > Hidden< / td >
< td class = "is-hidden" > Hidden< / td >
< td class = "is-hidden" > Hidden< / td >
2014-12-30 04:59:10 +01:00
< td class = "is-visible" > Visible< / td >
2014-07-12 08:19:46 +02:00
< / tr >
< tr >
2014-12-30 04:59:10 +01:00
< th scope = "row" > < code > .hidden-xl-down< / code > < / th >
< td class = "is-hidden" > Hidden< / td >
< td class = "is-hidden" > Hidden< / td >
2014-07-12 08:19:46 +02:00
< td class = "is-hidden" > Hidden< / td >
< td class = "is-hidden" > Hidden< / td >
< td class = "is-hidden" > Hidden< / td >
< / tr >
< tr >
2014-12-30 04:59:10 +01:00
< th scope = "row" > < code > .hidden-xs-up< / code > < / th >
< td class = "is-hidden" > Hidden< / td >
< td class = "is-hidden" > Hidden< / td >
< td class = "is-hidden" > Hidden< / td >
< td class = "is-hidden" > Hidden< / td >
2014-07-12 08:19:46 +02:00
< td class = "is-hidden" > Hidden< / td >
< / tr >
< tr >
2014-12-30 04:59:10 +01:00
< th scope = "row" > < code > .hidden-sm-up< / code > < / th >
2014-07-12 08:19:46 +02:00
< td class = "is-visible" > Visible< / td >
< td class = "is-hidden" > Hidden< / td >
2014-12-30 04:59:10 +01:00
< td class = "is-hidden" > Hidden< / td >
< td class = "is-hidden" > Hidden< / td >
< td class = "is-hidden" > Hidden< / td >
2014-07-12 08:19:46 +02:00
< / tr >
< tr >
2014-12-30 04:59:10 +01:00
< th scope = "row" > < code > .hidden-md-up< / code > < / th >
2014-07-12 08:19:46 +02:00
< td class = "is-visible" > Visible< / td >
< td class = "is-visible" > Visible< / td >
< td class = "is-hidden" > Hidden< / td >
2014-12-30 04:59:10 +01:00
< td class = "is-hidden" > Hidden< / td >
< td class = "is-hidden" > Hidden< / td >
2014-07-12 08:19:46 +02:00
< / tr >
< tr >
2014-12-30 04:59:10 +01:00
< th scope = "row" > < code > .hidden-lg-up< / code > < / th >
2014-07-12 08:19:46 +02:00
< td class = "is-visible" > Visible< / td >
< td class = "is-visible" > Visible< / td >
< td class = "is-visible" > Visible< / td >
< td class = "is-hidden" > Hidden< / td >
2014-12-30 04:59:10 +01:00
< td class = "is-hidden" > Hidden< / td >
2014-07-12 08:19:46 +02:00
< / tr >
< tr >
2014-12-30 04:59:10 +01:00
< th scope = "row" > < code > .hidden-xl-up< / code > < / th >
< td class = "is-visible" > Visible< / td >
< td class = "is-visible" > Visible< / td >
< td class = "is-visible" > Visible< / td >
< td class = "is-visible" > Visible< / td >
< td class = "is-hidden" > Hidden< / td >
2014-07-12 08:19:46 +02:00
< / tr >
< / tbody >
< / table >
< / div >
< h2 id = "responsive-utilities-print" > Print classes< / h2 >
< p > Similar to the regular responsive classes, use these for toggling content for print.< / p >
< div class = "table-responsive" >
< table class = "table table-bordered table-striped responsive-utilities" >
< thead >
< tr >
2014-12-30 04:59:10 +01:00
< th > Class< / th >
2014-07-12 08:19:46 +02:00
< th > Browser< / th >
< th > Print< / th >
< / tr >
< / thead >
< tbody >
< tr >
2014-12-30 04:59:10 +01:00
< th > < code > .visible-print-block< / code > < / th >
2014-07-12 08:19:46 +02:00
< td class = "is-hidden" > Hidden< / td >
2014-12-30 04:59:10 +01:00
< td class = "is-visible" > Visible< br > (as < code > display: block< / code > )< / td >
< / tr >
< tr >
< th > < code > .visible-print-inline< / code > < / th >
< td class = "is-hidden" > Hidden< / td >
< td class = "is-visible" > Visible< br > (as < code > display: inline< / code > )< / td >
< / tr >
< tr >
< th > < code > .visible-print-inline-block< / code > < / th >
< td class = "is-hidden" > Hidden< / td >
< td class = "is-visible" > Visible< br > (as < code > display: inline-block< / code > )< / td >
2014-07-12 08:19:46 +02:00
< / tr >
< tr >
< th > < code > .hidden-print< / code > < / th >
< td class = "is-visible" > Visible< / td >
< td class = "is-hidden" > Hidden< / td >
< / tr >
< / tbody >
< / table >
< / div >
## Test cases
2014-03-17 03:03:53 +01:00
2014-07-12 08:19:46 +02:00
Resize your browser or load on different devices to test the responsive utility classes.
2014-03-17 03:03:53 +01:00
2014-07-12 08:19:46 +02:00
Green checkmarks indicate the element **is visible** in your current viewport.
< div class = "row responsive-utilities-test visible-on" >
2016-11-04 17:54:34 +01:00
< div class = "col-6 col-sm-3" >
2014-12-30 04:59:10 +01:00
< span class = "hidden-sm-up visible" > ✔ Visible on extra small< / span >
< span class = "hidden-xs-down not-visible" > Extra small< / span >
2014-07-12 08:19:46 +02:00
< / div >
2016-11-04 17:54:34 +01:00
< div class = "col-6 col-sm-3" >
2014-12-30 04:59:10 +01:00
< span class = "hidden-md-up visible" > ✔ Visible on small or narrower< / span >
< span class = "hidden-sm-down not-visible" > Small or narrower< / span >
2014-07-12 08:19:46 +02:00
< / div >
2016-11-04 17:54:34 +01:00
< div class = "col-6 col-sm-3" >
2014-12-30 04:59:10 +01:00
< span class = "hidden-lg-up visible" > ✔ Visible on medium or narrower< / span >
< span class = "hidden-md-down not-visible" > Medium or narrower< / span >
2014-07-12 08:19:46 +02:00
< / div >
2016-11-04 17:54:34 +01:00
< div class = "col-6 col-sm-3" >
2014-12-30 04:59:10 +01:00
< span class = "hidden-xl-up visible" > ✔ Visible on large or narrower< / span >
< span class = "hidden-lg-down not-visible" > Large or narrower< / span >
2014-07-12 08:19:46 +02:00
< / div >
< / div >
2016-06-13 06:18:23 +02:00
< hr >
2014-07-12 08:19:46 +02:00
< div class = "row responsive-utilities-test visible-on" >
2016-11-04 17:54:34 +01:00
< div class = "col-6 col-sm-3" >
2014-12-30 04:59:10 +01:00
< span class = "hidden-xs-down visible" > ✔ Visible on small or wider< / span >
< span class = "hidden-sm-up not-visible" > Small or wider< / span >
2014-07-12 08:19:46 +02:00
< / div >
2016-11-04 17:54:34 +01:00
< div class = "col-6 col-sm-3" >
2014-12-30 04:59:10 +01:00
< span class = "hidden-sm-down visible" > ✔ Visible on medium or wider< / span >
< span class = "hidden-md-up not-visible" > Medium or wider< / span >
2014-07-12 08:19:46 +02:00
< / div >
2016-11-04 17:54:34 +01:00
< div class = "col-6 col-sm-3" >
2014-12-30 04:59:10 +01:00
< span class = "hidden-md-down visible" > ✔ Visible on large or wider< / span >
< span class = "hidden-lg-up not-visible" > Large or wider< / span >
2014-07-12 08:19:46 +02:00
< / div >
2016-11-04 17:54:34 +01:00
< div class = "col-6 col-sm-3" >
2014-12-30 04:59:10 +01:00
< span class = "hidden-lg-down visible" > ✔ Visible on extra large< / span >
< span class = "hidden-xl-up not-visible" > Extra large< / span >
2014-07-12 08:19:46 +02:00
< / div >
< / div >
2016-06-13 06:18:23 +02:00
< hr >
2014-12-30 04:59:10 +01:00
< div class = "row responsive-utilities-test visible-on" >
2016-11-04 17:54:34 +01:00
< div class = "col-6 col-sm-4" >
2014-12-30 04:59:10 +01:00
< span class = "hidden-sm-up visible" > ✔ Your viewport is exactly extra small< / span >
< span class = "hidden-xs-down not-visible" > Your viewport is NOT exactly extra small< / span >
2014-07-12 08:19:46 +02:00
< / div >
2016-11-04 17:54:34 +01:00
< div class = "col-6 col-sm-4" >
2014-12-30 04:59:10 +01:00
< span class = "hidden-xs-down hidden-md-up visible" > ✔ Your viewport is exactly small< / span >
< span class = "hidden-sm-only not-visible" > Your viewport is NOT exactly small< / span >
2014-07-12 08:19:46 +02:00
< / div >
2016-11-04 17:54:34 +01:00
< div class = "col-6 col-sm-4" >
2014-12-30 04:59:10 +01:00
< span class = "hidden-sm-down hidden-lg-up visible" > ✔ Your viewport is exactly medium< / span >
< span class = "hidden-md-only not-visible" > Your viewport is NOT exactly medium< / span >
2014-07-12 08:19:46 +02:00
< / div >
2016-06-13 06:18:23 +02:00
< / div >
< div class = "row responsive-utilities-test visible-on" >
2016-11-04 17:54:34 +01:00
< div class = "col-6 col-sm-4" >
2014-12-30 04:59:10 +01:00
< span class = "hidden-md-down hidden-xl-up visible" > ✔ Your viewport is exactly large< / span >
< span class = "hidden-lg-only not-visible" > Your viewport is NOT exactly large< / span >
2014-03-17 03:03:53 +01:00
< / div >
2016-11-04 17:54:34 +01:00
< div class = "col-6 col-sm-4" >
2014-12-30 04:59:10 +01:00
< span class = "hidden-lg-down visible" > ✔ Your viewport is exactly extra large< / span >
< span class = "hidden-xl-only not-visible" > Your viewport is NOT exactly extra large< / span >
2014-03-17 03:03:53 +01:00
< / div >
< / div >
