Utilities
Additive Border
Subtractive Border
Border Opacity
Border Width
Border Radius
Rounded Sizes
Direction of Flex Row & Reverse
DocsGrow and Shrink
Enable Flex Behaviors
Wrap
Direction of Flex Column & Reverse
Auto Margins
Gap
Text Wrapping and Overflow
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
Order
Float
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
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
.overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.
Overflow Hidden
.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
.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
.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
Width
Height
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
Text Transform
Lowercased text.
Uppercased text.
CapiTaliZed text.
Clearfix
Visibility
Vertical Alignment
| baseline | top | middle | bottom | text-top | text-bottom |
Z-index
Monospace & Reset Color & Text Decoration
This is in monospace
Muted text with a reset link.
This text has a line underneath it.
This text has a line going through it.
This link has its text decoration removed