Open In App
Related Articles

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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:



Last Updated : 11 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads