Open In App

Bootstrap 5 Navbar Containers

Improve
Improve
Like Article
Like
Save
Share
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=
          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

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

Bootstrap 5 Navbar Containers

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



Last Updated : 16 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads