Bootstrap - Color and background

This chapter discusses about setting the background color with appropriate contrasting foreground or text color.

These color and background helper classes combine the .text-* utilities and .bg-* utilities in one common class, namely .text-bg-*.


In order to make the links legible, that have relatively light foreground color, use on a dark background.

Example

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Helper</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>Color and background utilities</h4>  
        <br> 
        <div class="text-bg-primary p-3">Primary background with contrasting text color</div>
        <div class="text-bg-secondary p-3">Secondary background with contrasting text color</div>
        <div class="text-bg-success p-3">Success background with contrasting text color</div>
        <div class="text-bg-danger p-3">Danger background with contrasting text color</div>
        <div class="text-bg-warning p-3">Warning background with contrasting text color</div>
        <div class="text-bg-info p-3">Info background with contrasting text color</div>
        <div class="text-bg-light p-3">Light background with contrasting text color</div>
        <div class="text-bg-dark p-3">Dark background with contrasting text color</div>
    </body>
</html>

Accessibility tip: Use of color to the progress bars just provides a visual indication, and this will not be helpful to users of assistive technologies like screen readers. Make sure that the meaning is clear from the content itself.

Use alternative means to add clarity to the content using the .visually-hidden class.

With components

The color and background helper classes can be used in place of combined .text-* and .bg-* classes, such as on badges.

In order to make the links legible, that have relatively light foreground color, use on a dark background.

Example

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Helper</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>Color and background utilities - badges</h4>  
        <br> 
        <span class="badge text-bg-success">Success</span>
        <span class="badge text-bg-info">Info</span>
        <span class="badge text-bg-warning">Warning</span>
    </body>
</html>

The color and background helper classes can be used in place of combined .text-* and .bg-* classes, such as on cards.

In order to make the links legible, that have relatively light foreground color, use on a dark background.

Example

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Helper</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>Color and background utilities - cards</h4>  
        <br> 
        <div class="card text-bg-info mb-3" style="max-width: 18rem;">
          <div class="card-header fw-bold">Card Header</div>
          <div class="card-body">
            <p class="card-text">Card showing the text and background color classes used together.</p>
          </div>
        </div>
        <div class="card text-bg-warning mb-3" style="max-width: 18rem;">
          <div class="card-header fw-bold">Card Header</div>
          <div class="card-body">
            <p class="card-text">Card showing the text and background color classes used together.</p>s
          </div>
        </div>
    </body>
</html>
Advertisements