Bootstrap 5 Navbar Responsive Behaviors
Last Updated :
30 Dec, 2022
Bootstrap 5 Navbar Responsive behaviors help us determine when the content will hide behind a button. For this, we use .navbar-toggler, .navbar-collapse, .navbar-expand{-sm|-md|-lg|-xl|-xxl} classes. Add .navbar-expand class so that the navbar never collapses and for the navbar to collapse never add .navbar-expand class.
Bootstrap 5 Navbar Responsive behaviors:
- Toggler: The navbar toggler is left-aligned by default but by reversing our code, the placement of togglers will also be reversed. Toggler and brand name positions can be interchanged.
- External Content: Sometimes you need to collapse the button to access some content that is outside of the container. With the help of id and data-bs-target matching, we can easily do it. Including additional JavaScript is recommended for moving focus on the navbar when it is opened.
Example 1: In this example brand name is shown on the left and the toggle on right.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<div>
<div class="text-center">
<h1 class="text-success">GeeksforGeeks</h1>
<h2>Bootstrap 5 Navbar Responsive behaviors</h2>
</div>
<br><br>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid text-success">
<h4>GFG</h4>
<button class="navbar-toggler"
data-bs-toggle="collapse"
data-bs-target="#gfgnavbar">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse ps-3"
id="gfgnavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
Jobs
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Practice
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Contests
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
|
Output:
.gif)
Bootstrap 5 Navbar Responsive Behaviors
Example 2: In this example, Bootstrap 5 Navbar external content is shown.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body class="m-2">
<div class="text-center">
<h1 class="text-success">GeeksforGeeks</h1>
<h2>Bootstrap 5 Navbar Responsive behaviors</h2>
</div>
<br><br>
<div class="collapse" id="gfgExternal">
<div class="p-3 text-center">
<h4>GFG</h4>
<p>A computer science portal for geeks</p>
</div>
</div>
<nav class="navbar bg-light">
<button class="navbar-toggler col-12"
type="button"
data-bs-toggle="collapse"
data-bs-target="#gfgExternal">
<span class="navbar-toggler-icon text-center">
</span>
</button>
</nav>
</body>
</html>
|
Output:
Bootstrap 5 Navbar Responsive Behaviors
References: https://getbootstrap.com/docs/5.0/components/navbar/#responsive-behaviors
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...