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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js">
    </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:

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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js">
    </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:

References: https://getbootstrap.com/docs/5.0/components/navbar/#responsive-behaviors

Bootstrap 5 Navbar Responsive Behaviors

Explore