Bootstrap 5 Navbar Containers
Last Updated :
16 Nov, 2022
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 >
< 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 >
< 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 >
< 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 >
< 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
Share your thoughts in the comments
Please Login to comment...