title: Bootstrap form-inline
body: <p>I am trying to implement a bootstrap form-inline layout on my popup window. My code is just like this one:</p>
  
  <pre><code>&lt;form class="form-inline" role="form"&gt;
    &lt;div class="form-group"&gt;
       &lt;label for="email"&gt;Email address:&lt;/label&gt;
       &lt;input type="email" class="form-control" id="email"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
       &lt;label for="pwd"&gt;Password:&lt;/label&gt;
       &lt;input type="password" class="form-control" id="pwd"&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Which looks like this:
  <a href="https://i.stack.imgur.com/R0NtU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R0NtU.png" alt="enter image description here"></a></p>
  
  <p>When I resize my popup horizontally The fields switch into a vertical form which is expected. What I really want is to have these textboxes first to go smaller, and then at a certain width if it's been reached drop into a column. Is that even possible?</p>
  
  <p>Thanks</p>