Utilities

  1. UI Elements
  2. Utilities

Background Colors

Dashonic Only

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent
.bg-opacity-75
.bg-opacity-50
.bg-opacity-25

Background Gradient

Dashonic Only

.bg-primary .bg-gradient
.bg-secondary .bg-gradient
.bg-success .bg-gradient
.bg-danger .bg-gradient
.bg-warning .bg-gradient
.bg-info .bg-gradient
.bg-light .bg-gradient
.bg-dark .bg-gradient
.bg-white .bg-gradient
.bg-transparent .bg-gradient
.bg-opacity-75 .bg-gradient
.bg-opacity-50 .bg-gradient
.bg-opacity-25 .bg-gradient

Additive Border

Docs

Subtractive Border

Docs

Border Colors

Docs

Border Opacity

Docs

Border Width

Docs

Border Radius

Docs

Rounded Sizes

Docs

Colors

Docs

.text-primary

.text-secondary

.text-success

.text-danger

75% opacity

.text-info

.text-muted

.text-body

.text-black-50

50% opacity

.text-warning

.text-light

.text-white

.text-white-50

25% opacity

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

Docs
Flex item
Flex item
Third flex item
Flex item
Flexitem

Enable Flex Behaviors

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

Justify Content

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

Wrap

Docs
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

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

Align Self

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

Align Items

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

With Alignitems

Docs
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Fill

Docs
Flex item with a lot of content
Flex item
Flex item

Auto Margins

Docs
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Gap

Docs
Grid item 1
Grid item 2
Grid item 3

Text Wrapping and Overflow

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

Word Break

Docs

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

Font Size

Docs

.fs-1 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

Align Content

Docs
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

Docs
First flex item
Second flex item
Third flex item

Float

Docs
Float start on all viewport sizes

Float end on all viewport sizes

Don't float on all viewport sizes

Text Selection

Docs

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

Docs

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

Docs

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.

Stacks

Vertical

Docs
First item
Second item
Third item
Vertical Stacks Examples

Horizontal

Docs
First item
Second item
Third item

Using horizontal margin utilities like .ms-auto as spacers:

First item
Second item
Third item
Horizontal Stacks Examples

Overflow Auto

Docs
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

Docs
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

Docs
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

Docs
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

Docs

Center Elements

Docs

Center Elements

Docs

Shadows

Docs
No shadow
Small shadow
Regular shadow
Larger shadow

Width

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

Height

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

Line Height

Docs

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.

Font Weight and Italics

Docs

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Text with normal font style

Display Property

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

Text Transform

Docs

Lowercased text.

Uppercased text.

CapiTaliZed text.

Text Decoration

Docs

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed

Visibility

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

Vertical Alignment

Docs
baseline top middle bottom text-top text-bottom

Monospace & Reset Color

Docs

This is in monospace

Muted text with a reset link.

Shadows

Docs
No shadow
Small shadow
Regular shadow
Larger shadow
© Dashonic.
Crafted with by Pichforest