title: Bootstrap: Align a label, radios and text box in a row
body: <p>Help!  I'm trying to align a bunch of rows in a bootstrap layout.  Each row will contain a left justified label, then 3 right justified radio buttons, and finally a right justified input box.  </p>
  
  <p>Here's what I've got so far the field are all there, but the layout is broken.  I want them all on one row, but it looks as if the label, radio buttons and input are all on separate rows. (see image attached)</p>
  
  <pre><code>![&lt;div class="row"&gt;
    &lt;div class="col-sm-12"&gt;
      &lt;div class="form-group"&gt;
       &lt;div&gt;
        &lt;label&gt;The Field Label&lt;/label&gt;
          &lt;div class="input-append"&gt;
            &lt;div class="btn-group pull-right" data-toggle="buttons"&gt;
              &lt;label class="btn btn-primary"&gt;
                &lt;input type="radio" qid="228" aid="130" value="0"&gt;Minimal
              &lt;/label&gt;
             &lt;label class="btn btn-primary"&gt;
                &lt;input type="radio" qid="228" aid="131" value="1"&gt;Moderate
             &lt;/label&gt;
             &lt;label class="btn btn-primary"&gt;
                &lt;input type="radio" qid="228" aid="132" value="2"&gt;Maximum
             &lt;/label&gt;
            &lt;input comment="1" optional="1" class="form-control input-small" type="number"              
                placeholder="# of People" qid="228" aid="117" value=""&gt;
           &lt;/div&gt;
         &lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;]
  </code></pre>
  
  <p><a href="http://i.stack.imgur.com/vbibD.png" rel="nofollow">Sample Image</a></p>