Navbar colors

Bootstrap 5 Navbar colors component

Responsive navbar colors built with Bootstrap 5. Customize your navigation with intuitive, user-friendly, responsive color options for a vibrant web design.

Basic example

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.



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

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

            <nav class="navbar navbar-light" style="background-color: #e3f2fd;" data-mdb-theme="light">
              <!-- Navbar content -->
            </nav>
          
        
    
        
            
            // Initialization for ES Users
            import { Collapse, initMDB } from "mdb-ui-kit";
            
            initMDB({ Collapse });