Bootstrap text color


Text Color in Bootstrap

Bootstrap provides a set of text color utilities to easily apply and manage text colors throughout your site. These utilities ensure that text is styled consistently and aligns with your design system.


1. Standard Text Color Classes

Bootstrap includes several predefined text color classes that you can use to style text elements:

  • text-primary: Applies the primary color (usually blue).
  • text-secondary: Applies the secondary color (usually gray).
  • text-success: Applies a green color, often used for success messages.
  • text-danger: Applies a red color, often used for error or danger messages.
  • text-warning: Applies a yellow color, often used for warnings.
  • text-info: Applies a light blue color, often used for informational messages.
  • text-light: Applies a light color, usually used on dark backgrounds.
  • text-dark: Applies a dark color, usually used on light backgrounds.
  • text-muted: Applies a muted color, useful for less prominent text.
  • text-white: Applies a white color.
  • text-body: Applies the default body text color.

Example:

<p class="text-primary">This is a primary text color.</p> <p class="text-danger">This is a danger text color.</p>

2. Custom Text Colors

For custom text colors beyond the standard palette, you can create your own classes:

CSS:

.text-custom { color: #ff5733; /* Custom color */ }

HTML:

<p class="text-custom">This is a custom text color.</p>

3. Text Color with Responsive Utilities

Bootstrap also allows you to apply text colors based on screen size using responsive text color classes:

  • text-sm-{color}: Text color on small screens and up.
  • text-md-{color}: Text color on medium screens and up.
  • text-lg-{color}: Text color on large screens and up.
  • text-xl-{color}: Text color on extra-large screens and up.

Example:

<p class="text-primary text-md-secondary text-lg-success"> Primary on xs, secondary on sm and md, success on lg and up </p>

4. Text Color and Background Color

When using text color utilities, it’s important to ensure good contrast with the background color to maintain readability:

  • text-light: Use on dark backgrounds.
  • text-dark: Use on light backgrounds.

Example:

<div class="bg-dark text-light p-3">Light text on a dark background.</div> <div class="bg-light text-dark p-3">Dark text on a light background.</div>

5. Text Color in Print

Bootstrap provides classes for text color in print media:

  • text-print-{color}: Applies text color when printing.

Example:

<p class="text-print-dark">This text color will appear in the print version.</p>

Summary of Text Color in Bootstrap

  • Standard Text Color Classes: Use predefined classes like text-primary, text-success, text-danger to apply common colors.
  • Custom Text Colors: Create custom text colors using your own CSS classes.
  • Responsive Text Colors: Use responsive classes like text-sm-{color}, text-md-{color} to apply different colors based on screen size.
  • Text and Background Color: Ensure good contrast between text and background colors using classes like text-light, text-dark.
  • Print Text Colors: Use classes like text-print-{color} for print-specific text colors.