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:
.position-BREAKPOINT-absolute, .position-BREAKPOINT-relative, .positionBREAKPOINT-static, .position-BREAKPOINT-fixed, .position-BREAKPOINT-sticky
Position to the given axis top (t), bottom (b), left (start), right (end), x-axis (x), y-axis (y):
.top-BREAKPOINT-(0,50,100), .bottom-BREAKPOINT-(0,50,100), .start-BREAKPOINT-(0,50,100), .end-BREAKPOINT-(0,50,100)
Position auto to a given axis:
.translate-middle-BREAKPOINT-x, .translate-middle-BREAKPOINT-y
Set element z-index (NOTE: 10-100 is in steps of 5):
.zindex-(1-10|10-100)
Overflow
.overflow-auto
on an element with set width and height dimensions. By design, this content will vertically scroll.
.overflow-hidden
on an element with set width and height dimensions.
.overflow-visible
on an element with set width and height dimensions.
.overflow-scroll
on an element with set width and height dimensions.
.overflow-x-auto
example on an element
.overflow-x-hidden
example
.overflow-x-visible
example
.overflow-x-scroll
example on an element
.overflow-y-auto
example on an element with set width and height dimensions.
.overflow-y-hidden
example on an element with set width and height dimensions.
.overflow-y-visible
example on an element with set width and height dimensions.
.overflow-y-scroll
example on an element with set width and height dimensions.