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
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="w-4 m-3">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3>Navbar Color schemes </h3>
<nav class="navbar navbar-light bg-light ">
<div>
<a class="navbar-brand" href="#">
Java
</a>
<a class="navbar-brand" href="#">
Stack
</a>
<a class="navbar-brand" href="#">
Queue
</a>
</div>
</nav>
</div>
</body>
</html>
Output:
Example 2: In this example, we will learn about the navbar-dark theme along with the warning background utility.
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="w-4 m-3">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3>Navbar Color schemes</h3>
<nav class="navbar navbar-dark bg-warning ">
<div>
<a class="navbar-brand" href="#">
Java
</a>
<a class="navbar-brand" href="#">
Stack
</a>
<a class="navbar-brand" href="#">
Queue
</a>
</div>
</nav>
</div>
</body>
</html>
Output
References: https://getbootstrap.com/docs/5.0/components/navbar/#color-schemes