BootstrapHow-ToBeginner · 3 min read

How to Change Navbar Color in Bootstrap Quickly

To change the navbar color in Bootstrap, use built-in classes like navbar-light bg-light or navbar-dark bg-dark on the <nav> element. For custom colors, add your own CSS styles targeting the navbar background.

📐

Syntax

Bootstrap provides utility classes to set navbar colors easily. Use navbar-light or navbar-dark to control text color for light or dark backgrounds. Then add a background color class like bg-light, bg-dark, or bg-primary to set the navbar background color.

navbar-light: Makes text dark for light backgrounds.
navbar-dark: Makes text light for dark backgrounds.
bg-*: Sets background color using Bootstrap’s color palette.

html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- Navbar content -->
</nav>

Output

A horizontal navigation bar with light background and dark text.

💻

Example

This example shows a navbar with a dark background and light text using Bootstrap classes. It also includes a brand name and a toggle button for mobile view.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Navbar Color Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">MySite</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A dark navbar with brand name 'MySite' and three navigation links: Home, Features, Pricing.

⚠️

Common Pitfalls

Common mistakes when changing navbar color include:

Using navbar-light with a dark background, which makes text hard to read.
Not including a background color class, leaving the navbar transparent or default.
Overriding Bootstrap classes without proper CSS specificity, causing styles not to apply.

Always pair navbar-light with light backgrounds and navbar-dark with dark backgrounds for good contrast.

html

<!-- Wrong: navbar-light with dark background -->
<nav class="navbar navbar-light bg-dark">
  <!-- Text will be hard to read -->
</nav>

<!-- Right: navbar-dark with dark background -->
<nav class="navbar navbar-dark bg-dark">
  <!-- Text is light and readable -->
</nav>

Output

First navbar text is hard to read; second navbar text is clear and visible.

📊

Quick Reference

Class	Effect
navbar-light	Dark text for light backgrounds
navbar-dark	Light text for dark backgrounds
bg-light	Light gray background
bg-dark	Dark gray/black background
bg-primary	Bootstrap primary color background
bg-success	Green background
bg-danger	Red background
bg-warning	Yellow background
bg-info	Light blue background

✅

Key Takeaways

Use navbar-light with light background classes and navbar-dark with dark background classes for good contrast.

Add a bg-* class to set the navbar background color from Bootstrap’s palette.

Avoid mixing navbar-light with dark backgrounds or navbar-dark with light backgrounds to keep text readable.

For custom colors, override the navbar background with your own CSS targeting the navbar class.

Always test your navbar color on different screen sizes and devices for accessibility.