How to make collapsible button appear only in mobile view using Bootstrap ?
Collapsible button is used to hide or display the list of contents on clicking the button. On clicking collapsible button, it expands and displays list of contents to select, which then mapped to specific content. Bootstrap has different classes for creating collapsible elements.
Collapsible button in mobile view appears only in the mobile size screen and disappear on large screen size devices.
Example:
HTML
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width,initial-scale=1"> <!-- Bootstrap links --> <link rel="stylesheet" href= <script src= </script> <script src= </script></head><body> <nav id="header-nav" class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <span><b>GeeksforGeeks</b></span> <!-- Button to extend the menu --> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsible-nav" aria-expanded="false"> <span class="sr-only"> Toggle navigation </span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- Display content of collapse button --> <div class="collapse navbar-collapsed" id="collapsible-nav"> <ul id="nav-list" class="nav navbar-nav navbar-right"> <hr> <li><a href="#c">C</a></li> <li><a href="#b">C++</a></li> <li><a href="#s">Java</a></li> <li><a href="#s">Python</a></li> </ul> </div> </div> </div> </nav></body></html> |
Output:
On Large Screen/Desktop/Laptop Screen:
On Small Screen/Mobile Screen:
Please Login to comment...