Bootstrap 3 modal responsive

css, html, twitter-bootstrap-3

Solution

I had the same issue I have resolved by adding a media query for @screen-xs-min in less version under Modals.less

@media (max-width: @screen-xs-min) {
  .modal-xs { width: @modal-sm; }
}

Problem

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; } } ```

Original source