Sustainable Construction
Lorem ipsum dolor...
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.
| Extra small devices Phones (<576px) | Small devices Tablets (≥576px) | Medium devices Desktops (≥768px) | Large devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
|---|---|---|---|---|---|
.visible-xs-* |
Visible | Hidden | Hidden | Hidden | |
.visible-sm-* |
Hidden | Visible | Hidden | Hidden | |
.visible-md-* |
Hidden | Hidden | Visible | Hidden | |
.visible-lg-* |
Hidden | Hidden | Hidden | Visible | |
.hidden-xs |
Hidden | Visible | Visible | Visible | |
.hidden-sm |
Visible | Hidden | Visible | Visible | |
.hidden-md |
Visible | Visible | Hidden | Visible | |
.hidden-lg |
Visible | Visible | Visible | Hidden |
Breakpoint
| Group of classes | CSS display |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Print classes
Similar to the regular responsive classes, use these for toggling content for print.
| Classes | Browser | |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block |
Hidden | Visible |
.hidden-print |
Visible | Hidden |
Test cases
Resize your browser or load on different devices to test the responsive utility classes
Extra small ✔ Visible on x-small
Small ✔ Visible on small
Medium ✔ Visible on medium
Large ✔ Visible on large
✔ Visible on x-small and small
✔ Visible on medium and large
✔ Visible on x-small and medium
✔ Visible on small and large
✔ Visible on x-small and large
✔ Visible on small and medium
Hidden on...
Here, green checkmarks also indicate the element is hidden in your current viewport.