Elements:Utilities
Various utilities to help site building.
Responsive floats
Float elements or remove floats based on the browser screenwidth.
Class name pattern: float-BREAKPOINT-ALIGN with full options: .float|sm|md|lg|xl-left|right|none
Classes can also be combined.
Responsive Visibility
Show or hide elements based on the browser screenwidth.
| Extra small devices Portrait phones ( |
Small devices Landscape phones (>= 544px - |
Medium devices Tablets (>= 768px - |
Large devices Desktops (>= 992px - |
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 |
Display property
These classes allow you to quickly change the "display" property of an element which can be really useful for alignment elements in a row or stacking them vertically.
Classes avaliable are: .d-block , .d-inline , or .d-inline-block
inline-block
Boot that strap!inline-block
Strap that boot!Border radius
Quickly and easily set border roundness on images, buttons or divs.
Vertical alignment
These classes allow you to set the vertical alignment of inline, inline-block, inline-table, and table cell elements: .align-baseline , .align-top , .align-middle , .align-bottom , .align-text-bottom , and .align-text-top .