Sustainable Construction
Lorem ipsum dolor...
BeanieResponsive 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.