Navbar Colors and Forms

Navbar Colors and Forms

Navbars can be colored with background utilities and can contain forms like search boxes.

Color schemes

Use .bg-{color} to color the navbar:

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
  ...
</nav>

<nav class="navbar navbar-expand-sm bg-success navbar-dark">
  ...
</nav>

Remember the pairing rule:

• Dark background (bg-dark, bg-primary, bg-danger, and so on) uses .navbar-dark for light text.
• Light background (bg-light) uses .navbar-light for dark text.

Navbar with a search form

<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <form class="d-flex">
      <input class="form-control me-2" type="text" placeholder="Search">
      <button class="btn btn-primary" type="button">Search</button>
    </form>
  </div>
</nav>

The d-flex and me-2 classes align the input and button nicely.

Text and icons

You can also add plain text with .navbar-text or place content like icons inside the navbar.

TL;DR

• Color navbars with .bg-* classes.
• Use .navbar-dark on dark backgrounds.
• Use .navbar-light on light backgrounds.
• Navbars can hold forms, text, and icons.