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.