Skip to content
Related Articles

Related Articles

How to make collapsible button appear only in mobile view using Bootstrap ?
  • Last Updated : 14 Dec, 2020
GeeksforGeeks - Summer Carnival Banner

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="#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:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :