Bootstrap Background Colors
Background color classes let you paint the area behind an element without writing any CSS. They share the same contextual names as the text colors, so .bg-success is a green background just as .text-success is green text. In this lesson you will learn the full set of background classes, how to pair them with readable text, how to use gradients, and how to control background opacity.
The Background Color Classes
Every background class starts with .bg- followed by a color name. Applying one changes the color behind the element, which is great for cards, alert boxes, badges, and section banners. Notice that Bootstrap does not automatically change the text color, so you usually add a text color class too.
Contextual background colors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="bg-primary text-white p-2">Primary background</div>
<div class="bg-success text-white p-2">Success background</div>
<div class="bg-warning text-dark p-2">Warning background</div>
<div class="bg-light text-dark p-2">Light background</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Background Gradients
Add the .bg-gradient class next to a background color to apply a subtle top-to-bottom gradient. It gives buttons and banners a little extra depth without any images.
Adding a gradient
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="bg-primary bg-gradient text-white p-3">
Primary background with a gradient
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Background Opacity
Like text, backgrounds in Bootstrap 5 support opacity utilities. Add .bg-opacity-50, for example, to make the background half transparent. This lets you reuse one color at different strengths, which is handy for hover states or layered designs.
Different background opacities
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="bg-danger p-3">100% opacity</div>
<div class="bg-danger bg-opacity-75 p-3">75% opacity</div>
<div class="bg-danger bg-opacity-50 p-3">50% opacity</div>
<div class="bg-danger bg-opacity-25 p-3">25% opacity</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Common Uses
Background colors appear everywhere in a real interface. Here are a few places you will reach for them again and again.
- Coloring a header or footer strip with .bg-dark or .bg-primary.
- Highlighting a total or price with .bg-light inside a card.
- Building simple status pills, for example .bg-success for 'Active'.
- Creating soft, tinted sections by combining a color with .bg-opacity-25.
Exercise: Bootstrap Colors
What does the .text-danger class do?
