Bootstrap 5 Navbar Color Schemes
Last Updated :
15 Dec, 2022
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
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< link href =
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.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< link href =
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...