What's the best way to ensure a Bootstrap modal is fully responsive on different screen sizes?
Asked on Sep 29, 2025
Answer
To ensure a Bootstrap modal is fully responsive on different screen sizes, you should utilize Bootstrap's grid system and responsive classes within the modal's content. This will help the modal adapt to various screen sizes effectively.
<!-- BEGIN COPY / PASTE -->
<div class="modal fade" id="responsiveModal" tabindex="-1" aria-labelledby="responsiveModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="responsiveModalLabel">Responsive Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-6">
<p>This is a responsive column that adjusts based on screen size.</p>
</div>
<div class="col-12 col-md-6">
<p>Another responsive column for different content.</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- Use the `modal-dialog-centered` class to vertically center the modal on the screen.
- The `container-fluid` and `row` classes help structure the modal content using Bootstrap's grid system.
- The `col-12 col-md-6` classes ensure that columns stack on smaller screens and sit side-by-side on medium and larger screens.
- Always test the modal on different devices to ensure responsiveness.
Recommended Links:
← Back to All Questions