Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I vertically centralize a Bootstrap V4 modal with CSS? [duplicate]

How can I centralize a Bootstrap V4 modal with CSS?

like image 546
wonderful world Avatar asked Feb 23 '17 02:02

wonderful world


Video Answer


1 Answers

You can vertical center the modal by overriding the position of the .modal-dialog like this..

.modal.show .modal-dialog {
    -webkit-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
    top: 50%;
    margin: 0 auto;
}

http://www.codeply.com/go/14Ki1kyTgo

Update 2018

As of Bootstrap 4 Beta 3, there is a new modal-dialog-centered class that can be used instead of the custom method described above.

https://www.codeply.com/go/lpOtIFoN6E (Beta 3)

like image 168
Zim Avatar answered Nov 11 '22 13:11

Zim