Bootstrap 5 (BS5) offers a variety of typography-related classes to style text and improve readability.
Typography Classes
1. Text Color Classes : These classes set the color of the text to predefined Bootstrap color themes.
.text-primary .text-secondary .text-sucess .text-danger .text-warning .text-info .text-light .text-dark .text-white .text-muted
2. Font Weight (a) fw-bold : Sets the font weight to bold.
(b) .fw-normal : Sets the font weight to normal.
3. Text Transformation .text-uppercase : Transforms text to uppercase. .text-lowercase : Transforms text to lowercase. .text-capitalize`: Capitalizes the first letter of each word.
4. Text Alignment .text-start : Aligns text to the start (left). .text-center` : Centers text horizontally. .text-end : Aligns text to the end (right).
5. Text Wrapping .text-wrap : Allows text to wrap within its container.
5. Text Overflow .text-overflow-ellipsis` : Ellipsis text overflow style. .text-overflow-clip` : Clip text overflow style.
5. Responsive Font Sizes `.fs-1`, `.fs-2`, `.fs-3`, `.fs-4`, `.fs-5`, `.fs-6`: Sets the font size to predefined sizes, where `.fs-1` is the smallest and `.fs-6` is the largest.
5. Line Height
- .lh-base: Sets the line height to the default browser value.
- .lh-sm: Sets the line height to a smaller value.
- .lh-lg: Sets the line height to a larger value.
Font Style .fst-italic : Sets the font style to italic. .fst-normal : Reset the font style to normal.
Text Decoration .text-decoration-underline : Underlines text. .text-decoration-line-through : Applies a line-through effect to text.
.text-decoration-none : Removes text decoration.