BootstrapHow-ToBeginner · 3 min read

How to Use bg-primary in Bootstrap for Background Colors

Use the bg-primary class in Bootstrap by adding it to any HTML element to give it the primary theme background color. This class applies a blue background by default, matching Bootstrap's primary color palette.

📐

Syntax

The bg-primary class is added directly to an HTML element's class attribute. It applies Bootstrap's primary background color to that element.

bg-primary: The class name to set the primary background color.
Element: Any block or inline HTML element like div, button, or span.

html

<div class="bg-primary">Content here</div>

Output

A rectangular area with a blue background and the text 'Content here' in white.

💻

Example

This example shows a simple div with the bg-primary class applied. The background color will be Bootstrap's primary blue, and the text color will automatically adjust to white for readability.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap bg-primary Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="bg-primary p-3">
    This div has a primary background color.
  </div>
</body>
</html>

Output

A blue rectangular box with white text: 'This div has a primary background color.'

⚠️

Common Pitfalls

Common mistakes when using bg-primary include:

Not including Bootstrap CSS, so the class has no effect.
Using bg-primary on inline elements without setting display properties, which may not show the background as expected.
Overriding the background color with other CSS rules unintentionally.

Always ensure Bootstrap CSS is loaded and apply bg-primary to block-level elements or set display styles accordingly.

html

<!-- Wrong: No Bootstrap CSS linked, so no color -->
<div class="bg-primary">No color shown</div>

<!-- Right: Bootstrap CSS linked -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="bg-primary">Blue background shown</div>

Output

First div shows default background (no color), second div shows blue background.

📊

Quick Reference

Class	Effect	Notes
bg-primary	Sets background to primary blue	Use for main theme backgrounds
bg-secondary	Sets background to secondary gray	Alternative background color
bg-success	Sets background to green	Indicates success or positive action
bg-danger	Sets background to red	Indicates errors or warnings
bg-warning	Sets background to yellow	Indicates caution
bg-info	Sets background to light blue	For informational messages
bg-light	Sets background to light gray	For subtle backgrounds
bg-dark	Sets background to dark gray/black	For dark backgrounds

✅

Key Takeaways

Add the bg-primary class to any HTML element to apply Bootstrap's primary blue background.

Ensure Bootstrap CSS is included in your project for the class to work.

Use bg-primary on block elements or set display styles to see the background color properly.

Text color automatically adjusts to white for good contrast on bg-primary backgrounds.

bg-primary is part of Bootstrap's utility classes for quick styling without custom CSS.