Bootstrap 5 Background

Bootstrap 5 Background is used with the help of the keyword bg. It offers various colors like primary, success, info, warning, danger, secondary, dark, and light.

Background Color: The background color of the elements is set to contextual class like .bg-primary, .bg-success, and so on.
Background gradient: A linear gradient is applied to the backgrounds by adding color value and the .bg-gradient class to it.
Sass: This involves the Sass map and spacing utilities that are declared in Utility API.

The below examples illustrate the Bootstrap 5 Background:

Example 1: The following code demonstrates different background Color classes of Bootstrap 5.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
          integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
          crossorigin="anonymous">
    </script>
</head>

<body>
    <h1 class="text-center text-success">
        GeeksforGeeks
    </h1>
    <h2 class="text-center">
        Bootstrap 5 Background
    </h2>

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

</body>

</html>

Output:

Example 2: The following code demonstrates different background Gradient classes.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
            crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
    </script>
</head>

<body>
    <h1 class="text-center text-success">
        GeeksforGeeks
    </h1>
    <h2 class="text-center"> Bootstrap 5 Background</h2>

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

</body>
</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/utilities/background/

Explore