title: Bootstrap form label not appearing in correctlly
body: <p>I have a form-group with inline radio buttons. The issue is that on larger screens the next text input label is appearing right below it on the right side instead of on a new line on the left side.</p>
  
  <p><a href="https://i.stack.imgur.com/i5tl3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i5tl3.png" alt="enter image description here"></a></p>
  
  <p>I have tried adding line breaks but it didn't help</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;form role="form"&gt;
      &lt;div class="form-group"&gt;
        &lt;div class="col-xs-6"&gt;
          &lt;label for="phone"&gt;Phone Number:&lt;/label&gt;
          &lt;input type="text" class="form-control" id="phone" placeholder="Enter Phone Number"&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-6"&gt;
          &lt;label for="optionsRadios"&gt;Preferred Contact Method&lt;/label&gt;
          &lt;br /&gt;
          &lt;div class="radio-inline"&gt;
            &lt;input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked&gt;Email
          &lt;/div&gt;
          &lt;div class="radio-inline"&gt;
            &lt;input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"&gt;Phone
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;div class="form-group"&gt;
            &lt;div class="col-sm-12"&gt;
        &lt;label for="website"&gt;Another Text Input:&lt;/label&gt;
        &lt;input type="url" class="form-control" id="website" placeholder="Testing"&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;br/&gt;
      &lt;button type="submit"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong><a href="https://jsfiddle.net/ag9aqjrz/" rel="nofollow noreferrer">JSFiddle Demo</a></strong></p>