inline rows within Bootstrap form

Question

I'm trying to build a horizontal form with Bootstrap which has a row of elements on the right hand side of the form like this:

enter image description here

I am having difficulty getting the checkbox, label and input element to sit on a row nicely like that. This is my current attempt. I've added 'checkbox-inline' which gets things on a line, but I can't get the label to move to the middle of the line. Also, the checkboxes are much larger for some reason. Can anyone offer any hints?

The code from the Codepen link:

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label" for="input_staff">Staff Member and Percent Share *</label>
    <div class="col-sm-5">

      <label class="checkbox-inline col-sm-3">
        <input class="form-control" type="checkbox" name="input_staff[]" value="39">BH
      </label>
      <div class="input-group col-sm-3">
        <input class="form-control" type="number" id="input_staff_percent_39" min="0" max="100" value="0" disabled="">
        <span class="input-group-addon">%</span>
      </div>

      <label class="checkbox-inline col-sm-3" for="">
        <input class="form-control" type="checkbox" name="input_staff[]" value="11">CC
      </label>
      <div class="input-group col-sm-3">
        <input class="form-control" type="number" id="input_staff_percent_11" min="0" max="100" value="0" disabled="">
        <span class="input-group-addon">%</span>
      </div>

    </div>
  </div>
</form>

aley · Accepted Answer · 2015-02-24 15:15:20Z

1

here is a small example for your checkboxes

one of your mistakes: Don't use col with other elements, like labels. Preferably you use a div for cols, just use it for cols.

<div class="container">
    <form class="form-horizontal">
        <div class="form-group">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Check me out
                </label>
            </div>
        </div>
        <div class="form-group">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Check me out
                </label>
            </div>
        </div>
    </form>
</div>

edited Feb 24, 2015 at 15:15

answered Feb 24, 2015 at 14:30

aley

5,9697 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CalumMcCall Over a year ago

Thanks, this has helped get the text in the right position!

Community · Accepted Answer · 2017-05-23 12:12:51Z

I finally got it working by using the 'form-inline' class for each row. This answer made me go back and look at form-inline again.

Here is my sample code:

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label" for="input_staff">Staff Member and Percent Share *</label>
    <div class="col-sm-10">

      <div class="form-inline">
        <div class="form-group">
          <div class="checkbox">
            <label>
              <input type="checkbox" name="input_staff[]" value="39">BH
            </label>
          </div>
          <div class="input-group col-sm-9">
            <input class="form-control" type="number" id="input_staff_percent_39" min="0" max="100" value="0" disabled="">
            <span class="input-group-addon">%</span>
          </div>
        </div>
      </div>

      <div class="form-inline">
        <div class="form-group">                       
          <div class="checkbox">
            <label>
                  <input type="checkbox" name="input_staff[]" value="11">CC
              </label>
            </div>
            <div class="input-group col-sm-9">
                <input class="form-control" type="number" id="input_staff_percent_11" min="0" max="100" value="0" disabled="">
                <span class="input-group-addon">%</span>
            </div>
        </div>
      </div>
    </div>
  </div>
</form>

Here is a codepen with the code above showing what it looks like.

Collectives™ on Stack Overflow

inline rows within Bootstrap form

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related