Skip to content
Related Articles
Open in App
Not now

Related Articles

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

Improve Article
Save Article
Like Article
  • Last Updated : 11 Nov, 2022
Improve Article
Save Article
Like Article

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. 



<!DOCTYPE html>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible"
    <meta name="viewport" content=
    <!-- Bootstrap links -->
    <link rel="stylesheet" href=
    <script src=
    <script src=
    <nav id="header-nav"
        class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <!-- Button to extend the  menu -->
                <button type="button"
                    class="navbar-toggle collapsed"
                    <span class="sr-only">
                        Toggle navigation
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                <!--  Display content of
                    collapse button  -->
                <div class="collapse navbar-collapsed"
                    <ul id="nav-list" class="nav
                        navbar-nav navbar-right">
                        <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>


On Large Screen/Desktop/Laptop Screen:

On Small Screen/Mobile Screen:

My Personal Notes arrow_drop_up
Like Article
Save Article
Related Articles

Start Your Coding Journey Now!