Is there a way to vertically center the bootstrap modal? I have been searching for a solution, but none seem to be responsive or effective. My website is using Bootstrap 3.
The modal does not adjust properly on smaller screens or when the browser window is resized after applying the solution below.
Including jQuery:
$('.modal').on('shown.bs.modal', function() {
$(this).find('.modal-dialog').css({
'margin-top': function () {
return -($(this).outerHeight() / 2);
},
'margin-left': function () {
return -($(this).outerWidth() / 2);
}
});
});
Applying CSS:
.modal-dialog {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
}
Using Bootstrap:
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog custom-class">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Any suggestions?
EDIT:
I attempted the following CSS:
@media screen and (min-width: 768px) {
.custom-class {
width: 800px; /* either % (e.g. 60%) or px (400px) */
top: 25%;
}
}
However, the modal defaults to its original position on smaller screens instead of being vertically centered as desired.
Additionally, top: 25%; does not fully center the modal vertically at all.