Utilities

  1. Components
  2. Utilities

Additive Border

Subtractive Border

Border Opacity

Border Width

Border Radius

Rounded Sizes

Direction of Flex Row & Reverse

Docs
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

Grow and Shrink

Flex item
Flex item
Third flex item
Flex item
Flexitem

Enable Flex Behaviors

I'm a flexbox container!
I'm an inline flexbox container!

Wrap

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9

Direction of Flex Column & Reverse

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

Auto Margins

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Gap

Grid item 1
Grid item 2
Grid item 3

Text Wrapping and Overflow

This text should wrap.
This text should overflow the parent.

Word Break

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

Font Size

.fs-1 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

Align Content

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9

Order

First flex item
Second flex item
Third flex item

Float

Float start on all viewport sizes

Float end on all viewport sizes

Don't float on all viewport sizes

Text Selection

This paragraph will be entirely selected when clicked by the user.

This paragraph has default select behavior.

This paragraph will not be selectable when clicked by the user.

Pointer Events

This link can not be clicked.

This link can be clicked (this is default behavior).

This link can not be clicked because the pointer-events property is inherited from its parent. However, this link has a pe-auto class and can be clicked.

Text Alignment

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

Start aligned text on viewports sized SM (small) or wider.

Start aligned text on viewports sized MD (medium) or wider.

Start aligned text on viewports sized LG (large) or wider.

Start aligned text on viewports sized XL (extra-large) or wider.

Overflow Auto

This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.

Overflow Hidden

This is an example of using .overflow-hidden on an element with set width and height dimensions. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Overflow Visible

This is an example of using .overflow-visible on an element with set width and height dimensions.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Overflow Scroll

This is an example of using .overflow-scroll on an element with set width and height dimensions. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Arrange Elements

Center Elements

Center Elements

Shadows

No shadow
Small shadow
Regular shadow
Larger shadow

Width

Width 25%
Width 50%
Width 75%
Width 100%
Width auto

Height

Height25%
Height 50%
Height 75%
Height 100%
Height auto

Line Height

This is a long paragraph written to show how the line-height of an element is affected by our utilities.

This is a long paragraph written to show how the line-height of an element is affected by our utilities.

This is a long paragraph written to show how the line-height of an element is affected by our utilities.

This is a long paragraph written to show how the line-height of an element is affected by our utilities.

Display Property

d-inline
d-inline
d-block d-block

Text Transform

Lowercased text.

Uppercased text.

CapiTaliZed text.

Visibility

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Vertical Alignment

baseline top middle bottom text-top text-bottom

Monospace & Reset Color

This is in monospace

Muted text with a reset link.

© Dason.
Design & Develop by Themesbrand