Text
Text utilities to control alignment, wrapping, weight, and more.
Colored Texts
| Class name | Preview |
|---|---|
.text-primary
.text-primary-emphasis
|
Text Primary Text Primary Emphasis |
.text-secondary
.text-secondary-emphasis
|
Text Secondary Text Secondary Emphasis |
.text-success
.text-success-emphasis
|
Text Success Text Success Emphasis |
.text-info
.text-info-emphasis
|
Text Info Text Info Emphasis |
.text-warning
.text-warning-emphasis
|
Text Warning Text Warning Emphasis |
.text-danger
.text-danger-emphasis
|
Text Danger Text Danger Emphasis |
.text-light
.text-light-emphasis
|
Text Light Text Light Emphasis |
.text-dark
.text-dark-emphasis
|
Text Dark Text Dark Emphasis |
.text-white
.text-white-50
|
Text White Text White 50 |
.text-black
.text-black-50
|
Text Black Text Black 50 |
.text-body
.text-body-emphasis
.text-body-secondary
.text-body-tertiary
|
Text Body Text Danger Emphasis Text Danger Secondary Text Danger Tertiary |
Reset Color
| Class name | Preview |
|---|---|
.text-reset |
Secondary body text with a reset link.
|
Monospace
| Class name | Preview |
|---|---|
.font-monospace |
This is in monospace
|
Text Opacity
Preview
Avalable Classes
.text-opacity-90 |
.text-opacity-80 |
|---|---|
.text-opacity-75 |
.text-opacity-70 |
.text-opacity-60 |
.text-opacity-50 |
.text-opacity-40 |
.text-opacity-30 |
.text-opacity-25 |
.text-opacity-20 |
.text-opacity-10 |
Font Weight and Italics
| Class name | Preview |
|---|---|
.fw-bold |
Bold text.
|
.fw-bolder |
Bolder weight text
(relative to the parent element). |
.fw-semibold |
Semibold weight text.
|
.fw-medium |
Medium weight text.
|
.fw-normal |
Normal weight text.
|
.fw-light |
Light weight text.
|
.fw-lighter |
Lighter weight text.
(relative to the parent element). |
.fst-italic |
Italic text.
|
.fst-normal |
Text with normal font style
|
Text Decoration
| Class name | Preview |
|---|---|
.text-decoration-underline |
This text has a line underneath it. |
.text-decoration-line-through |
This text has a line going through it. |
.text-decoration-none |
This link has its text decoration removed |
.text-decoration-dashed |
This text has a dashed underline. |
.text-decoration-dotted |
This text has a dotted underline. |
.text-decoration-double |
This text has a double underline. |
.text-decoration-wavy |
This text has a wavy underline. |
.text-decoration-overline |
This text has a overline underline. |
Text Truncation
| Class name | Preview |
|---|---|
.text-truncate |
This text is quite long, and will be truncated once displayed.
|
Text Transform
| Class name | Preview |
|---|---|
.text-lowercase |
Lowercased Text. |
.text-uppercase |
Uppercased Text. |
.text-capitalize |
capiTaliZed text. |
Text Alignment
| Class name | Preview |
|---|---|
.text-start |
Start aligned text
|
.text-center |
Center aligned text
|
.text-end |
End aligned text
|
.text-sm-end |
End aligned text on viewports sized SM or wider.
|
.text-md-end |
End aligned text on viewports sized MD or wider.
|
.text-lg-end |
End aligned text on viewports sized LG or wider.
|
.text-xl-end |
End aligned text on viewports sized XL or wider.
|
.text-xxl-end |
End aligned text on viewports sized XXL or wider.
|
Display Headings
| Class name | Preview |
|---|---|
.display-1
Display 1
|
|
.display-2
Display 2
|
|
.display-3
Display 3
|
|
.display-4
Display 4
|
|
.display-5
Display 5
|
|
.display-6
Display 6
|
|
Font Size
| Class name | Preview |
|---|---|
.fs-1 |
Sample Text
|
.fs-2 |
Sample Text
|
.fs-3 |
Sample Text
|
.fs-4 |
Sample Text
|
.fs-5 |
Sample Text
|
.fs-6 |
Sample Text
|
Text Wrapping and Overflow
| Class name | Preview |
|---|---|
.text-wrap |
This text should wrap.
|
.text-nowrap |
This text should overflow the parent.
|
Line Height
| Class name | Preview |
|---|---|
.lh-1 |
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API. |
.lh-sm |
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API. |
.lh-base |
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API. |
.lh-lg |
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API. |
Text Selection
| Class name | Preview |
|---|---|
.user-select-all |
This paragraph will be entirely selected when clicked by the user. |
.user-select-auto |
This paragraph has default select behavior. |
.user-select-none |
This paragraph will not be selectable when clicked by the user. |
