Open In App

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

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

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. 

HTML




<!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>


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. 

HTML




<!-- 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 -->
    <script src=
        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>


Output:

 



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