title: Bootstrap 3 modal responsive
body: <p>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</p>
  
  <p>I update my html code: ( its inside a django for loop )</p>
  
  <pre><code>    &lt;div class="modal fade " id="{{ p.id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" &gt;
        &lt;div class="modal-dialog modal-lg"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
              &lt;h4 class="modal-title" id="myModalLabel"&gt;Producto&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
              &lt;h5&gt;Nombre : {{ p.name}}&lt;/h5&gt;       
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cerrar&lt;/button&gt;
  
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I have these css settings:</p>
  
  <pre><code>.modal-lg {
    max-width: 900px;
  }
  @media (min-width: 768px) {
     .modal-lg {
      width: 100%;
    } 
  }
  @media (min-width: 992px) {
    .modal-lg {
      width: 900px;
    }
  }
  </code></pre>