Web Style Guide

Basic Form

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

Example block-level help text here.

<form role="form">
   			
  <div class="form-group">
    <label for="exampleInputEmail">Email Address</label>
    <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter Email">
  </div>
   
  <div class="form-group">
    <label for="exampleInputPassword">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
	<p class="help-block">Example block-level help text here.</p>
  </div>
   
  <div class="form-group">
    <label for="exampleInputFile">File Input</label>
    <input type="file" id="exampleInputFile">
  </div>
   
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
   
  <button type="submit" class="btn btn-default">Submit</button>
   
</form>

Inline Form

Add .form-inline to your <form> for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

Requires custom widths

Inputs, selects, and textareas are 100% wide by default. To use the inline form, you'll have to set a width on the form controls used within.

Always add labels

Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only class.

<form class="form-inline" role="form">
   			
  <div class="form-group">
    <label  class="sr-only" for="exampleInputEmail2">Email Address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
   
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    < type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
   
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
   
  <button type="submit" class="btn btn-default">Sign in</button>
   
</form>

Horizonal Form

Use predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.

<form class="form-horizontal" role="form">
   			
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
	  <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
	</div>
  </div>
   	
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
	  <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
	</div>
  </div>
   
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
	    <label>
	      <input type="checkbox"> Remember Me
		</label>
	  </div>
	</div>
  </div>
   
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
	  <button type="submit" class="btn btn-default">Sign in</button>
	</div>
  </div>
   
</form>

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

Type declaration required

Inputs will only be fully styled if their type is properly declared.

Input Type type="" Example
text
password
datetime
datetime-local
date
month
time
week
number
email
url
search
tel
color

Textarea

Form control which supports multiple lines of text. Change rows attribute as necessary.

<textarea class="form-control" 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)

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
	 Option one is this and that—be sure to include why it's great
  </label>
</div>
 
<div class="radio">
  <label>
    <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>
</div>
 
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
	Option two can be something else and selecting it will deselect option one
  </label>
</div>

Inline Checkboxes

Use .checkbox-inline or .radio-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 add multiple to show multiple options at once.


<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
 
<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Static Control

When you need to place plain text next to a form label within a horizontal form, use the .form-control-static class on a <p>.

email@example.com

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
	<div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
	</div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
	<div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
	</div>
  </div>
</form>

Form 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="form-control" 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="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Disabled Fieldsets

Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once.

Link functionality of <a> not impacted

This class will only change the appearance of <a class="btn btn-default"> buttons, not their functionality. Use custom JavaScript to disable links here.

Cross-browser compatibility

While this will apply these styles in all browsers, Internet Explorer 9 and below don't actually support the disabled attribute on a <fieldset>. Use custom JavaScript to disable the fieldset in these browsers.

<form class="form-horizontal" role="form">
  <fieldset disabled>
	<div class="form-group">
	  <label for="disabledTextInput">Disabled input</label>
	  <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
	</div>
	  <div class="form-group">
	    <label for="disabledSelect">Disabled select menu</label>
		<select id="disabledSelect" class="form-control">
	      <option>Disabled Select</option>
		</select>
	  </div>
	  <div class="checkbox">
	    <label>
		  <input type="checkbox"> Can't check this
		</label>
	  </div>
	  <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Validation States

Included are validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

<div class="form-group has-success">
  < class="control-label" for="inputSuccess">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess">
</div>
 
<div class="form-group has-warning">
  < class="control-label" for="inputWarning">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning">
</div>
 
<div class="form-group has-error">
  < class="control-label" for="inputError">Input with error</label>
  <input type="text" class="form-control" id="inputError">
</div>

Control Sizing

Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.

Height Sizing

Create larger or smaller form controls that match button sizes.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
 
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

Column Sizing

Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
   
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
   
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
   
</div>

Help Text

Block level help text for form controls.

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