how to align radio buttons to the input fields using bootstrap

Question

currently i have 3 radio buttons that i am trying to place next to my 2 input fields using bootstrap. i want to place them in the same row as my input fields, however it keeps getting aligned with the labels of those input fields.

Anyone have an idea on how i can bump down the alignment?

my html:

<div class="container">
      <div class="row">
        <div class="form-group col-xs-5">
          <label for="costDescription">Description</label>
          <input class="form-control input-group-lg" type="text" name="costDescription" ng-model="attendees.formData.scenarios[0].scenarioItems[0].costDescription"/>
      </div>
      <div class="form-group col-xs-2">
        <label for="cost">Amount</label>
        <input class="form-control input-group-lg" type="number" name="cost" ng-model="attendees.formData.scenarios[0].scenarioItems[0].cost"/>
      </div>

        <label class="radio-inline"><input type="radio" name="optradio">Option 1 </label>
        <label class="radio-inline"><input type="radio" name="optradio">Option 2 </label>
        <label class="radio-inline"><input type="radio" name="optradio">Option 3 </label>
      </div>

here is my plunkr: https://embed.plnkr.co/YIFin0fUchhSyZHiWUO6/

If you have 3 radios but only 2 inputs all in one line...to what order? ``? Or ``? Or something else? — zer00ne, Apr 21 '17 at 14:13

score 0 · Answer 1 · answered Apr 21 '17 at 14:01

0

Why not change the code where the radio buttons are as follows:

<div class="form-group col-xs-5" style="margin-top:40px">
    <label class="radio-inline"><input type="radio" name="optradio">Option 1 </label>
    <label class="radio-inline"><input type="radio" name="optradio">Option 2 </label>
    <label class="radio-inline"><input type="radio" name="optradio">Option 3 </label>
</div>

Add it to a column and then add a margin-top css style to it

answered Apr 21 '17 at 14:01

Sphinx

956
7
21

hmmm trying to do it without much custom css...seeing if i can just use the default bootstrap classes – jeremy Apr 21 '17 at 14:03
@jeremy Check my answer. No extra classes. Just some HTML change. – Praveen Kumar Purushothaman Apr 21 '17 at 14:04
[see this link](http://stackoverflow.com/questions/10085723/twitter-bootstrap-add-top-space-between-rows), it shows you that it is advisable to use custom css because bootstrap is not just a one fit for everything – Sphinx Apr 21 '17 at 14:08

Praveen Kumar Purushothaman · Answer 2 · 2017-04-21T14:07:18.703

0

No extra classes. Just some HTML change. Use another column for the radio buttons:

<div class="container">
  <div class="row">
    <div class="col-sm-5">
      <label for="costDescription">Description</label>
      <input class="form-control input-group-lg" type="text" name="costDescription" ng-model="attendees.formData.scenarios[0].scenarioItems[0].costDescription"/>
      Hello
    </div>
    <div class="col-sm-2">
      <label for="cost">Amount</label>
      <input class="form-control input-group-lg" type="number" name="cost" ng-model="attendees.formData.scenarios[0].scenarioItems[0].cost"/>
    </div>
    <div class="col-sm-5">
      <label class="radio-inline"><input type="radio" name="optradio"> Option 1 </label><br />
      <label class="radio-inline"><input type="radio" name="optradio"> Option 2 </label><br />
      <label class="radio-inline"><input type="radio" name="optradio"> Option 3 </label>
    </div>
  </div>
</div>

Preview

Removing the <br /> will give you this:

edited Apr 21 '17 at 14:07

answered Apr 21 '17 at 14:04

Praveen Kumar Purushothaman

164,888
24
203
252

hmmm im using radio-inline bc i want the radio buttons to be side by side...i think this one stacks them – jeremy Apr 21 '17 at 14:05
@jeremy I explicitly gave `
`. Other than that it will be in a single line. – Praveen Kumar Purushothaman Apr 21 '17 at 14:06
@jeremy just remove the style from mine and you got it. only problem is that it will show inline with the headings – Sphinx Apr 21 '17 at 14:06
yea but the whole point was that i wanted to align my radio buttons with the input fields not the labels – jeremy Apr 21 '17 at 14:17

how to align radio buttons to the input fields using bootstrap

2 Answers2