Background colors

Bootstrap 5 Background colors component

Responsive background colors built with Bootstrap 5. Easily customize your web design with intuitive, responsive background color utilities for a vibrant look.

Basic example

Easily set the background by using .bg-* color classes.

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-body-tertiary
.bg-dark
.bg-white
.bg-transparent
Edit in sandbox 
        
            
      
      <div class="bg-primary"></div>
      <div class="bg-secondary"></div>
      <div class="bg-success"></div>
      <div class="bg-danger"></div>
      <div class="bg-warning"></div>
      <div class="bg-info"></div>
      <div class="bg-body-tertiary"></div>
      <div class="bg-dark"></div>
      <div class="bg-white"></div>
      <div class="bg-transparent"></div>

Background gradient

By adding a .bg-gradient class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.

Do you need a gradient in your custom CSS? Just add background-image: var(--mdb-gradient);.

.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient
Edit in sandbox 
        
            
      
      <div class="bg-primary"></div>
      <div class="bg-secondary"></div>
      <div class="bg-success"></div>
      <div class="bg-danger"></div>
      <div class="bg-warning"></div>
      <div class="bg-info"></div>
      <div class="bg-body-tertiary"></div>
      <div class="bg-dark"></div>
      <div class="bg-white"></div>
      <div class="bg-transparent"></div>