Background Color Classes in Bootstrap 5

Bootstrap 5 provides several classes for setting the background color of elements in web pages. These classes can be used to apply background color to various HTML elements, such as divs, buttons, headings, and more.

Here are some key points about background color classes in Bootstrap 5:

Background color classes are typically used in conjunction with other Bootstrap classes, such as text color classes, to create visually appealing and consistent designs.
Bootstrap 5 uses a predefined set of background color classes that are named based on their purpose. For example, classes like "bg-primary", "bg-secondary", "bg-success", "bg-danger", "bg-warning", "bg-info", and "bg-dark" represent different background color options.
Background color classes in Bootstrap 5 can be applied to elements using the "bg-{color}" class, where "{color}" represents the desired background color, such as "primary", "secondary", "success", "danger", "warning", "info", or "dark".
Background color classes can also be used in combination with other Bootstrap classes, such as "text-{color}" for setting the text color within the element with the specified background color.
Bootstrap 5 also provides utility classes for applying background color to specific areas of an element, such as "bg-{position}" where "{position}" can be "top", "bottom", "start", "end", or "center", to control the placement of the background color within the element.
Background color classes in Bootstrap 5 can be used to create visually appealing designs, highlight important elements, or convey specific meanings or contexts in the user interface.

In summary, background color classes in Bootstrap 5 are a powerful tool for applying background color to HTML elements in a consistent and visually appealing manner. They can be used in combination with other Bootstrap classes to create engaging web designs.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Backgroud Colors</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/base.css">
</head>
<body>

  <div class="container" style="min-height:1800px;">
    <div class="row">
      <h2>Background Color in Bootstrap</h2><hr>
      <div class="bg-primary text-white p-3 mb-2">
        .bg-primary
      </div>
      <div class="bg-secondary text-white p-3 mb-2">
        .bg-secondary
      </div>
      <div class="bg-success text-white p-3 mb-2">
        .bg-success
      </div>
      <div class="bg-danger text-white p-3 mb-2">
        .bg-danger
      </div>
      <div class="bg-warning text-white p-3 mb-2">
        .bg-warning
      </div>
      <div class="bg-info text-white p-3 mb-2">
        .bg-info
      </div>
      <div class="bg-light text-dark p-3 mb-2">
        .bg-light
      </div>
      <div class="bg-dark text-white p-3 mb-2">
        .bg-dark
      </div>
      <div class="bg-body text-dark p-3 mb-2">
        .bg-body
      </div>
      <div class="bg-white text-dark p-3 mb-2">
        .bg-white
      </div>
      <div class="bg-transparent text-dark p-3 mb-2">
        .bg-transparent
      </div>

      <h2>Background Gradiant Color in Bootstrap</h2><hr>

      <div class="bg-primary bg-gradient text-white p-3 mb-2">
        .bg-primary .bg-gradient 
      </div>


      <div class="bg-secondary bg-gradient text-white p-3 mb-2">
        .bg-secondary .bg-gradient 
      </div>
      <div class="bg-success bg-gradient text-white p-3 mb-2">
        .bg-success .bg-gradient 
      </div>
      <div class="bg-danger  bg-gradient text-white p-3 mb-2">
        .bg-danger .bg-gradient 
      </div>
      <div class="bg-warning bg-gradient text-white p-3 mb-2">
        .bg-warning .bg-gradient 
      </div>
      <div class="bg-info bg-gradient text-white p-3 mb-2">
        .bg-info .bg-gradient 
      </div>
      <div class="bg-light bg-gradient text-dark p-3 mb-2">
        .bg-light .bg-gradient 
      </div>
      <div class="bg-dark bg-gradient text-white p-3 mb-2">
        .bg-dark .bg-gradient 
      </div>

      <h2>Background Opacity in Bootstrap</h2><hr>

      <div class="bg-success text-white p-3 mb-2">
        .bg-success Default Color
      </div>

      <div class="bg-success bg-opacity-75 text-white p-3 mb-2">
        .bg-success  Opacity-75
      </div>

      <div class="bg-success bg-opacity-50 text-white p-3 mb-2">
        .bg-success  Opacity-50
      </div>
      
      <div class="bg-success bg-opacity-25 text-white p-3 mb-2">
        .bg-success  Opacity-25
      </div>
      <div class="bg-success bg-opacity-10 text-white p-3 mb-2">
        .bg-success  Opacity-10
      </div>

    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Live Preview

Background Color Classes in Bootstrap 5

Example

Bootstrap 5.3X Tutorial

components