Last Updated on January 3, 2025 by Roshan Parihar
Learn how to center align modal vertically in Bootstrap 5 and other versions. The short answer is to use the class .modal-dialog-centered to the div element. Let’s find out with the examples.
Center Modal Vertically in Bootstrap 5
To center align a modal vertically in Bootstrap 5, you have to add the class .modal-dialog-centered to the <div> element having class .modal-dialog.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ModalCenter"> Open modal center </button> <!-- Modal --> <div class="modal fade" id="ModalCenter" tabindex="-1" aria-labelledby="ModalCenterLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title fs-5">Notification</h4> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Are you sure you want to continue? </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">Understood</button> </div> </div> </div> </div> |
Output
When you click the above button, you will get the live preview when you can check the center aligned button in Bootstrap 5.
Make Modal Vertical Center in Bootstrap 4
Bootstrap 4 also provides the same class .modal-dialog-centered which you have to add the same <div> element having class .modal-dialog. This makes the modal align center vertically and horizontally.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalCenter"> Open modal center </button> <!-- Modal --> <div class="modal fade" id="ModalCenter" tabindex="-1" aria-labelledby="ModalCenterLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="ModalCenterLabel">Notification</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Understood</button> </div> </div> </div> </div> |
Output
You can click the button given above to see the live preview and check the centred modal alignment.
Vertical Alignment in Bootstrap 3
In higher versions of Bootstrap, you can easily make alignment centrally by adding a single class. However, in Bootstrap 3, there is not class available that you can use for center alignment. But, you can add some CSS given below for this.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<style> .modal { text-align: center; padding: 0!important; } .modal:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -4px; /* Adjusts for spacing */ } .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; } </style> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-target="#MymodalBack" data-toggle="modal">Open Modal</button> <!-- .modal --> <div class="modal fade" id="MymodalBack"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Notification</h4> </div> <div class="modal-body"> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> |
Output
If you want to check the alignment in Bootstrap 3, you can click the button given above.