How to put two columns one below other in sidebar in Bootstrap ?

Developed by Mark Otto and Jacob Thornton, Bootstrap is a free and open-source responsive CSS framework used for front-end web development. Though Bootstrap 5 Alpha is the most recent version of Bootstrap launched on 16th June 2020, it is still in the development phase and hence most of the developers are continuing to use Bootstrap 4. Bootstrap is a CSS framework that focuses on simplifying the development of web pages. It is primarily used to create an interactive interface for the users. Bootstrap is bundled with a number of layouts, components, and utilities. The column is a part of the grid layout in Bootstrap. The grid system in Bootstrap 4 is dynamic and fluid. The grid layout has 12 columns and since the grid system is built on flexbox it is fully responsive. A sidebar is another component of Bootstrap. Sidebars enable side navigation. Sidebars can be either left-sided or right-sided based on the requirement. In this article, we will demonstrate the left-sided sidebars along with the columns one below the other.

First Approach: In the first approach, we will demonstrate a sidebar that is always open and fixed to the left side of the page. The code contains nested rows and columns to get the desired output.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
        integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
        crossorigin="anonymous">
</head>
  
<body>
    <!-- Main container holds the 
        entire content -->
    <div class=container>
        <!-- Row -->
        <div class="row">
            <!-- This div takes 3 out of
                 12 columns in the grid -->
            <div class="col-3" style="background-color: #DEFFFB">
                <!--This row contains the col which
                shows the column heading-->
                <div class="row">
                    <!-- this div takes 12 out of
                      12 columns in the grid -->
                    <div class="col" style="text-align: center;
                            font-weight: bold;
                            font-size: 25px; 
                            color: green">Menu
                    </div>
                </div>
                <!-- This row contains the menu items-->
                <div class="row">
                    <div class="col" style="text-align: center;
                            padding: 15px;">
                        <a href="#">Link 1</a><br> <br>
                        <a href="#">Link 2</a><br><br>
                        <a href="#">Link 3</a>
                    </div>
                </div>
  
            </div>
            <!--This column takes 9 out of 12 
            columns available-->
            <div class="col-9">
                <div class="row" style="height: 50px">
                    <div class="col" style="text-align: center;
                            background-color: green;
                            font-weight: bold;
                            font-size: 25px; 
                            color: white">Page Content
                    </div>
                </div>
                <!--This row contains the first column-->
                <div class="row">
                    <div class="col" style="background-color: lightgreen;">
                        Bootstrap is a free and open-source
                        tool collection for creating responsive
                        websites and web applications.
                        It is the most popular HTML, CSS,
                        and JavaScript framework for developing
                        responsive, mobile-first web sites.
                    </div>
                </div>
                <!--This row contains the second column-->
                <div class="row">
                    <div class="col" style="background-color: #E6FFE3 ;">
                        Bootstrap is a free and open-source tool
                        collection for creating responsive websites
                        and web applications. It is the most popular
                        HTML, CSS, and JavaScript framework for
                        developing responsive, mobile-first web sites.
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>            

chevron_right


Output

Second approach: In this method, the sidebar does not remain open always. The sidebar is collapsible and the page content moves to the right when the sidebar is opened. This design lets the main content take up the entire space on the webpage and the navigation panel is opened only when needed. This marks efficient space management. In this method, the sidebar is hidden when the page loads. When the user clicks the hamburger button the side_open() javascript function is triggered and the sidebar opens. The sidebar is visible now and has a button to close it. When the close button is clicked the side_close() javascript function is triggered and the sidebar closes. In the open state, the sidebar takes up 25% of the page width whereas in the closed state it occupies 0% of the page width. Hence the two columns adjust themselves accordingly.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- Write HTML code here -->
<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
        integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
        crossorigin="anonymous" />
  
    <!-- JS, Popper.js, jquery and 
        jQuery autocomplete -->
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <!--Main container that contains the 
            main content-->
    <div class="container">
        <!--Main row -->
        <div class="row">
            <!--Display is set to none so that it 
                    remains hidden when page loads-->
            <div class="col-3" id="mySidebar"
                style="display: none; 
                    background-color: #fbdeff;" >
  
                <!--Button is used to close the sidebar-->
                <button onclick="side_close()">
                    Close ×
                </button>
  
                <!--Menu items-->
                <h1>Menu</h1>
                <a href="#">Link 1</a><br />
                <br />
                <a href="#">Link 2</a><br />
                <br />
                <a href="#">Link 3</a>
            </div>
  
            <!-- Main page content -->
            <div class="col-9" id="main">
  
                <!-- Button used to open the sidebar -->
                <button id="openNav" onclick="side_open()">☰</button>
                <div class="row" style="background-color: #c2ff95;">
                    <div class="col">
                        <h1>Page Content</h1>
                    </div>
                </div>
                <div class="row" style="background-color: #deffe2;">
                    <div class="col">
                        Bootstrap is a free and open-source
                        tool collection for creating
                        responsive websites and web
                        applications. It is the most
                        popular HTML, CSS, and JavaScript
                        framework for developing responsive,
                        mobile-first web
                        sites.
                    </div>
                </div>
                <div class="row" style="background-color: #b8b7f9;">
                    <div class="col">
                        Bootstrap is a free and open-source
                        tool collection for creating
                        responsive websites and web
                        applications. It is the most
                        popular HTML, CSS, and JavaScript
                        framework for developing responsive,
                        mobile-first web
                        sites.
                    </div>
                </div>
            </div>
        </div>
    </div>
  
    <!-- JavaScript functions to control the sidebar-->
  
    <script>
        // JavaScript functions to open the sidebar
        function side_open() {
  
            /* Sidebar takes 25% of the total width
            of main container in open state */
            document.getElementById(
                "mySidebar").style.width = "25%";
            document.getElementById(
                "mySidebar").style.display = "block";
            document.getElementById(
                "openNav").style.display = "none";
        }
  
        // JavaScript functions to close the sidebar
        function side_close() {
  
            // Sidebar takes 0% of the total width
            // of main container in open state
            document.getElementById(
                "main").style.marginLeft = "0%";
            // Visibility is hidden
            document.getElementById(
                "mySidebar").style.display = "none";
            document.getElementById(
                "openNav").style.display = "inline-block";
        }
    </script>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.