How to change Bootstrap Navbar color

Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from .navbar-light for use with light background colors, or .navbar-dark for dark background colors. Then, customize with .bg-* utilities.

See also our color docs to learn more about colors.

Dark backgrounds examples (with the usage of .navbar-dark)

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

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

Light backgrounds examples (with the usage of .navbar-light and colors set via inline CSS)

        
            
          <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
            <!-- Navbar content -->
          </nav>

          <nav class="navbar navbar-light" style="background-color: #fde3e9;">
            <!-- Navbar content -->
          </nav>