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.
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:
Please Login to comment...