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.
Second Approach: The second approach demonstrates a layout where the navbar occupies only the leftover width of the body after the sidebar has occupied its required space. The body of the HTML page comprises a row that comprises of two columns. The first column col-2 is used to display the sidebar. The second column col-10 is used to display the navbar. The second column also consists of the main content of the web page right below the navbar. The navbar is collapsible ie. when the screen width reduces it collapses and can be viewed using the hamburger icon.
- How to create Responsive Bottom Navigation Bar using Bootstrap ?
- Bootstrap | Navigation Bar
- Bootstrap 4 | Navigation Bar
- How to change navigation bar color in Bootstrap ?
- How to Create Animated Navigation Bar with Hover Effect using HTML and CSS ?
- How to make whole area of a list item in navigation bar is clickable using CSS ?
- How to create Vertical Navigation Bar using HTML and CSS ?
- How to align a logo image to center of navigation bar using HTML and CSS ?
- How to force tab-navigation to stay in place using Bootstrap ?
- How to place content under fixed flexbox navigation bar ?
- New Google Site Navigation Bar
- How to do box shadow with progress bar style using bootstrap?
- Include Bootstrap in AngularJS using ng-bootstrap
- Difference between self::$bar and static::$bar in PHP
- How to use complex HTML with twitter Bootstrap tooltip using jQuery ?
- Bootstrap (Part-6) | Progress Bar and Jumbotron
- How to Align navbar logo to the left screen using Bootstrap ?
- How to set div with left image and button at bottom using bootstrap?
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.