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>

Try it »

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 –

Bootstrap Modal Vertical Align Center Example Middle Example


Advertisements

Add Comment

📖 Read More