We have answer of your question!

100% solved queries, no empty question

Question: Aligning form fields in Twitter Bootstrap


0

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.

Question author Androidnoobie | Source

Answer


1


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>
Answer author Khalid-t

Tickanswer.com is providing the only single recommended solution of the question Aligning form fields in Twitter Bootstrap under the categories i.e twitter-bootstrap , . Our team of experts filter the best solution for you.

Related Search Queries:


You may also add your answer

Thanks for contributing an answer to Tick Answer!