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