BootstrapHow-ToBeginner · 3 min read

How to Use Background Colors in Bootstrap Easily

In Bootstrap, you can add background colors by using the bg- utility classes followed by a color name like primary, success, or danger. For example, bg-primary adds a blue background, and bg-success adds a green background to your element.

📐

Syntax

Bootstrap uses utility classes to add background colors. The pattern is bg-{color}, where {color} is a predefined color name.

bg-primary: Blue background
bg-secondary: Gray background
bg-success: Green background
bg-danger: Red background
bg-warning: Yellow background
bg-info: Light blue background
bg-light: Light gray background
bg-dark: Dark background
bg-white: White background

Just add these classes to any HTML element to change its background color.

html

<div class="bg-primary text-white p-3">This div has a primary background</div>

Output

A rectangular box with blue background and white text saying: 'This div has a primary background'

💻

Example

This example shows multiple boxes with different Bootstrap background colors and white text for contrast.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Background Colors Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="bg-primary text-white p-3 mb-3">Primary Background</div>
    <div class="bg-success text-white p-3 mb-3">Success Background</div>
    <div class="bg-danger text-white p-3 mb-3">Danger Background</div>
    <div class="bg-warning text-dark p-3 mb-3">Warning Background</div>
    <div class="bg-info text-dark p-3 mb-3">Info Background</div>
    <div class="bg-light text-dark p-3 mb-3">Light Background</div>
    <div class="bg-dark text-white p-3 mb-3">Dark Background</div>
  </div>
</body>
</html>

Output

Seven stacked rectangular boxes each with different background colors: blue, green, red, yellow, light blue, light gray, and dark background, with readable text inside.

⚠️

Common Pitfalls

Some common mistakes when using Bootstrap background colors include:

Not adding text color classes like text-white or text-dark to keep text readable on colored backgrounds.
Using background classes on elements that do not show background well, like inline elements without block or padding.
Forgetting to include Bootstrap CSS file, so classes have no effect.

html

<!-- Wrong: No text color, hard to read -->
<div class="bg-primary p-3">Unreadable text</div>

<!-- Right: Add text-white for contrast -->
<div class="bg-primary text-white p-3">Readable text</div>

Output

First box: blue background with default black text (hard to read). Second box: blue background with white text (easy to read).

📊

Quick Reference

Class	Background Color	Text Color Suggestion
bg-primary	Blue	text-white
bg-secondary	Gray	text-white
bg-success	Green	text-white
bg-danger	Red	text-white
bg-warning	Yellow	text-dark
bg-info	Light Blue	text-dark
bg-light	Light Gray	text-dark
bg-dark	Dark	text-white
bg-white	White	text-dark

✅

Key Takeaways

Use Bootstrap's bg-{color} classes to quickly add background colors.

Always pair background color classes with appropriate text color classes for readability.

Include Bootstrap CSS in your project to make these classes work.

Background color classes work best on block-level elements with padding.

Use the quick reference table to pick the right color and text combination.