For speedier mobile-friendly development, Bootstrap includes a number of utility classes. These can be coupled with large, small, and medium devices to show and hide content according to device using media query.
Use them wisely and avoid making many versions of the same website. At the moment, responsive utilities are only available for toggling blocks and tables.
Classes | Devices |
---|---|
.visible-xs | Smaller than usual (less than 768px) visible |
.visible-sm | Visible in small sizes (up to 768 px) |
.visible-md | Visible in medium (768 px to 991 px) |
.visible-lg | Visible in larger sizes (992 px and up). |
.hidden-xs | Hidden extra small (less than 768px) |
.hidden-sm | Hidden small (up to 768 px) |
.hidden-md | hidden (768 px to 991 px) medium |
.hidden-lg | Hidden (992 px and above) Larger |
The following table lists the print classes. Use these for toggling the content for print.
Classes | |
---|---|
.visible-print | Yes Visible |
.hidden-print | Visible only to browsers, not to print. |
1 | Carmen |
The use of the above-mentioned helper classes is demonstrated in the following example. To test the responsive utility classes, resize your browser or load the sample on multiple devices.
|