How to make collapsible button appear only in mobile view using Bootstrap ? - GeeksforGeeks

14 Dec, 2020
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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">    </script>          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">    </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="#collapsable-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="collapsable-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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bootstrap-Misc
HTML-Misc
Bootstrap
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to keep gap between columns using Bootstrap?
How to set input type date in dd-mm-yyyy format using HTML ?
Types of CSS (Cascading Style Sheet)
How to insert spaces/tabs in text using HTML/CSS?
HTML | <img> align Attribute
Top 10 Projects For Beginners To Practice HTML and CSS Skills