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= 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= 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
Please Login to comment...