Top navbar Bootstrap

Bootstrap is an open-source CSS framework used by frontend developers for making interactive web designs. The most recent version of Bootstrap is Bootstrap 5 alpha which has numerous added features. However, Bootstrap 5 is still under constant development phase and hence most of the web developers are still using Bootstrap 4. Bootstrap 4 also offers a wide range of components, utilities, and layouts. Navbars and sidebars are among the other components. While Bootstrap 4 has predefined navbar classes with a vast range of features, there is no dedicated predefined class for a sidebar. Hence sidebars are mainly customized division. There can be different layouts while using the top navbar with a left navigation bar. Both the layout is demonstrated in this article.

First Approach: The first approach deals with the layout having the sidebar right below the top navbar. The entire body is divided into two parts: the top navbar and the container below it. The container below the top navbar contains the sidebar division along with the division for the main content of the webpage. This container contains a row which in turn comprises two columns. The first column accommodates the sidebar and the second column holds the main content.