Bootstrap 3 modal responsive

Question

I have a modal but it's not resizing on smaller screens ( tablets, etc ). Is there a way to make it responsive ? Couldn't find any information on bootstrap docs. Thanks

I update my html code: ( its inside a django for loop )

    <div class="modal fade " id="{{ p.id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >       <div class="modal-dialog modal-lg">         <div class="modal-content">           <div class="modal-header">             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>             <h4 class="modal-title" id="myModalLabel">Producto</h4>           </div>           <div class="modal-body">             <h5>Nombre : {{ p.name}}</h5>                  </div>           <div class="modal-footer">             <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>            </div>          </div>       </div>     </div> 

I have these css settings:

.modal-lg {   max-width: 900px; } @media (min-width: 768px) {    .modal-lg {     width: 100%;   }  } @media (min-width: 992px) {   .modal-lg {     width: 900px;   } } 

Answer 1

From the docs:

Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog: modal-lg and modal-sm (as of 3.1).

Also the modal dialogue will scale itself on small screens (as of 3.1.1).