Skip to content

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.

Float left on all viewport sizes
Float right on all viewport sizes
Don't float on all viewport sizes
Float left on viewports sized SM (small) & floats right from MD up
No float on sm viewports, float right on viewports sized MD (medium) or wider
Float right on viewports sized LG (large) or wider
Float right on viewports sized XL (extra-large) or wider

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)

Block

inline-block

Boot that strap!

inline-block

Strap that boot!
Inline
Inline

Border radius

Quickly and easily set border roundness on images, buttons or divs.

Rounded
Rounded top
Rounded right
Rounded bottom
Rounded left
Circle

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 .

align-baseline align-top align-middle align-bottom align-text-top align-text-bottom

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)

Awesome Features

99.9% Uptime Free Upgrades Fully Responsive Bug Free

Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage

Back to intro page