Bootstrap - Background

This chapter discusses about the background color utility classes and the gradients that can be used with these classes.

Accessibility tip: Use of color to the background 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.

Background color

Like the contextual color classes for text, you can apply any contextual class to set the background of an element. Keep in mind that background utilities do not affect color, therefore, certain situations may require the use of .text-* color utilities.

Let us see an example:

Example

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Background</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>Background color utilities</h4>  
     
    <!--success color-->
    <div class="p-3 mb-2 bg-success text-white">background utility --> .bg-success</div>
    <div class="p-3 mb-2 bg-success-subtle text-emphasis-success">background utility subtle--> .bg-success-subtle</div>
    <!--warning color-->
    <div class="p-3 mb-2 bg-warning text-dark">background utility --> .bg-warning</div>
    <div class="p-3 mb-2 bg-warning-subtle text-emphasis-warning">background utility subtle --> .bg-warning-subtle</div>
    <!--info color-->
    <div class="p-3 mb-2 bg-info text-dark">background utility --> .bg-info</div>
    <div class="p-3 mb-2 bg-info-subtle text-emphasis-info">background utility subtle--> .bg-info-subtle</div>
    <!--dark color-->
    <div class="p-3 mb-2 bg-dark text-white">background utility --> .bg-dark</div>
    <div class="p-3 mb-2 bg-dark-subtle text-emphasis-dark">background utility subtle--> .bg-dark-subtle</div>
    <!--primary color-->
    <div class="p-2 mb-2 bg-primary text-white">background utility --> .bg-primary</div>
    <div class="p-3 mb-2 bg-primary-subtle text-emphasis-primary">background utility subtle--> .bg-primary-subtle</div>
    <!--light color-->
    <div class="p-3 mb-2 bg-light text-dark">background utility --> .bg-light</div>
    <div class="p-3 mb-2 bg-light-subtle text-emphasis-light">background utility subtle--> .bg-light-subtle</div>
    <!--secondary color-->
    <div class="p-3 mb-2 bg-secondary text-white">background utility --> .bg-secondary</div>
    <div class="p-3 mb-2 bg-secondary-subtle text-emphasis-secondary">background utility subtle--> .bg-secondary-subtle</div>
    <!--body color-->
    <div class="p-3 mb-2 bg-body text-body">background utility --> .bg-body</div>
    <div class="p-3 mb-2 bg-black text-white">background utility subtle--> .bg-black</div>
    <!--danger color-->
    <div class="p-3 mb-2 bg-danger text-white">background utility --> .bg-danger</div>
    <div class="p-3 mb-2 bg-danger-subtle text-emphasis-danger">background utility subtle--> .bg-danger-subtle</div>
    <!--white color-->
    <div class="p-3 mb-2 bg-white text-dark">background utility --> .bg-white</div>
    <div class="p-3 mb-2 bg-transparent text-body">background utility subtle--> .bg-transparent</div>
    <!--secondary and tertiary color-->
    <p class="p-3 mb-2 bg-body-secondary">background utility --> .bg-body-secondary</p>
    <p class="p-3 mb-2 bg-body-tertiary">background utility --> .bg-body-tertiary</p>
  </body>
</html>

Background gradient

The addition of a .bg-gradient class results in a linear gradient being applied to the backgrounds, commencing with a partially transparent white hue that gradually fades towards the bottom.

In order to add a gradient in your custom CSS, just add background-image: var(--bs-gradient);.

Let us see an example of .bg-gradient class:

Example

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

<!DOCTYPE html> <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Background</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>
	<div class="container mt-3">
    <h4>Background color utilities</h4>  
     
    <!--success color-->
    <div class="p-3 mb-2 bg-success text-white">background utility --> .bg-success</div>
    <div class="p-3 mb-2 bg-success bg-gradient text-white">background gradient utility --> .bg-success bg-gradient</div>
    <!--warning color-->
    <div class="p-3 mb-2 bg-warning text-dark">background utility --> .bg-warning</div>
    <div class="p-3 mb-2 bg-warning bg-gradient text-emphasis-warning">background gradient utility --> .bg-warning bg-gradient</div>
    <!--info color-->
    <div class="p-3 mb-2 bg-info text-dark">background utility --> .bg-info</div>
    <div class="p-3 mb-2 bg-info bg-gradient text-emphasis-info">background gradient utility--> .bg-info bg-gradient</div>
    <!--dark color-->
    <div class="p-3 mb-2 bg-dark text-white">background utility --> .bg-dark</div>
    <div class="p-3 mb-2 bg-dark bg-gradient text-white">background gradient utility --> .bg-dark bg-gradient</div>
    <!--primary color-->
    <div class="p-2 mb-2 bg-primary text-white">background utility --> .bg-primary</div>
    <div class="p-3 mb-2 bg-primary bg-gradient text-white">background gradient utility--> .bg-primary bg-gradient</div>
    <!--light color-->
    <div class="p-3 mb-2 bg-light text-dark">background utility --> .bg-light</div>
    <div class="p-3 mb-2 bg-light bg-gradient text-emphasis-light">background gradient utility--> .bg-light bg-gradient</div>
    <!--secondary color-->
    <div class="p-3 mb-2 bg-secondary text-white">background utility --> .bg-secondary</div>
    <div class="p-3 mb-2 bg-secondary bg-gradient text-white">background gradient utility--> .bg-secondary bg-gradient</div>
    <!--body color-->
    <div class="p-3 mb-2 bg-body text-body">background utility --> .bg-body</div>
    <div class="p-3 mb-2 bg-black bg-gradient text-white">background gradient utility--> .bg-black bg-gradient</div>
    <!--danger color-->
    <div class="p-3 mb-2 bg-danger text-white">background utility --> .bg-danger</div>
    <div class="p-3 mb-2 bg-danger bg-gradient text-white">background gradient utility--> .bg-danger bg-gradient</div>
    </div>
	</body>
</html>

Opacity

To change the opacity of the background color, either override --bs-bg-opacity via custom styles or inline styles or choose from the available utility .bg-opacity.

Let us see an example where the CSS variable is overriden:

Example

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Background</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>
    <div class="container mt-3">
    <h4>Background opacity - override CSS variable</h4>
    <div class="bg-danger p-2 text-white">Default danger background</div>
    <div class="bg-danger p-2" style="--bs-bg-opacity: .5;">50% opacity of danger background</div>
    </div>
  </body>
</html>

Let us see an example where .bg-opacity is used:

Example

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Background</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>
    <div class="container mt-3">
    <h4>Background opacity utility</h4>
    <div class="bg-primary p-2 text-white">Primary default background</div>
    <div class="bg-primary p-2 text-dark bg-opacity-10">10% opacity on primary background</div>
    <div class="bg-primary p-2 text-dark bg-opacity-25">25% opacity on primary background</div>
    <div class="bg-primary p-2 text-dark bg-opacity-50">50% opacity on primary background</div>
    <div class="bg-primary p-2 text-dark bg-opacity-75">75% opacity primary background</div>
    </div>
  </body>
</html>
Advertisements