Background Colors
Background Gradient
Additive Border
Subtractive Border
Border Width
Border Radius
Rounded Sizes
Colors
.text-primary
.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
Grow and Shrink
Enable Flex Behaviors
Justify Content
Wrap
Direction of Flex Column & Reverse
Align Self
Align Items
With Alignitems
Fill
Auto Margins
Gap
Text Wrapping and Overflow
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.
Stacks
Vertical
Vertical Stacks Examples
Horizontal
Using horizontal margin utilities like .ms-auto
as spacers:
Horizontal Stacks Examples
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.
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
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 removedVisibility
Vertical Alignment
baseline | top | middle | bottom | text-top | text-bottom |