How can I align a button group vertically and keep it responsive in Bootstrap 5?
Asked on Oct 07, 2025
Answer
In Bootstrap 5, you can align a button group vertically by using the `btn-group-vertical` class. This ensures that the buttons stack vertically while maintaining responsiveness.
<!-- BEGIN COPY / PASTE -->
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-primary">Button 1</button>
<button type="button" class="btn btn-primary">Button 2</button>
<button type="button" class="btn btn-primary">Button 3</button>
</div>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- The `btn-group-vertical` class stacks the buttons vertically.
- The `role="group"` and `aria-label` attributes improve accessibility.
- The buttons remain responsive and adapt to different screen sizes.
- You can customize the buttons using Bootstrap's utility classes.
Recommended Links:
← Back to All Questions