Elements
These modular elements can be readily used and customized across pages and in different blocks.
Responsive utilities
How to use
Example
Extra small devices
Portrait phones
(<544px) |
Small devices
Landscape phones
(>= 544px - <768px) |
Medium devices
Tablets
(>= 768px - <992px) |
Large devices
Desktops
(>= 992px - <1200px) |
Extra large devices
Desktops
(>= 1200px) |
|
---|---|---|---|---|---|
.hidden-xs-down
|
Hidden | Visible | Visible | Visible | Visible |
.hidden-sm-down
|
Hidden | Hidden | Visible | Visible | Visible |
.hidden-md-down
|
Hidden | Hidden | Hidden | Visible | Visible |
.hidden-lg-down
|
Hidden | Hidden | Hidden | Hidden | Visible |
.hidden-xl-down
|
Hidden | Hidden | Hidden | Hidden | Hidden |
.hidden-xs-up
|
Hidden | Hidden | Hidden | Hidden | Hidden |
.hidden-sm-up
|
Visible | Hidden | Hidden | Hidden | Hidden |
.hidden-md-up
|
Visible | Visible | Hidden | Hidden | Hidden |
.hidden-lg-up
|
Visible | Visible | Visible | Hidden | Hidden |
.hidden-xl-up
|
Visible | Visible | Visible | Visible | Hidden |
Print Classes
How to use
Example
Classes | Browser | |
---|---|---|
.visible-print-block
.visible-print-inline
.visible-print-inline-block |
Hidden | Visible |
.hidden-print |
Visible | Hidden |