Bootstrap - Colors

This chapter will discuss about Bootstrap Colors classes. You can use Bootstrap’s custom classes to add color to the text or the background and hence adding some meaning to your content.

Text Colors

Add the color utilities like .text-* to colorize the text.

The color utilities like .text-* that generated from Bootstrap's original $theme-colors Sass map don’t yet respond to color modes. This will be resolved in version 6.

Example

You can edit and try running this code using the Edit & Run option.



    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Textual Colors</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
    <div class="container mt-3">
      <h4>Contextual Colors</h4>
      <p>Use the contextual classes to provide "meaning through colors":</p>
      <p class="text-muted">Text marked by this class is muted.</p>
      <p class="text-primary">Text marked by this class is important.</p>
      <p class="text-primary-emphasis">Text marked by this class is darker than that displayed by .text-primary class.</p>
      <p class="text-success">Text marked by this class indicates success.</p>
      <p class="text-success-emphasis">Text marked by this class is darker than that displayed by .text-success class.</p>
      <p class="text-info">Text marked by this class represents some information.</p>
      <p class="text-info-emphasis">Text marked by this class is darker than that displayed by .text-info class.</p>
      <p class="text-warning">Text marked by this class represents a warning.</p>
      <p class="text-warning-emphasis">Text marked by this class is darker than that displayed by .text-warning class.</p>
      <p class="text-danger">Text marked by this class represents danger.</p>
      <p class="text-danger-emphasis">Text marked by this class is darker than that displayed by .text-danger class.</p>
      <p class="text-secondary">Text marked by this class is secondary text.</p>
      <p class="text-secondary-emphasis">Text marked by this class is darker than that displayed by .text-secondary class.</p>
      <p class="text-dark">Text marked by this class is displayed dark grey in color.</p>
      <p class="text-dark-emphasis">Text marked by this class is darker than that displayed by .text-dark class.</p>
      <p class="text-body">This class marks the default body color i.e. black.</p>
      <p class="text-body-emphasis">Text marked by this class is darker than that displayed by .text-body class.</p>
      <p class="text-body-secondary">Text marked by this class is lighter than that displayed by .text-body class.</p>
      <p class="text-body-tertiary">Text marked by this class is lighter than that displayed by .text-body-secondary class.</p>
      <p class="text-light">This class represents the text in light grey color, on a white background.</p>
      <p class="text-light-emphasis">Text marked by this class is lighter than that displayed by .text-light class.</p>
      <p class="text-white bg-dark">This class represents the text in white. on white background. In order to make the white text look clear, <b>bg-dark</b> class is used.</p>
      <p class="text-black bg-white">This class represents the text in black color. In order to make the black text color clear, <b>bg-white</b> class is used.</p>
    </div>
    </body>
    </html>

Deprecation: The text utilities like .text-black-50 and .text-white-50 are deprecated as of v5.1.0 and they will be removed from v6.0.0. New utilities like .text-opacity-* are added.

Deprecation: The .text-muted has been deprecated as of v5.3.0, due to addition of new theme colors and variables. It will be removed from v6.0.0. Its default value is reassigned to a CSS variable --bs-secondary-color.

Background Colors

Bootstrap provides a set of predefined CSS classes for background colors that can be applied to HTML elements using the bg-* classes. These classes allow you to easily apply background colors to various components in your web page without having to write custom CSS.

Here are the list of background color classes provided by Bootstrap:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Example

You can edit and try running this code using the Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap Background Colors</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="container mt-3">
        <h4>Background Colors</h4>
        <p>Use of background classes provided by Bootstrap to add meaning through colors.</p>
        <div class="bg-primary p-3">Sets the background color to the primary color defined in the Bootstrap theme.</div>
        <div class="bg-success p-3">Sets the background color to indicate success, typically green.</div>
        <div class="bg-info p-3">Sets the background color to indicate information, typically blue.</div>
        <div class="bg-warning p-3">Sets the background color to indicate a warning or caution, typically yellow.</div>
        <div class="bg-danger p-3">Sets the background color to indicate danger, typically red.</div>
        <div class="bg-secondary p-3">Sets the background color to the secondary color defined in the Bootstrap theme.</div>
        <div class="bg-dark p-3">Sets the background color to a dark color, typically a dark gray.</div>
        <div class="bg-light p-3">Sets the background color to a light color, typically a light gray.</div>
    </div>
    </body>
    </html>

Background Text Colors

Bootstrap provides a set of predefined CSS classes for text colors that can be applied to HTML elements to customize the color of the text. These classes are used in conjunction with background color classes such as .bg-* classes, to control the color of the text within elements that have a background color applied to them.

Here are the list of background text color classes provided by Bootstrap:

  • .text-bg-primary
  • .text-bg-success
  • .text-bg-info
  • .text-bg-warning
  • .text-bg-danger
  • .text-bg-secondary
  • .text-bg-dark
  • .text-bg-light

Example

You can edit and try running this code using the Edit & Run option.


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap Colors - background text color</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
    <div class="container mt-3">
        <h4>Contrasting text Color as per the background color</h4>
        <p class="text-bg-primary">Sets the text color to the primary color defined in the Bootstrap theme.</p>
        <p class="text-bg-success">Sets the text color to indicate success, typically green.</p>
        <p class="text-bg-info">Sets the text color to indicate information, typically blue.</p>
        <p class="text-bg-warning">Sets the text color to indicate a warning or caution, typically yellow.</p>
        <p class="text-bg-danger">Sets the text color to indicate danger, typically red.</p>
        <p class="text-bg-secondary">Sets the text color to the secondary color defined in the Bootstrap theme.</p>
        <p class="text-bg-dark">Sets the text color to a dark color, typically dark gray.</p>
        <p class="text-bg-light">Sets the text color to a light color, typically light gray.</p>
    </div>
    </body>
    </html>

Opacity

Opacity in Bootstrap refers to a CSS property that determines the transparency level of an element.

Bootstrap utilizes opacity in various components and utility classes to control the transparency of elements. For example, Bootstrap provides CSS classes like .opacity-25, .opacity-50, .opacity-75, and .opacity-100 that can be applied to elements to set their opacity to 25%, 50%, 75%, and 100% respectively.

Example

You can edit and try running this code using the Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap Colors - Opacity </title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h4>Example for Opacity of text</h4>
        <p class="text-primary">This is default primary text</p>
        <p class="text-primary text-opacity-75">This is 75% opacity primary text</p>
        <p class="text-primary text-opacity-50">This is 50% opacity primary text</p>
        <p class="text-primary text-opacity-25">This is 25% opacity primary text</p>
    </body>
    </html>
Advertisements