0
0
Bootsrapmarkup~5 mins

Navbar color schemes in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

A navbar helps users move around a website. Changing its color makes it easy to match your website style and improve visibility.

You want your website header to match your brand colors.
You need a dark navbar for a night mode design.
You want a light navbar for a clean, simple look.
You want to highlight the navbar so users can find it easily.
You want to make sure the navbar text is easy to read on any background.
Syntax
Bootsrap
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- Navbar content -->
</nav>

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

Use navbar-light with light backgrounds for dark text.

Use navbar-dark with dark backgrounds for light text.

Examples
This creates a light-colored navbar with dark text.
Bootsrap
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Light Navbar</a>
</nav>
This creates a dark-colored navbar with light text.
Bootsrap
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Dark Navbar</a>
</nav>
This uses Bootstrap's primary color as the navbar background with light text.
Bootsrap
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Primary Color Navbar</a>
</nav>
Sample Program

This page shows three navbars with different color schemes: light, dark, and primary color. Each uses the correct navbar-light or navbar-dark class to keep text readable.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Navbar Color Schemes</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-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Light Navbar</a>
    </div>
  </nav>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-3">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Dark Navbar</a>
    </div>
  </nav>

  <nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-3">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Primary Color Navbar</a>
    </div>
  </nav>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
OutputSuccess
Important Notes

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

You can use Bootstrap background color classes like bg-primary, bg-success, or bg-danger to change navbar colors easily.

Use the browser's developer tools to inspect and experiment with navbar colors live.

Summary

Navbar color schemes help match your website style and improve readability.

Use navbar-light with light backgrounds and navbar-dark with dark backgrounds.

Bootstrap provides many background color classes to customize your navbar easily.