Bootstrap Modal Vertical Align Center
Bootstrap Modal Vertical Align Center- Sometimes We need the Bootstrap Modal Vertically center – middle aligned rather than the default alignment. There are many ways to do this here we will just add a class to override the default modal alignment. Here in this tutorial we are going to explain how you can make bootstrap default modal in vertically middle(center) of the screen. You can run demo online to see the output of the example.
Bootstrap Modal Vertical Align Center Example
Just add the below class on your page to align center the bootstrap popup modal window.
Bootstrap Modal Vertical Align Middle Example:
<style type='text/css'>
body.modal-open .modal {
display: flex !important;
height: 100%;
}
body.modal-open .modal .modal-dialog {
margin: auto;
}
</style>
|
If you run the above example it will produce output something like this –
Tip : Always try to add this type of css by adding your own classes because by overriding the core classes it may impact default behaviour of modal so never add this css in any global css. You can add this on the page where you need.
If you run the above example it will produce output something like this –
Advertisements
