Bootstrap 5 Navbar Containers Last Updated : 16 Nov, 2022 Comments Improve Suggest changes Like Article Like Report 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 but an inner container is required in that case. But if you add a container class inside the navbar then it will center the contents of a fixed/static top navbar. Navbar Containers Classes: container: This class is used to provide a responsive fixed-width container.container-md: This class is used to set the container width medium.container-fluid: The container-fluid class provides a full-width container that spans the viewport's entire width. Syntax: <div class="container"> <nav class="..."> <div class="container-fluid"> <a class="..." href="#">...</a> </div> </nav> </div> Below examples illustrate the Bootstrap 5 Navbar Containers: Example 1: In this example, we will use a container-fluid class with and without an outer container. HTML <!DOCTYPE html> <html> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Bootstrap 5 Navbar Containers</title> </head> <body> <center> <h1 class="text-success"> GeeksforGeeks</h1> <strong> Bootstrap 5 Navbar Containers </strong> </center> <strong>container-md without outer container:</strong> <!-- Bootstrap 5 Navbar Container Class used Outside--> <div class="container"> <nav class="navbar navbar-light bg-primary"> <div class="container-md"> <a class="navbar-brand" href="#">GeeksforGeeks</a> </div> </nav> </div> <br> <strong>container-md without outer container:</strong> <!-- Bootstrap 5 Navbar Container Class not used outside--> <nav class="navbar navbar-light bg-primary"> <div class="container-md"> <a class="navbar-brand" href="#">GeeksforGeeks</a> </div> </nav> </body> </html> Output: Bootstrap 5 Navbar Containers Example 2: In this example, we will use a container-fluid class with and without outer container. HTML <!DOCTYPE html> <html> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Bootstrap 5 Navbar Containers</title> </head> <body> <center> <h1 class="text-success"> GeeksforGeeks</h1> <strong> Bootstrap 5 Navbar Containers </strong> </center> <strong>container-fluid with outer container:</strong> <!-- Bootstrap 5 Navbar Container Class used Outside--> <div class="container"> <nav class="navbar navbar-light bg-primary"> <div class="container-fluid"> <a class="navbar-brand" href="#">GeeksforGeeks</a> </div> </nav> </div> <br> <strong>container-fluid without outer container:</strong> <!-- Bootstrap 5 Navbar Container Class not used outside--> <nav class="navbar navbar-light bg-primary"> <div class="container-fluid"> <a class="navbar-brand" href="#">GeeksforGeeks</a> </div> </nav> </body> </html> Output: Bootstrap 5 Navbar Containers Reference: https://getbootstrap.com/docs/5.0/components/navbar/#containers Comment More infoAdvertise with us S ssundax1gy Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 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