Forms

Default styles

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.

Legend Example block-level help text here.
<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>

Optional layouts

Included with Bootstrap are three optional form layouts for common use cases.

  • 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

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.

    <input type="text" placeholder="Text input">
  • Textarea
  • Form control which supports multiple lines of text. Change rows attribute as necessary.

    <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>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>

Extending form controls

Adding on top of existing browser controls, Bootstrap includes other useful form components.

Prepended and appended inputs

Add text or buttons before or after any text-based input. Do note that select elements are not supported here.

  • Default options
  • Wrap an .add-on and an input with one of two classes to prepend or append text to an input.

    @

    .00
    <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>
  • Combined
  • Use both classes and two instances of .add-on to prepend and append an input.

    $ .00
    <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>
  • 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"
      		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>
  • Button dropdowns
  • <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>
  • Segmented dropdown groups
  • <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>
    
  • Search form
  • <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>
    

Control sizing

Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

  • Block level inputs
  • Make any <input> or <textarea> element behave like a block level element.

    <input class="input-block-level" type="text" placeholder=".input-block-level">
  • Relative sizing
  • <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.


  • Grid sizing
  • 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 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>
    ...

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>

Form actions

End a form with a group of actions (buttons). When placed within a .form-actions, 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>

Help text

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

  • Inline help
  • 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.
    <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>

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...">
  • Invalid inputs
  • Style inputs via default browser functionality with :invalid. Specify a type, add the required attribute if the field is not optional, and (if applicable) specify a pattern.

    This is not available in versions of Internet Explorer 7-9 due to lack of support for CSS pseudo selectors.

    <input class="span3" 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
  • Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.

    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 info">
      <label class="control-label" for="inputInfo">Input with info</label>
      <div class="controls">
        <input type="text" id="inputInfo">
        <span class="help-inline">Username is already taken</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>