Bootstrap modal line
<p>I'm trying to use a Bootstrap modal with a lot of inputs but I have an issue, my modal have <code>modal-body</code> inside that div I create my form, <code>col-md-12, inputs, labels, more inputs, etc</code> then I have <code>modal-footer</code> with buttons (close and submit), the problem here is that <code>modal-body</code> creates a line like a <code>&lt;hr&gt;</code> tag and <code>modal-footer</code> too, is supposed that my form controls be between that lines, here is a pic of my problem:</p>

<p><a href="https://i.stack.imgur.com/vutrP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vutrP.png" alt="Problem"></a></p>

<p>And here is the code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;



&lt;button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"&gt;
  Launch demo modal
&lt;/button&gt;

&lt;!-- Modal --&gt;
&lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
  &lt;div class="modal-dialog modal-lg" role="document"&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
        &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
        &lt;h4 class="modal-title" id="myModalLabel"&gt;Editar Alerta&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
        &lt;div class="col-md-12"&gt;
          &lt;div class="form-group col-md-3"&gt;                    
            &lt;label class="control-label"&gt;ID:&lt;/label&gt;
            &lt;input id="ID" name="ID" type="text" readonly="readonly" class="form-control" /&gt;                  
          &lt;/div&gt;                  
          &lt;div class="form-group col-md-3"&gt;
            &lt;label class="control-label"&gt;Revision:&lt;/label&gt;
            &lt;input id="revision" name="revision" type="text" class="form-control" /&gt;  
          &lt;/div&gt;
          &lt;div class="form-group col-md-6"&gt;
            &lt;label class="control-label"&gt;Proposito:&lt;/label&gt;
            &lt;select class="form-control required" id="purpose" name="purpose"&gt;&lt;/select&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
        &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><strong>NOTE:</strong> With window resized works fine, the problem happen with full width, like the width from codepen.io, to see this  <a href="http://codepen.io/anon/pen/jraPqb" rel="nofollow noreferrer">Check this code example</a> <a href="https://jsfiddle.net/1ctq8vs4/" rel="nofollow noreferrer">or this fiddle and resize window</a></p>