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

Last Updated : 11 Nov, 2022

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