Bootstrap 5 Navbar Color Schemes

Bootstrap 5 Navbar Color schemes is used to customize a navbar using navbar light and dark themes, along with background color utilities.

Bootstrap 5 Navbar Color schemes Classes: No special classes are used in Navbar Color schemes. We have an article on the Background colors that can be used to give styles to Navbar, Please refer to Bootstrap 5 Background Color to learn more.

Syntax:

<nav class="navbar navbar-* bg-#">
 Content
</nav>

Note: Where, * can be substituted with light or dark, and # can be substituted with a color utility like primary, light, danger, success, etc

Example 1: In this example, we will learn about the navbar-light theme along with the light background utility 

Output:

👁 Image

Example 2: In this example, we will learn about the navbar-dark theme along with the warning background utility.

Output

👁 Image

References: https://getbootstrap.com/docs/5.0/components/navbar/#color-schemes