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
(<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 |
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
.