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 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.

Output:

👁 Bootstrap 5 Navbar Containers

Example 2: In this example, we will use a container-fluid class with and without outer container.

Output: 

👁 Bootstrap 5 Navbar Containers

Reference: https://getbootstrap.com/docs/5.0/components/navbar/#containers