How to Add Background Color in Bootstrap 5 (Simple Guide)

Bootstrap 5 makes it incredibly easy to style your website using built-in utility classes — and one of the most common customizations is adding background colors.

In this tutorial, you’ll learn how to add background color in Bootstrap 5 using predefined classes, custom CSS, and a few creative tricks for gradients and overlays.

What Are Background Utility Classes in Bootstrap?

Bootstrap 5 provides a variety of background utility classes that you can apply directly to HTML elements — no custom CSS needed.

The class pattern is:

bg-{color}

Here, {color} represents one of Bootstrap’s theme colors such as primary, secondary, success, danger, warning, info, light, dark, or body.

Example 1: Basic Background Colors

Here’s a simple example showing different Bootstrap background color utilities:

<div class="bg-primary text-white p-3">Primary Background</div>
<div class="bg-success text-white p-3">Success Background</div>
<div class="bg-danger text-white p-3">Danger Background</div>
<div class="bg-warning p-3">Warning Background</div>
<div class="bg-info text-white p-3">Info Background</div>
<div class="bg-dark text-white p-3">Dark Background</div>
<div class="bg-light text-dark p-3">Light Background</div>
Code language: HTML, XML (xml)

✅ Explanation:
Each bg-* class changes the background color, while text-* ensures the text color stays readable.

Example 2: Background for a Section or Container

You can also apply these classes to larger sections:

<section class="bg-primary text-white py-5">
  <div class="container text-center">
    <h1>Welcome to My Website</h1>
    <p>This section uses Bootstrap 5 background color utilities.</p>
  </div>
</section>
Code language: HTML, XML (xml)

✅ Tip: Use padding utilities like py-5 or p-4 for proper spacing.

Example 3: Background Gradient in Bootstrap 5

Bootstrap 5 also includes gradient support with the .bg-gradient class.

<div class="bg-primary bg-gradient text-white p-5">
  Beautiful Gradient Background
</div>
Code language: HTML, XML (xml)

✨ Pro Tip: You can combine any bg-* color with bg-gradient for a smooth gradient effect.

Example 4: Adding Custom Background Colors

If you want colors beyond Bootstrap’s default palette, you can easily create custom background colors using CSS.

<style>
  .bg-custom {
    background-color: #ff6f61; /* soft coral shade */
  }
</style>

<div class="bg-custom text-white p-4">
  Custom Background Color Example
</div>
Code language: HTML, XML (xml)

✅ Explanation:
The .bg-custom class allows you to add any color you like, using hex, RGB, or HSL values.

Example 5: Background Images + Overlay

To make your design more appealing, you can combine background colors with images and overlays.

<style>
  .hero-section {
    background: linear-gradient(
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)
      ),
      url('background.jpg') center/cover no-repeat;
    color: white;
    padding: 100px 0;
  }
</style>

<section class="hero-section text-center">
  <h1>Overlay with Background Image</h1>
  <p>Bootstrap + Custom CSS</p>
</section>
Code language: HTML, XML (xml)

✅ Explanation:
The gradient overlay gives the text better visibility over the image background.

Bootstrap Background Color Classes (Quick Reference)

Final Thoughts

Adding a background color in Bootstrap 5 is as simple as applying a class — no need to write CSS from scratch.
Whether you’re designing headers, cards, or entire sections, Bootstrap’s color utilities make styling fast, responsive, and consistent.

Use built-in color classes for simplicity, or mix in gradients and custom colors to match your brand palette!