-1

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/

1
  • If you have 3 radios but only 2 inputs all in one line...to what order? <rad><txt><rad><txt><rad>? Or <txt><txt><rad><rad><rad>? Or something else?
    – zer00ne
    Apr 21, 2017 at 14:13

2 Answers 2

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

3
  • hmmm trying to do it without much custom css...seeing if i can just use the default bootstrap classes
    – jeremy
    Apr 21, 2017 at 14:03
  • @jeremy Check my answer. No extra classes. Just some HTML change. Apr 21, 2017 at 14:04
  • see this link, it shows you that it is advisable to use custom css because bootstrap is not just a one fit for everything
    – Sphinx
    Apr 21, 2017 at 14:08
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

prev

Removing the <br /> will give you this:

preview

4
  • 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, 2017 at 14:05
  • @jeremy I explicitly gave <br />. Other than that it will be in a single line. Apr 21, 2017 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, 2017 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, 2017 at 14:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.