Open In App

Bootstrap 5 Navbar Responsive behaviors Toggler

Last Updated : 05 Feb, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Navbar has an amazing feature that makes it very innovatively responsive to different screen and viewport sizes which is its transformation into the Toggler. The elements’ visibility in the navbar can be toggled with the use of a toggler in the Navbar. To control when their information collapses behind a button, navigation bars use the classes .navbar-toggler,.navbar-collapse, and .navbar-expand[-sm|-md|-lg|-xl|-xxl]. Also, the screen size or viewport size at which the contents will be hidden is completely customizable. 

Bootstrap 5 Navbar Responsive behaviors Toggler Syntax:

<nav class="navbar">
    <button class="navbar-toggler" type="button" 
            data-bs-toggle="collapse" 
            data-bs-target="#navbarToggle">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse" id="navbarToggle">
        <!-- Navbar Content Goes Here --!>
    </div>
</nav>

Bootstrap 5 Navbar Responsive behaviors Toggler Used Classes:

  • navbar-toggler: Used to determine which button exactly is used as the toggler to toggle the navbar when the viewport precedes the predetermined size.
  • collapse: Used to add the Collapse functionality to the navbar which adds the feature to expand and collapse.

 

Example 1: The code below demonstrates how we can add a Responsive behaviors Toggler in a Navbar with a dropdown:

HTML




<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
</head>
<body class="m-3">
    <h1 class="ms-5 text-success">
        GeeksforGeeks
    </h1>
    <h4 class="ms-5">
        Bootstrap 5 Navbar Responsive behaviors Toggler
    </h4>  
    <nav class="navbar navbar-expand-md 
                navbar-dark bg-dark">
        <div class="container-fluid">
            <button class="navbar-toggler" 
                    type="button" data-bs-toggle="collapse" 
                    data-bs-target="#navbarToggler">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarToggler">
                <a class="navbar-brand" href="#">Navbar</a>
                <div class="dropdown">
                    <button class="btn btn-success dropdown-toggle" 
                        type="button" data-bs-toggle="dropdown">
                        Topics
                    </button>
                    <ul class="dropdown-menu dropdown-menu-dark" 
                    aria-labelledby="dropdownMenuButton2">
                        <li class="nav-item">
                            <a class="nav-link" href="#">DS</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Algorithms</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">C++</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">BootStrap 5</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
</body>
</html>


Output:

Bootstrap 5 Navbar Responsive behaviors Toggler

Bootstrap 5 Navbar Responsive behaviors Toggler

Example 2: The code below demonstrates how we can add Responsive behaviors Toggler in a Navbar which has Scrollspy:

HTML




<!doctype html>
<html lang="en">
<head>
     <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
      
    <script>
        $(function(){
             $('#work').on('activate.bs.scrollspy')
        });
    </script>
</head>
<body style='position: relative' class="m-3">
    <nav class="navbar navbar-expand-md 
                navbar-dark bg-dark">
        <div class="container-fluid">
          <button class="navbar-toggler" type="button" 
                  data-bs-toggle="collapse" 
                  data-bs-target="#navbarToggler" 
                  aria-controls="navbarToggler" 
                  aria-expanded="false" 
                  aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" 
               id="navbarToggler">
            <a class="navbar-brand" href="#">
                  Hidden Navbar
            </a>
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" 
                   aria-current="page" 
                   href="#dataStructs">
                      Data Structures
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link active" 
                   aria-current="page" 
                   href="#algo">
                      Algorithms
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link active" 
                   aria-current="page" 
                   href="#bootstrap">
                      BootStrap
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link active" 
                   aria-current="page" 
                   href="#cpp">
                      CPP
                </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    <h1 class="ms-5 text-success">
        GeeksforGeeks
    </h1>
    <h4 class="ms-5">
        Bootstrap 5 Navbar Responsive behaviors Toggler
    </h4>
    <div class="container-fluid p-5 pt-2"  
        data-spy="scroll" data-target="#scrollspy" 
        data-offset="50">
        <div class="">
            <div id="dataStructs">    
                <h2>Data Structures</h2>
                <p>
                     A data structure is a group of data elements 
                     that provides the easiest way to store and 
                     perform different actions on the data of the computer.
                     A data structure is a particular way of organizing 
                     data in a computer so that it can be used effectively.
                     The idea is to reduce the space and time complexities
                     of different tasks. The choice of a good data structure 
                     makes it possible to perform a variety of critical
                     operations effectively. An efficient data structure
                     also uses minimum memory space and execution time 
                     to process the structure.
              </p>     
            </div>
            <div id="algo"
                <h2>Algorithms</h2>
                <p>
                     The word Algorithm means ”
                     A set of finite rules or instructions to be followed 
                     in calculations or other problem-solving operations 
                     ” Or ” A procedure for solving a mathematical problem 
                     in a finite number of steps that frequently involves 
                     recursive operations”.It can be understood by taking
                     the example of cooking a new recipe. To cook a new recipe, 
                     one reads the instructions and steps and executes 
                     them one by one, in the given sequence. 
                     The result thus obtained is the new dish 
                     is cooked perfectly. Every time you use your phone, 
                     computer, laptop, or calculator you are using Algorithms. .
              </p>
            </div>        
            <div id="other"
                <h1>Others</h1>
            </div>        
            <div id="bootstrap">         
                <h2>Bootstrap</h2>
                <p>
                    Bootstrap is a free and open-source collection of CSS 
                    and JavaScript/jQuery code used for creating dynamic 
                    websites layout and web applications. Bootstrap 
                    is one of the most popular front-end frameworks 
                    which has really a nice set of predefined CSS codes. 
                    Bootstrap uses different types of classes to make
                    responsive websites. Bootstrap 5 was officially 
                    released on 16 June 2020 after several months of
                    redefining its features.Bootstrap is a framework 
                    that is suitable for mobile-friendly web development. 
                    it means the code and the template available on 
                    bootstrap are applicable to various screen sizes.
                    It is responsive for every screen size. 
              </p>
            </div>
            <div id="cpp">         
                <h2>C++</h2>
                <p>
                    C++ is a general-purpose programming language 
                    and is widely used nowadays for competitive programming.
                    It has imperative, object-oriented and generic 
                    programming features. C++ runs on lots of platforms 
                    like Windows, Linux, Unix, Mac etc.C++ is a general-purpose
                    programming language that was developed as an enhancement 
                    of the C language to include object-oriented paradigm. 
                    It is an imperative and a compiled language.
                    C++ is a middle-level language rendering it
                    the advantage of programming low-level (drivers, kernels) 
                    and even higher-level applications 
                      (games, GUI, desktop apps etc.)
                    . The basic syntax and code structure of both C 
                    and C++ are the same. 
              </p>
            </div>
        </div>
    </div>      
</body>
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/components/navbar/#toggler 



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads