+
Password
+
+
-
-
Select list
-
-
- something
- 2
- 3
- 4
- 5
-
-
+
+
+
+
+
+ Sign in
-
-
Multicon-select
-
-
- 1
- 2
- 3
- 4
- 5
-
-
-
-
-
-
- Save changes
- Cancel
-
-
+
-
Example markup
-
Given the above example form layout, here's the markup associated with the first input and control group. The .control-group, .control-label, and .controls classes are all required for styling.
<form class="form-horizontal">
- <fieldset>
- <legend>Legend text</legend>
- <div class="control-group">
- <label class="control-label" for="input01">Text input</label>
- <div class="controls">
- <input type="text" class="input-xlarge" id="input01">
- <p class="help-block">Supporting help text</p>
- </div>
+ <div class="control-group">
+ <label class="control-label" for="">Email</label>
+ <div class="controls">
+ <input type="text" placeholder="Email">
</div>
- </fieldset>
+ </div>
+ <div class="control-group">
+ <label class="control-label" for="">Password</label>
+ <div class="controls">
+ <input type="password" 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>
-
-
Form control states
-
Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in its place for :focus.
-
-
Form validation
-
It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding .control-group.
+
+
+
+
Supported form controls
+
Examples of standard form controls supported in an example form layout.
+
+
Inputs
+
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.
+
-<fieldset
- class="control-group error">
- …
-</fieldset>
+<input type="text" placeholder="Text input">
-
+
+<textarea id="textarea" rows="3"></textarea>
+
+
+
Checkboxes and radios
+
Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.
+
Default (stacked)
+
+
+<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>
+
+
+
Inline checkboxes
+
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>
+
+
+
Selects
+
Use the default option or specify a multiple="multiple" to show multiple options at once.
+
+
+<select>
+ <option>something</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+</select>
+
+<select>
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+</select>
+
+
+
+
-
Extending form controls
-
Prepend & append inputs
-
Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.
-
-
Checkboxes and radios
-
Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.
-
Inline checkboxes and radios are also supported. Just add .inline to any .checkbox or .radio and you're done.
-
-
Inline forms and append/prepend
-
To use prepend or append inputs in an inline form, be sure to place the .add-on and input on the same line, without spaces.
-
-
Form help text
-
To add help text for your form inputs, include inline help text with <span class="help-inline"> or a help text block with <p class="help-block"> after the input element.
+
Adding on top of existing browser controls, Bootstrap includes other useful form components.
-
+
+<div class="input-prepend">
+ <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
+</div>
+<div class="input-append">
+ <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
+</div>
+
+
+
Combined
+
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" size="16" type="text"><span class="add-on">.00</span>
+</div>
+
+
+
Buttons instead of text
+
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" size="16" type="text"><button class="btn" type="button">Go!</button>
+</div>
+
+<div class="input-append">
+ <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
+</div>
+
+
+
Control sizing
+
Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.
+
+
Relative sizing
+
+
+<input class="input-mini" type="text">
+<input class="input-small" type="text">
+<input class="input-medium" type="text">
+<input class="input-large" type="text">
+<input class="input-xlarge" type="text">
+<input class="input-xxlarge" type="text">
+
+
+
Grid sizing
+
Use .span1 to .span12 for inputs that match the same sizes of the grid columns.
+
+
+<input class="span1" type="text">
+<input class="span2" type="text">
+<input class="span3" type="text">
+
+
+
Uneditable inputs
+
Present data in a form that's not editable without using actual form markup.
+
+
+ <span class="input-xlarge uneditable-input">Some value here</span>
+
+
+
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 class="btn">Cancel</button>
+</div>
+
+
+
Help text
+
Inline and block level support for help text that appears around form controls.
+
Inline help
+
+
+<span class="help-inline">Inline help text</span>
+
+
+
Block help
+
+
+<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
+
+
+
+
+
+
+
Form control states
+
Provide feedback to users or visitors with basic feedback states on form controls and labels.
+
+
Input focus
+
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...">
+
+
+
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
+
Bootstrap includes validation styles for error, warning, 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>
+
+
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 5910d66bac..24c5ae359a 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -641,48 +641,11 @@
{{_i}}Forms{{/i}}
{{_i}}Bootstrap provides simple markup and styles for four styles of common web forms. Each layout requires small changes to surrounding markup, but the controls themselves remain and behave the same.{{/i}}
{{_i}}Error, warning, and success states are included for form controls, as wel as disabled.{{/i}}
{{_i}}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.{{/i}}