Bootstrap is the most popular responsive and open source CSS framework used by software developers. The sidebar is a widget that contains navigational links to other parts of the website. The sidebar is generally used to display a list of menu items. This article demonstrates two methods to create a sidebar of a webpage where the sidebar remains closed or hidden by default. The first method displays the sidebar on clicking the Menu button and later the sidebar can be closed by clicking the X icon on the top right corner. The second method demonstrates a toggling sidebar that remains hidden by default. Clicking the Menu button displays the sidebar and clicking the Menu button again hides the sidebar.
Method 1: The webpage contains a division with
By default, the sidebar in both the examples remains closed or hidden. It is only when the user clicks the button the sidebar displays. Collapsing sidebars are space-efficient and make the webpage look clean and spacious. Sidebars can be fixed and scrolling as per the user requirement. The article, however, demonstrates fixed sidebars.
- How to set Bootstrap 4 scroll to the bottom of long sticky sidebar?
- How to put two columns one below other in sidebar in Bootstrap ?
- How to Automatically Close Alerts using Twitter Bootstrap ?
- 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 replace dropdown-toggle icon with another default icon in Bootstrap ?
- Bootstrap | Close Icon for dismissing content with Examples
- How to open or close react-bootstrap modal pro-grammatically?
- How to change the position of modal close button in bootstrap?
- Bootstrap 5 | Close button
- 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 reset selected value to default using jQuery ?
- How to add default vertical scaling to a text canvas using Fabric.js ?
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.
Improved By : nidhi_biet