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

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

###### Select Custome Colors

Default
Red
Purple

###### Layout

Vertical
Horizontal

###### Layout Mode

Light
Dark

###### Layout Width

Fluid
Boxed

###### Layout Position

Fixed
Scrollable

###### Topbar Color

Light
Dark

###### Sidebar Size

###### Sidebar Color

###### Direction

LTR
RTL