Bootstrap 5 Background Color

Last Updated : 28 Apr, 2025

Bootstrap is designed for front-end web development that prioritizes mobile responsiveness. It facilitates quicker web page design due to its built-in CSS, JS, etc.

Bootstrap 5 provides a few color utility classes, using which you may use a background color to convey a message. It includes support for opacity, lightning, and darkening, as well as dynamic backdrop colors on different triggers. 

Bootstrap 5 Background color Class:

  • .bg-primary: This class gives a primary color as the background.
  • .bg-success: This class gives a green background.
  • .bg-info: This class gives a teal background.
  •  .bg-warning: This class gives a yellow background.
  • .bg-danger: This class gives a red background.
  •  .bg-secondary: This class gives a gray background.
  • .bg-dark: This class gives a dark gray background.
  •  .bg-light: This class gives a light gray background.
  • .bg-transparent: This class gives a transparent background.

Example: Here is an example of all informative background color classes.

HTML 
<!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>Background color</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
</head>
  
<body class="ms-2 me-2">
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <strong>Bootstrap 5 Background colors</strong>
  
        <div class="p-3 mb-2 bg-primary text-white">
            .bg color-primary</div>
        <div class="p-3 mb-2 bg-secondary text-white">
            .bg-secondary</div>
        <div class="p-3 mb-2 bg-success text-white">
            .bg-success</div>
        <div class="p-3 mb-2 bg-danger text-white">
            .bg-danger</div>
        <div class="p-3 mb-2 bg-warning text-dark">
            .bg-warning</div>
        <div class="p-3 mb-2 bg-info text-dark">
            .bg-info</div>
    </div>
</body>  
</html>

Output:

Bootstrap 5 bg-color

Example 2: In this example, we will use normal background color classes like white, black, transparent, etc.

HTML 
<!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>Background color</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
</head>

<body class="ms-2 me-2">
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <strong>Bootstrap 5 Background colors</strong>

        <div class="p-3 mb-2 bg-light text-dark">
            .bg-light</div>
        <div class="p-3 mb-2 bg-dark text-white">
            .bg-dark</div>
        <div class="p-3 mb-2 bg-body text-dark">
            .bg-body</div>
        <div class="p-3 mb-2 bg-white text-dark">
            .bg-white</div>
        <div class="p-3 mb-2 bg-transparent text-dark">
            .bg-transparent</div>
    </div>
</body>
</html>

Output:

Bootstrap bg-color

Reference: https://getbootstrap.com/docs/5.0/utilities/background/#background-color

Comment

Explore