Text Styling and Formatting in Bootstrap

Text color

Bootstrap provides a set of utility classes for applying predefined text colors to elements.

• text-primary: Sets the text color to a primary color, typically a shade of blue;
• text-secondary: Sets the text color to a secondary color, often a shade of gray;
• text-success: Sets the text color to indicate success, typically a shade of green;
• text-danger: Sets the text color to indicate danger or error, often a shade of red;
• text-warning: Sets the text color to indicate a warning, usually a shade of yellow;
• text-info: Sets the text color to convey information, often a shade of cyan or teal;
• text-light: Sets the text color to a lighter shade, typically light gray or white;
• text-dark: Sets the text color to a darker shade, typically dark gray or black;
• text-muted: Sets the text color to a muted or subdued shade, often a light gray, to indicate that the text is less important or disabled.

These classes can be applied to elements such as <p>, <span>, <div>, <h> etc.

Text transformation

Classes like text-uppercase, text-lowercase, and text-capitalize transform the text.

• text-uppercase: Converts the text to uppercase;
• text-lowercase: Converts the text to lowercase;
• text-capitalize: Capitalizes the first letter of each word in the text.

Text decoration

Classes like text-decoration-underline, text-decoration-line-through, and text-decoration-none are used to decorate text.

• text-decoration-underline: Adds an underline to the text;
• text-decoration-line-through: Adds a line through the text;
• text-decoration-none: Removes all text decorations.