title: How to align inline radios / checkboxes and help-block elements in horizontal form with Twitter's Bootstrap 3
body: <p>Few days ago <a href="http://blog.getbootstrap.com/2013/07/27/bootstrap-3-rc1/" rel="noreferrer">Twitter Bootstrap 3 RC1 released</a> and i just started to play with it on a personal project. </p>
  
  <p>I have a horizontal form which includes some inline radio-checkbox groups but horizontal alignment of these elements are not equal:</p>
  
  <p><img src="https://i.stack.imgur.com/PXHVM.png" alt="enter image description here"></p>
  
  <p>Question 1: Why chrome doesn't displays help-block element on the same line with the label?</p>
  
  <p>Question 2: How to align inline radio group on the same line with label?</p>
  
  <p>Question 3: Is following markup valid? Are these problems related with the markup?</p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;form class="form-horizontal"&gt;
  
    &lt;div class="form-group"&gt;
      &lt;label class="col-lg-2 control-label"&gt;Weight&lt;/label&gt;
      &lt;div class="col-lg-1"&gt;
        &lt;input type="text" name="weight" class="form-control" value="20"&gt;
      &lt;/div&gt;
      &lt;div class="help-block"&gt; grams&lt;/div&gt;  
    &lt;/div&gt;
  
    &lt;div class="form-group"&gt;
      &lt;label class="col-lg-2 control-label"&gt;Full part name&lt;/label&gt;
      &lt;div class="col-lg-6"&gt;
        &lt;input type="text" name="name" class="form-control" placeholder="Don't use numeric characters.."&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group"&gt;
      &lt;label class="col-lg-2 control-label"&gt;Inline radios&lt;/label&gt;
      &lt;div class="col-lg-10"&gt;
        &lt;label class="radio-inline"&gt;
          &lt;input type="radio" name="radio"&gt; Hello
        &lt;/label&gt;
        &lt;label class="radio-inline"&gt;
          &lt;input type="radio" name="radio"&gt; Other
        &lt;/label&gt;
        &lt;label class="radio-inline"&gt;
          &lt;input type="radio" name="radio"&gt; Another
        &lt;/label&gt;
        &lt;label class="radio-inline"&gt;
          &lt;input type="radio" name="radio" checked="checked"&gt; Foobar
        &lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Also this markup on a small screen produces a "dropped help-block element". I think my markup is problematic but i have no idea what is wrong.</p>
  
  <p><img src="https://i.stack.imgur.com/eJZCt.png" alt="Small device"></p>