Background

Convey messages effectively by using background colors to enhance meaning and improve visual communication on your website.

Background colors

To apply a background color, just append bg-* to the color class like this: bg-primary

bg-primary
bg-secondary
bg-dark
bg-light
bg-success
bg-info
bg-warning
bg-error
<div class="bg-primary">bg-primary</div>
<div class="bg-secondary">bg-secondary</div>
<div class="bg-dark">bg-dark</div>
<div class="bg-light">bg-light</div>
<div class="bg-success">bg-success</div>
<div class="bg-info">bg-info</div>
<div class="bg-warning">bg-warning</div>
<div class="bg-error">bg-error</div>

Opacity

Choose from any of the .bg-opacity utilities to change the background opacity

This is 75% opacity success background
This is 50% opacity success background
This is 25% opacity success background
This is 10% opacity success background
This is default success background
<div class="bg-success  bg-opacity-75">This is 75% opacity success background</div>
<div class="bg-success bg-opacity-50">This is 50% opacity success background</div>
<div class="bg-success bg-opacity-25">This is 25% opacity success background</div>
<div class="bg-success bg-opacity-10">This is 10% opacity success background</div>
<div class="bg-success">This is default success background</div>
Note there are still other opacity classes like bg-opacity-5,bg-opacity-15,bg-opacity-20 and so on...

Other Background colors

bg-red-100
bg-red-200
bg-red-300
bg-red-400
bg-red-500
bg-red-600
bg-red-700
bg-red-800
bg-red-900
bg-red-1000
bg-pink-100
bg-pink-200
bg-pink-300
bg-pink-400
bg-pink-500
bg-pink-600
bg-pink-700
bg-pink-800
bg-pink-900
bg-pink-1000
bg-orange-100
bg-orange-200
bg-orange-300
bg-orange-400
bg-orange-500
bg-orange-600
bg-orange-700
bg-orange-800
bg-orange-900
bg-orange-1000
bg-purple-100
bg-purple-200
bg-purple-300
bg-purple-400
bg-purple-500
bg-purple-600
bg-purple-700
bg-purple-800
bg-purple-900
bg-purple-1000
bg-yellow-100
bg-yellow-200
bg-yellow-300
bg-yellow-400
bg-yellow-500
bg-yellow-600
bg-yellow-700
bg-yellow-800
bg-yellow-900
bg-yellow-1000
bg-green-100
bg-green-200
bg-green-300
bg-green-400
bg-green-500
bg-green-600
bg-green-700
bg-green-800
bg-green-900
bg-green-1000
bg-blue-100
bg-blue-200
bg-blue-300
bg-blue-400
bg-blue-500
bg-blue-600
bg-blue-700
bg-blue-800
bg-blue-900
bg-blue-1000
bg-light-blue-100
bg-light-blue-200
bg-light-blue-300
bg-light-blue-400
bg-light-blue-500
bg-gray-100
bg-gray-200
bg-gray-300
bg-gray-400
bg-gray-500
bg-gray-600
bg-gray-700
bg-gray-800

Background Color copied!