How do I create a modal that is vertically centered and scrollable?

Asked on Jun 24, 2025

Answer

To create a vertically centered and scrollable modal in Bootstrap 5, you can utilize the modal-dialog-centered and modal-dialog-scrollable classes. Here's a simple example:

<!-- BEGIN COPY / PASTE -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <!-- Add your content here -->
                        <p>This is a vertically centered and scrollable modal.</p>
                    </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:

Ensure you have included Bootstrap 5 CSS and JS files in your project.
The modal-dialog-centered class centers the modal vertically.
The modal-dialog-scrollable class makes the modal content scrollable if it overflows.
Trigger the modal using data-bs-toggle="modal" and data-bs-target="#exampleModal" on a button or link.

✅ Answered with Bootstrap 5 best practices.