Bootstrap 5 Navbar Color Schemes Last Updated : 15 Dec, 2022 Comments Improve Suggest changes Like Article Like Report 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= "https://cdn.jsdelivr.net/npm/[email protected]/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. HTML <!DOCTYPE html> <html lang="en"> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/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 Comment More infoAdvertise with us Next Article Bootstrap 5 Navbar Containers N nikitamehrotra99 Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More Similar Reads Bootstrap 5 Navbar Supported Content Bootstrap 5 Navbar Supported content contains Navbar which supports various sub-components like .navbar-brand, .navbar-nav, .navbar-text, .navbar-toggler, and .navbar-scroll. Brand: It is a company, project, or product name. We add .navbar-brand to various components like a heading or a link. We can 2 min read Bootstrap 5 Navbar Brand Bootstrap 5 Navbar brand is applied to the typical branding logo that sees in the top navigation bar. It may contain an image logo or text, etc. A Navbar helps readers in selecting topics, links, or sub-topics of their interest. Bootstrap 5 Navbar Brand: Text: The text in the user interface is added 3 min read Bootstrap 5 Navbar Brand Text A navigation bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest. Navbar Brand Text is used to add text in place of the brand logo. We can write text or links using the nav 2 min read Bootstrap Navbar Brand Image Bootstrap Navbar Brand Image is used to put the image inside of a navbar, a navigation bar component in the Bootstrap framework. It typically appears at the top of a webpage, serving as a visual identifier for the website or application and linking back to the homepage. Pre-requisite: To use images 2 min read Bootstrap 5 Navbar Brand Image and Text Bootstrap 5 Navbar Brand Image and text are used to create a navbar that holds the image and text within it. A navbar can have only text, only image or both a few times you can see buttons on navbar to navigate things. Bootstrap 5 Navbar Brand Image and text used classes: There are no specific class 2 min read Bootstrap 5 Navbar Nav Bootstrap 5 Navbar Nav simplifies navigation creation by grouping navigation links within a container element with the nav class. Use nav-item for each link and nav-link for styling. Customize with optional classes like "active" for the current page. Bootstrap 5 Navbar Nav class: There is no specifi 2 min read Bootstrap 5 Navbar Forms Bootstrap 5 Navbar Forms are used to create the components like a search bar, or login within a navbar. Bootstrap 5 Navbar Forms Classes: No special classes are used in Navbar Forms. You can customize the form using Navbar and Form classes Syntax: <nav class="navbar"> <form> <input cl 2 min read Bootstrap 5 Navbar Text Navbar Text is used to put some text on the navbar. To do so Bootstrap 5 brings the Bootstrap 5 Navbar Text features. Creating a navbar is obvious when we are creating a website, and putting text on the navbar is required to guide the visitors to the right destination. Navbar Text Class: navbar-text 2 min read 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 giv 2 min read Bootstrap 5 Navbar Containers The container layout can define the main frame of the page using header, content, sidebar, and footer components. We can also add a navbar at the top of the webpage using the container navbar component. This is not that important but you can wrap up the nav bar in a container to center it on a page 2 min read Like