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.
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-none
,
.d-flex
,
.d-inline-flex
,
.d-table
,
.d-table-cell
,
.d-block
,
.d-inline
, or
.d-inline-block
All classes are responsive using the following pattern allowing you to show and hide elements per breakpoint:
.d-(sm|md|lg|xl)-(none|flex|inline-flex|table|table-cell|block|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
.
Positioning
You can easily set the position of elements using these powerful, responsive positioning utility classes.
Set positioning to absolute, relative, static, fixed responsively:
.pos-BREAKPOINT-absolute, .pos-BREAKPOINT-relative, .pos-BREAKPOINT-static, .pos-BREAKPOINT-fixed
Position to the given axis top (t), bottom (b), left (l), right (r), x-axis (x), y-axis (y) & all (a):
.pos-BREAKPOINT-t, .pos-BREAKPOINT-b, .pos-BREAKPOINT-l, .pos-BREAKPOINT-r, .pos-BREAKPOINT-x, .pos-BREAKPOINT-y, .pos-BREAKPOINT-a
Position auto to a given axis top (t), bottom (b), left (l) & right (r):
.pos-BREAKPOINT-t-auto, .pos-BREAKPOINT-b-auto, .pos-BREAKPOINT-l-auto, .pos-BREAKPOINT-r-auto
Position to a given percentage on a given axis top (t), bottom (b), left (l) & right (r) (NOTE: 10-100 is in steps of 10):
.pos-BREAKPOINT-t-(1-10|10-100), .pos-BREAKPOINT-b-(1-10|10-100), .pos-BREAKPOINT-l-(1-10|10-100), .pos-BREAKPOINT-r-(1-10|10-100)
Set element z-index (NOTE: 10-100 is in steps of 5):
.pos-BREAKPOINT-zindex-(1-10|10-100), .pos-BREAKPOINT-zindex-(1-10|10-100), .pos-BREAKPOINT-zindex-(1-10|10-100), .pos-BREAKPOINT-zindex-(1-10|10-100)