#### Background Colors

.bg-[#005E60]
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent

#### Background Gradient

.bg-[#005E60] .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

#### Additive Border

#### Subtractive Border

#### Border Width

#### Border Radius

#### Rounded Sizes

#### Colors

.text-[#005E60]

.text-secondary

.text-success

.text-danger

.text-info

.text-muted

.text-dark

.text-black-50

.text-warning

.text-light

.text-white

.text-white-50

#### Direction of Flex Row & Reverse

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!

#### Justify Content

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

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

#### Align Self

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

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

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

#### Fill

Flex item with a lot of content
Flex item
Flex item

#### 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.

#### 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.

##### Stacks

#### Vertical

First item
Second item
Third item

##### Vertical Stacks Examples

#### Horizontal

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

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

#### 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.

#### Font Weight and Italics

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

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

#### Text Transform

Lowercased text.

Uppercased text.

CapiTaliZed text.

#### Text Decoration

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed

#### Visibility

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.

##### Theme Customizer

###### Layout

Vertical
Horizontal

###### Layout Mode

Light
Dark

###### Layout Width

Fluid
Boxed

###### Topbar Color

Light
Dark

###### Direction

LTR
RTL