Forms

Elements

Input

Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Requires the use of a specified type at all times.

1<input type="text" placeholder="Text input">

Textarea

Change rows attribute as necessary.

1<textarea rows="3"></textarea>

Checkbox

Checkboxes will stack on top of each other.

1<label class="checkbox">
2  <input type="checkbox" value="">Option
3</label>
4<label class="checkbox">
5  <input type="checkbox" value="">Option
6</label>

Add the class .inline to enable inline flow.

1<label class="checkbox inline">
2  <input type="checkbox" value="option1"> Option
3</label>
4<label class="checkbox inline">
5  <input type="checkbox" value="option2"> Option
6</label>

Radio

Radio boxes works in the exact same way as checkboxes.

Select

Specify a multiple=”multiple” to show multiple options at once.

 1<select>
 2  <option>1</option>
 3  <option>2</option>
 4  <option>3</option>
 5  <option>4</option>
 6  <option>5</option>
 7</select>
 8 
 9<select multiple="multiple">
10  <option>1</option>
11  <option>2</option>
12  <option>3</option>
13  <option>4</option>
14  <option>5</option>
15</select>

Default Style

Without any added classes, forms will be styled in a classic, unobtrusive style.

Legend Example block-level help text here.
 1<form>
 2  <fieldset>
 3    <legend>Legend</legend>
 4    <label>Label name</label>
 5    <input type="text" placeholder="Type something…">
 6    <span class="help-block">Example block-level help text here.</span>
 7    <label class="checkbox">
 8      <input type="checkbox"> Check me out
 9    </label>
10    <button type="submit" class="btn">Submit</button>
11  </fieldset>
12</form>

Inline Style

Add .form-inline for left-aligned labels and inline-block controls for a compact layout.

1<form class="form-inline">
2  <input type="text" class="input-small" placeholder="Email">
3  <input type="password" class="input-small" placeholder="Password">
4  <label class="checkbox">
5    <input type="checkbox"> Remember me
6  </label>
7  <button type="submit" class="btn">Sign in</button>
8</form>

Horizontal Style

Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

  • Add .form-horizontal to the form
  • Wrap labels and controls in .control-group
  • Add .control-label to the label
  • Wrap any associated controls in .controls for proper alignment
 1<form class="form-horizontal">
 2  <div class="control-group">
 3    <label class="control-label" for="inputEmail">Email</label>
 4    <div class="controls">
 5      <input type="text" id="inputEmail" placeholder="Email">
 6    </div>
 7  </div>
 8  <div class="control-group">
 9    <label class="control-label" for="inputPassword">Password</label>
10    <div class="controls">
11      <input type="password" id="inputPassword" placeholder="Password">
12    </div>
13  </div>
14  <div class="control-group">
15    <div class="controls">
16      <label class="checkbox">
17        <input type="checkbox"> Remember me
18      </label>
19      <button type="submit" class="btn">Sign in</button>
20    </div>
21  </div>
22</form>

Grid Sizing

You can use .span1 to .span12 for inputs that match the same sizes of the grid columns.

1<input class="span1" type="text" placeholder=".span1">
2<input class="span2" type="text" placeholder=".span2">
3<input class="span3" type="text" placeholder=".span3">

For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and clears the float.

1<div class="controls">
2    <input class="span7" type="text" placeholder=".span7">
3</div>
4<div class="controls controls-row">
5  <input class="span4" type="text" placeholder=".span4">
6  <input class="span2" type="text" placeholder=".span2">
7  <input class="span1" type="text" placeholder=".span1">
8</div>

Relative Sizing

You can relatively size input fields by using the .input-[size] classes.

1<input class="input-mini" type="text" placeholder=".input-mini">
2<input class="input-small" type="text" placeholder=".input-small">
3<input class="input-medium" type="text" placeholder=".input-medium">
4<input class="input-large" type="text" placeholder=".input-large">
5<input class="input-xlarge" type="text" placeholder=".input-xlarge">
6<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">

Prepend & Append

Wrap an .add-on and an input with one of two classes to prepend or append text to an input. You can use both at the same time to show on both sides.

@
.00
$ .00
 1<div class="input-prepend">
 2    <span class="add-on">@</span>
 3    <input class="span2" type="text" placeholder="Username">
 4</div>
 5<div class="input-append">
 6  <input class="span2" type="text">
 7  <span class="add-on">.00</span>
 8</div>
 9<div class="input-prepend input-append">
10  <span class="add-on">$</span>
11  <input class="span2" type="text">
12  <span class="add-on">.00</span>
13</div>

You can also use buttons as prepend/append elements.

1<div class="example">
2    <div class="input-append">
3      <input class="span2" type="text">
4      <button class="btn" type="button">Go!</button>
5    </div>
6</div>

Even two buttons

1<div class="input-append">
2  <input class="span2" type="text">
3  <button class="btn" type="button">Search</button>
4  <button class="btn" type="button">Options</button>
5</div>

Help Text

You can create inline helper text.

Inline text
1<input type="text"><span class="help-inline">Inline text</span>

And you can create block helper text.

Long text with a link ...
1<input type="text"><span class="help-block">Long text <a href="#">with a link</a> ...</span>

Disable

Disable an input field by using the disabled attribute, or create something that looks like a form element, but isn’t by using the .uneditable-input class.

Disabled fake input
1<input class="input-xlarge" type="text" placeholder="Disabled input" disabled>
2<span class="input-xlarge uneditable-input">Disabled fake input</span>