Ask any question about Bootstrap here... and get an instant response.
Post this Question & Answer:
How can I create a collapsible sidebar using Bootstrap 5?
Asked on Feb 16, 2026
Answer
To create a collapsible sidebar using Bootstrap 5, you can utilize the `collapse` component. This allows you to toggle the visibility of the sidebar with a button.
<!-- BEGIN COPY / PASTE -->
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar" aria-expanded="false" aria-controls="sidebar">
Toggle Sidebar
</button>
<div class="collapse" id="sidebar">
<div class="card card-body">
<ul class="list-group">
<li class="list-group-item">Home</li>
<li class="list-group-item">Profile</li>
<li class="list-group-item">Messages</li>
</ul>
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- The button uses the `data-bs-toggle` and `data-bs-target` attributes to control the collapse behavior.
- The sidebar content is wrapped in a `collapse` div with a unique ID that matches the `data-bs-target` attribute.
- You can customize the sidebar content and style it further as needed.
- Ensure you have included Bootstrap's CSS and JS files in your project for this to work.
Recommended Links:
