Twitter Bootstrap Question posted in

Aligning form fields in Twitter Bootstrap

I’m having a difficult time figuring out how to align a few forms fields using Bootstrap, so that they display nicely on the page.

Here is a simple form as an example, with accompanying fiddle:

<div>
  <select size="5">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>
<div>
  <label class="checkbox-inline">
    <input type="checkbox" value=""> True/False
  </label>
</div>
<div>
  <label for="description" class="col-sm-4">Description</label>
  <input type="text" id="description" name="description">
</div>
<div>
  <label for="notes" class="col-sm-4">Notes</label>
  <textarea rows="4" cols="50" name="notes" id="notes">
  </textarea>
</div>

As you can see, the select field and the checkbox field are not in-line with the input and textarea fields.

How can I make everything line up nicely?

Thank you for any help.

Tags:

2

Answers


  1. 0

    Use Bootstrap forms. For example: .form-horizontal.

    <form class="form-horizontal">
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <select class="form-control" size="5">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> True/False
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <label for="description" class="col-sm-2 control-label">Description</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="description" name="description">
    </div>
  </div>
  <div class="form-group">
    <label for="notes" class="col-sm-2 control-label">Notes</label>
    <div class="col-sm-10">
      <textarea class="form-control" id="notes" name="notes" rows="4" cols="50"></textarea>
    </div>
  </div>
</form>
    Login or Signup to reply.
  2. 0

    Although Khalid’s answer is the correct approach, sometimes you might also get that problem with bootstrap’s forms. Simplest approach is to use < br > after label tag:

      <label for="notes" class="col-sm-4">Notes</label>
  <br>
  <textarea rows="4" cols="50" name="notes" id="notes">
  </textarea>

    It’s not the best – i should mention it again- if you want to be called a 2017 HTML programer. But maybe it’s not that serious.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search