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.
- How to set Bootstrap 4 scroll to the bottom of long sticky sidebar?
- How to close sidebar by default using Bootstrap ?
- How to fixed one column and scrollable other column or columns in Bootstrap ?
- How to put items underneath each other flex box in Bootstrap 4 ?
- How to create a Collapsed Sidebar?
- How to hide the bullets on list for the sidebar?
- Semantic-UI | Sidebar
- Google AMP amp-sidebar
- How to put images in a box without space using Bootstrap?
- How to place two bootstrap cards next to each other ?
- How to place two input box next to each other using Bootstrap 4 ?
- How to create five equal columns in Bootstrap ?
- How to use Bootstrap to align labels with content into 4 columns ?
- How to keep gap between columns using Bootstrap?
- Linear Equations in One Variable - Solving Equations which have Linear Expressions on one Side and Numbers on the other Side | Class 8 Maths
- Include Bootstrap in AngularJS using ng-bootstrap
- Difference between bootstrap.css and bootstrap-theme.css
- Difference Between Bootstrap 3 and Bootstrap 4
- Difference between Bootstrap 4 and Bootstrap 5
- How to drop one or multiple columns in Pandas Dataframe
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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.