How to set twitter bootstrap modal wider and higher?

Question

How to set twitter bootstrap modal wider and higher?

Example here (please click: Launch demo modal):

http://twitter.github.com/bootstrap/javascript.html#modals

Answer 1

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>