1. Text Decoration Utilities
Bootstrap provides classes for underlining, striking through, or removing text decorations. These are particularly useful for links and emphasized text.
|
1 2 3 |
<p class="text-decoration-underline">Underlined text</p> <p class="text-decoration-line-through">Line-through text</p> <a href="#" class="text-decoration-none">Link without underline</a> |
2. Text Transformation
Change text case with these utilities. They’re helpful for standardizing text presentation without modifying the original content.
|
1 2 3 |
<p class="text-lowercase">Lowercase Text</p> <p class="text-uppercase">Uppercase text</p> <p class="text-capitalize">Capitalized text</p> |
3. Font Weight and Italics
Control font weight and style with these classes. They range from light to bold weights, with options for italic text.
|
1 2 3 4 |
<p class="fw-bold">Bold text</p> <p class="fw-light">Light text</p> <p class="fst-italic">Italic text</p> <p class="fw-bold fst-italic">Bold italic text</p> |
4. Text Alignment
Align text left, center, or right. These classes can be made responsive with breakpoint prefixes like text-md-center.
|
1 2 3 4 |
<p class="text-start">Left aligned</p> <p class="text-center">Center aligned</p> <p class="text-end">Right aligned</p> <p class="text-md-center">Center on medium+ screens</p> |
5. Text Wrapping and Overflow
Control how text behaves in containers with wrapping, no-wrap, and truncation utilities. Truncation adds ellipsis for overflow.
|
1 2 3 |
<div class="text-wrap" style="width: 8rem;">Wrapped text</div> <div class="text-nowrap" style="width: 8rem;">Non-wrapped text</div> <div class="text-truncate" style="width: 8rem;">Truncated text example</div> |
6. Font Size Utilities
Bootstrap’s responsive font sizing ranges from fs-1 (largest) to fs-6 (smallest). These sizes are relative to the base font size.
|
1 2 3 |
<p class="fs-1">fs-1 text</p> <p class="fs-3">fs-3 text</p> <p class="fs-6">fs-6 text</p> |
7. Text Colors
Bootstrap’s contextual colors convey meaning through color. Combine with background utilities for better contrast.
|
1 2 3 4 |
<p class="text-primary">Primary text</p> <p class="text-success">Success text</p> <p class="text-danger">Danger text</p> <p class="text-warning bg-dark">Warning on dark</p> |
8. Text Opacity
Adjust text transparency while maintaining the original color. Useful for disabled states or subtle secondary information.
|
1 2 3 4 |
<p class="text-primary">100% opacity</p> <p class="text-primary text-opacity-75">75% opacity</p> <p class="text-primary text-opacity-50">50% opacity</p> <p class="text-primary text-opacity-25">25% opacity</p> |
9. Line Height Utilities
Control the spacing between lines of text. Useful for improving readability in different contexts.
|
1 2 3 4 |
<p class="lh-1">Compact line height (1)</p> <p class="lh-sm">Slightly smaller (1.25)</p> <p class="lh-base">Default (1.5)</p> <p class="lh-lg">Larger (2)</p> |
10. Monospace Text
Use the monospace font for code snippets, technical information, or to create visual distinction from regular text.
|
1 2 |
<p class="font-monospace">This is in monospace font</p> <p class="font-monospace text-success">Colored monospace</p> |
11. Reset Color
The text-reset class removes link colors, making them inherit the parent’s color. Useful for navigation elements.
|
1 2 3 |
<div class="text-danger"> <a href="#" class="text-reset">Link inherits red color</a> </div> |