How to set twitter bootstrap modal wider and higher?
Example here (please click: Launch demo modal):
In Bootstrap 3.1.1 they added modal-lg
and modal-sm
classes. You control the modal
size using @media
queries like they do. This is a more global way of controlling the modal
size.
@media (min-width: 992px) {
.modal-lg {
width: 900px;
height: 900px; /* control height here */
}
}
Sample code:
<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>