title: Bootstrap Grid System not working as expected in modal
body: <p>I have a simple modal that I want to use to display content in. As shown below: </p>
  
  <pre><code>&lt;div id="tacModal" class="modal fade" role="dialog"&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"&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;title&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;div class="container col-md-12" &gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-2"&gt;
                              &lt;img src="path/to/image" &gt;
                          &lt;/div&gt;
                          &lt;div class="col-lg-10"&gt;
                              &amp;nbsp;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-12"&gt;
                              &amp;nbsp;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
  
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;    
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The problem I face is that the content is placed in the footer when the screen size reaches a certain threshold. </p>
  
  <p>On mobile and even tablet sized screens all the content is placed correctly in the modal-body. But on my desktop screen the content is placed inside the footer. </p>
  
  <p>Why is this, and how can I fix it?</p>