Bootstrap 5 Navbar Responsive Behaviors
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
Please Login to comment...