Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.
<form>
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something…">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form>
Included with Bootstrap are three optional form layouts for common use cases.
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>
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>
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:
.form-horizontal to the form.control-group.control-label to the label.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>
Examples of standard form controls supported in an example form layout.
Most common form control, text-based input fields. 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.
<input type="text" placeholder="Text input">
Form control which supports multiple lines of text. Change rows attribute as necessary.
<textarea rows="3"></textarea>
Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.
<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" id="optionsRadios1" 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" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label>
Add the .inline class to a series of checkboxes or radios for controls appear on the same line.
<label class="checkbox inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label> <label class="checkbox inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 </label> <label class="checkbox inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 </label>
Use the default option or specify a multiple="multiple" to show multiple options at once.
<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>
Adding on top of existing browser controls, Bootstrap includes other useful form components.
Add text or buttons before or after any text-based input. Do note that select elements are not supported here.
Wrap an .add-on and an input with one of two classes to prepend or append text to an input.
<div class="input-prepend"> <span class="add-on">@</span> <input class="span2" id="prependedInput" type="text" placeholder="Username"> </div> <div class="input-append"> <input class="span2" id="appendedInput" type="text"> <span class="add-on">.00</span> </div>
Use both classes and two instances of .add-on to prepend and append an input.
<div class="input-prepend input-append"> <span class="add-on">$</span> <input class="span2" id="appendedPrependedInput" type="text"> <span class="add-on">.00</span> </div>
Instead of a <span> with text, use a .btn to attach a button (or two) to an input.
<div class="input-append"> <input class="span2" id="appendedInputButton" type="text"> <button class="btn" type="button">Go!</button> </div>
<div class="input-append"> <input class="span2" id="appendedInputButtons" type="text"> <button class="btn" type="button">Search</button> <button class="btn" type="button">Options</button> </div>
<div class="input-append">
<input class="span2" id="appendedDropdownButton" type="text">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
</div>
<div class="input-prepend">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<input class="span2" id="prependedDropdownButton" type="text">
</div>
<div class="input-prepend input-append">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<input class="span2" id="appendedPrependedDropdownButton" type="text">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
</div>
<form class="form-search">
<div class="input-append">
<input type="text" class="span2 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="span2 search-query">
</div>
</form>
Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.
Make any <input> or <textarea> element behave like a block level element.
<input class="input-block-level" type="text" placeholder=".input-block-level">
<input class="input-mini" type="text" placeholder=".input-mini"> <input class="input-small" type="text" placeholder=".input-small"> <input class="input-medium" type="text" placeholder=".input-medium"> <input class="input-large" type="text" placeholder=".input-large"> <input class="input-xlarge" type="text" placeholder=".input-xlarge"> <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
Heads up! In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input.
Use .span1 to .span12 for inputs that match the same sizes of the grid columns.
<input class="span1" type="text" placeholder=".span1"> <input class="span2" type="text" placeholder=".span2"> <input class="span3" type="text" placeholder=".span3"> <select class="span1"> ... </select> <select class="span2"> ... </select> <select class="span3"> ... </select>
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 the clears the float.
<div class="controls"> <input class="span5" type="text" placeholder=".span5"> </div> <div class="controls controls-row"> <input class="span4" type="text" placeholder=".span4"> <input class="span1" type="text" placeholder=".span1"> </div> ...
Present data in a form that's not editable without using actual form markup.
<span class="input-xlarge uneditable-input">Some value here</span>
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>
Inline and block level support for help text that appears around form controls.
<input type="text"><span class="help-inline">Inline help text</span>
<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>
Provide feedback to users or visitors with basic feedback states on form controls and labels.
We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.
<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
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>
Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.
<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>