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.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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:

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/bootstrap@5.0.2/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:

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

Bootstrap 5 Navbar Containers

Explore