Default form styles

Legend Block-level help text. 
<form>
  <fieldset>
	<legend>Legend</legend>
	<label>Label name</label>
	<input type="text" placeholder="Type something…">
	<span class="help-block">Block-level help text.</span>
	<label class="checkbox">
	  <input type="checkbox"> Checkbox
	</label>
	<button type="submit" class="btn">Submit</button>
  </fieldset>
</form>

Search form

Add .form-search to the form and .search-query to the < input> for an extra-rounded text input. 

<form class="form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">Search</button>
</form>

Inline form

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

<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
	<input type="checkbox"> Remember me
  </label>
  <button type="submit" class="btn">Sign in</button>
</form>

Horizontal form

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 
<form class="form-horizontal">
  <div class="control-group">
	<label class="control-label" for="inputEmail">Email</label>
	<div class="controls">
	  <input type="text" id="inputEmail" placeholder="Email">
	</div>
  </div>
  <div class="control-group">
	<label class="control-label" for="inputPassword">Password</label>
	<div class="controls">
	  <input type="password" id="inputPassword" placeholder="Password">
	</div>
  </div>
  <div class="control-group">
	<div class="controls">
	  <label class="checkbox">
		<input type="checkbox"> Remember me
	  </label>
	  <button type="submit" class="btn">Sign in</button>
	</div>
  </div>
</form>

Supported form controls 

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

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

<label class="checkbox">
  <input type="checkbox" value="">
  Option one is this and that—be sure to include why it's great
</label>

<label class="radio">
  <input type="radio" name="optionsRadios" value="option1" checked>
  Option one is this and that—be sure to include why it's great
</label>
<label class="radio">
  <input type="radio" name="optionsRadios" value="option2">
  Option two can be something else and selecting it will deselect option one
</label>

<label class="checkbox inline">
  <input type="checkbox" value="option1"> 1
</label>
<label class="checkbox inline">
  <input type="checkbox" value="option2"> 2
</label>
<label class="checkbox inline">
  <input type="checkbox" value="option3"> 3
</label>


<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Uneditable inputs

Present data in a form that's not editable without using actual form markup.

Some value here 
<span class="input-xlarge uneditable-input">Some value here</span>

Help text

Inline and block level support for help text that appears around form controls.

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

Block help

A longer block of help text that breaks onto a new line and may extend beyond one line.

A longer block of help text that breaks onto a new line and may extend beyond one line. 
<input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>

Invalid inputs

Style inputs via default browser functionality with :invalid. Specify a type and add the required attribute. 

<input class="span8" type="email" required>

Disabled inputs

Add the disabled attribute on an input to prevent user input and trigger a slightly different look. 

<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Validation states

Something may have gone wrong
Please correct the error
Username is taken
Woohoo! 
<div class="control-group warning">
  <label class="control-label" for="inputWarning">Input with warning</label>
  <div class="controls">
	<input type="text" id="inputWarning">
	<span class="help-inline">Something may have gone wrong</span>
  </div>
</div>
<div class="control-group error">
  <label class="control-label" for="inputError">Input with error</label>
  <div class="controls">
	<input type="text" id="inputError">
	<span class="help-inline">Please correct the error</span>
  </div>
</div>
<div class="control-group success">
  <label class="control-label" for="inputSuccess">Input with success</label>
  <div class="controls">
	<input type="text" id="inputSuccess">
	<span class="help-inline">Woohoo!</span>
  </div>
</div>

Extending form controls

@
.00
$ .00 
<div class="input-prepend">
  <span class="add-on">@</span>
  <input class="span8" type="text" placeholder="Username">
</div>

<div class="input-append">
  <input class="span8" type="text">
  <span class="add-on">.00</span>
</div>

<div class="input-prepend input-append">
  <span class="add-on">$</span>
  <input class="span8" type="text">
  <span class="add-on">.00</span>
</div>

<div class="input-append">
  <input class="span6" type="text">
  <button class="btn" type="button">Go!</button>
</div>

<div class="input-append">
  <input class="span6" type="text">
  <button class="btn" type="button">Search</button>
  <button class="btn" type="button">Options</button>
</div>

<div class="input-append">
  <input class="span6" type="text">
  <div class="btn-group">...</div>
</div>

<div class="input-prepend">
  <div class="btn-group">...</div>
  <input class="span6" type="text">
</div>

<div class="input-prepend input-append">
  <div class="btn-group">...</div>
  <input class="span6" type="text">
  <div class="btn-group">...</div>
</div>

<form>
  <div class="input-prepend">
	<div class="btn-group">...</div>
	<input type="text">
  </div>

  <div class="input-append">
	<input type="text">
	<div class="btn-group">...</div>
  </div>
</form>



<form class="form-search">
  <div class="input-append">
	<input type="text" class="span8 search-query">
	<button type="submit" class="btn">Search</button>
  </div>

  <div class="input-prepend">
	<button type="submit" class="btn">Search</button>
	<input type="text" class="span8 search-query">
  </div>
</form>

Control sizing

Form actions

End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls. 

<div class="form-actions">
  <button type="submit" class="btn btn-primary">Save changes</button>
  <button type="button" class="btn">Cancel</button>
</div>