Guide: Bootstrap Forms by Example

Quickly learn to code Bootstrap forms

This is a guide to writing Bootstrap 3 form syntax. It is designed to:

  • Introduce you to the general structure of the syntax
  • Note important exceptions to this layout
  • Illustrate common use cases with simple examples

The official docs are a great reference. This guide is an introduction to the fundamentals, with a focus on clarity, and lots of side-by-side examples.


Table of Contents

Alternative: Form Builder

We've built a drag-and-drop form builder that generates valid Bootstrap form HTML. Free to use, no sign up required.


Try our Bootstrap Form Builder

The Standard Layout

To use Bootstrap, you must structure your form a certain way and apply CSS classes to your form elements.

There are 3 important rules:

  1. Every field should be wrapped in a <div> with .form-group
  2. Every <label> should be given .control-label
  3. Every <input> should be given .form-control

Below is a stripped down example to illustrate the structure:


<form>
	<div class="form-group">
		<label class="control-label"></label>
		<input class="form-control">
	</div>
</form>

Simple Examples

Here are some simple examples that follow the standard layout.


This code...


<form>
	<div class="form-group"> <!-- Email field !-->
		<label for="email_id" class="control-label">Email</label>
		<input type="email" class="form-control" id="email_id" name="email_name" placeholder="[email protected]">
	</div>
	
	<div class="form-group"> <!-- Submit button !-->
		<button type="submit" class="btn btn-primary">Submit</button>
	</div>	
</form>

...creates this

This code...


<form>
	<div class="form-group"> <!-- Message input !-->
		<label class="control-label " for="message_id">Message</label>
		<textarea class="form-control" id="message_id" name="message" rows="5"></textarea>
	</div>
	
	<div class="form-group"> <!-- Submit button !-->
		<button class="btn btn-primary " name="submit" type="submit">Submit</button>
	</div>
</form>

...creates this

This code...


<form>
	<div class="form-group"> <!-- Message input !-->
		<label class="control-label " for="region_id">Message</label>
		<select class="form-control" id="region_id" name="region">
			<option value="North">North</option>
			<option value="West">West</option>
			<option value="East">East</option>
			<option value="South">South</option>
		</select>
	</div>
	<div class="form-group"> <!-- Submit button !-->
		<button class="btn btn-primary " name="submit" type="submit">Submit</button>
	</div>
</form>

...creates this

Details to note

  • Each <label> should contain a for value that matches the corresponding <input>'s id. This way, when the <label> is clicked, the cursor moves to the <input>.
  • Each text-based <input> must contain an appropriate HTML5 type (e.g. text, email, url, tel, number etc.)
  • By default, inputs are given a width of 100%. You can use the Bootstrap grid system to adjust the form's width.

Checkboxes and Radios

Checkboxes and radioshave a unique structure. This is because the <label> can play two different roles:

  1. It can describe an individual checkbox/radio
  2. It can describe a group of checkboxes/radios

Therefore, to create one or more radio or checkbox follow these steps (working from child to parent):

  1. Create a checkbox/radio <input> for each item in your list
  2. Wrap each <input> with its own <label> (no class is needed)
  3. Wrap each <label> in Step 2 with a <div> and give it the class .radio (or .checkbox)
  4. If you have a group of inputs: Prefix your code with a group <label> and give it the class .control-label
  5. Wrap everything with a <div> and give it the class .form-group

This code...


<form>

	<div class="form-group"> <!-- Radio group !-->
		<label class="control-label">What is your favorite food?</label>
		<div class="radio">
		  <label>
			<input type="radio" name="fav_foods" value="pizza">
			Pizza
		  </label>
		</div>
		<div class="radio">
		  <label>
			<input type="radio"  name="fav_foods" value="hamburger">
			Hamburgers
		  </label>
		</div>
	</div>		

	<div class="form-group"> <!-- Submit button !-->
		<button class="btn btn-primary " name="submit" type="submit">Submit</button>
	</div>
	
</form>

...creates this

This code...


<form>

	<div class="form-group">  <!-- Checkbox Group !-->
		<label class="control-label">What is your favorite food?</label>
		<div class="checkbox">
		  <label>
			<input type="checkbox" name="fav_foods" value="pizza">
			Pizza
		  </label>
		</div>
		<div class="checkbox">
		  <label>
			<input type="checkbox"  name="fav_foods" value="hamburger">
			Hamburgers
		  </label>
		</div>
	</div>	
	
	<div class="form-group"> <!-- Submit button !-->
		<button class="btn btn-primary " name="submit" type="submit">Submit</button>
	</div>
	
</form>

...creates this

This code...


<form>

	<div class="form-group">  <!-- Terms Checkbox !-->
		<div class="checkbox">
		  <label>
			<input type="checkbox" name="fav_foods" value="pizza">
			I agree to the terms of use.
		  </label>
		</div>
	</div>
	
	<div class="form-group"> <!-- Submit button !-->
		<button class="btn btn-primary " name="submit" type="submit">Submit</button>
	</div>
	
</form>

...creates this

Details to note

  • The <label>'s in this example do not require a for attribute. This is because:
    • The group <label> does not correspond to a single <input>
    • The individual <label> already wraps it's <input>(communicating ownership)
  • A individual radio is not presented. This is because radio buttons are made to be used for multiple choice questions (with only one answer).

Horizontal and Inline Forms

By default, label's are stacked on the line above inputs. There are two other options:

  1. Inline Form: Labels are aligned to the left of inputs. All fields are on the same line. To implement:
    • Add the class .form-horizontal to the <form>
  2. Horizontal Form: Labels are aligned to the left of inputs. Each field is on it's own line. To implement:
    1. Add the class .form-horizontal to the <form>
    2. Add a grid class (e.g..col-sm-2) to each <label> specifying its width
    3. Wrap all other elements with a <div> and give each a grid class (e.g. .col-sm-10)

This code...


<form class="form-inline">

	<div class="form-group"> 
		<label for="email_id" class="control-label">Email</label>
		<input type="email" class="form-control" id="email_id" name="email_name" placeholder="[email protected]">
	</div>
	
	<div class="form-group"> 
		<button type="submit" class="btn btn-primary">Submit</button>
	</div>		
	
</form>

...creates this

This code...


<form class="form-horizontal">

	<div class="form-group">
		<label for="email_id" class="control-label col-sm-2">Email</label>
		<div class="col-sm-10"> <!-- This is a new div -->	
			<input type="email" class="form-control" id="email_id" name="email_name" placeholder="[email protected]">
		</div>	
	</div>
	
	<div class="form-group"> 
		<div class="col-sm-10 col-sm-offset-2"> <!--New div, offset because there is no label -->						
			<button type="submit" class="btn btn-primary">Submit</button>
		</div>
	</div>		
	
</form>

...creates this

This code...


<form>

	<div class="form-group"> <!-- Email field !-->
		<label for="email_id" class="control-label">Email</label>
		<input type="email" class="form-control" id="email_id" name="email_name" placeholder="[email protected]">
	</div>
	
	<div class="form-group"> <!-- Submit button !-->
		<button type="submit" class="btn btn-primary">Submit</button>
	</div>	
	
</form>

...creates this

Details to note

  • Horizontal Forms Only
    Elements without a corresponding <label> (the <button> in this case), need an offset-grid class (e.g. .col-sm-offset-2) so that spacing is consistent.

Field Validation

If a field is invalid, you can clearly communicate this to your user by making the entire field (border and text) red. To do this:

  1. Add the class .has-error to the .form-group div
  2. Optional: Create a <p> with the class .help-text to explain the problem

This code...


<form>
 
	<div class="form-group has-error"> <!-- Email field !-->
		<label for="email_id" class="control-label">Email</label>
		<input type="email" class="form-control" id="email_id" name="email_name" value="support2formden.com" aria-describedby="email_help">
		<p id="email_help" class="help-block">You must include a valid email address.</p>								
	</div>
	 
	<div class="form-group"> <!-- Submit button !-->
		<button type="submit" class="btn btn-primary">Submit</button>
	</div>    
	 
</form>

...creates this

You must include a valid email address.

This code...


<form>

	<div class="form-group"> <!-- Email field !-->
		<label for="email_id" class="control-label">Email</label>
		<input type="email" class="form-control" id="email_id" name="email_name" placeholder="[email protected]">
	</div>
	
	<div class="form-group"> <!-- Submit button !-->
		<button type="submit" class="btn btn-primary">Submit</button>
	</div>	
	
</form>

...creates this

Details to note

  • To assist screen readers, you should add aria-describedby to the input with a value that corresponds to the .help-block element's id
  • Other validation classes are available including .has-warning (orange) and .has-success (green). Learn more.

Common Examples

Here are some common examples to get you started. In these example, because the code is so long, the example is shown first.


This form..

Comes from this code:

			
<form>

	<div class="form-group"> <!-- Name field -->
		<label class="control-label " for="name">Name</label>
		<input class="form-control" id="name" name="name" type="text"/>
	</div>
	
	<div class="form-group"> <!-- Email field -->
		<label class="control-label requiredField" for="email">Email<span class="asteriskField">*</span></label>
		<input class="form-control" id="email" name="email" type="text"/>
	</div>
	
	<div class="form-group"> <!-- Subject field -->
		<label class="control-label " for="subject">Subject</label>
		<input class="form-control" id="subject" name="subject" type="text"/>
	</div>
	
	<div class="form-group"> <!-- Message field -->
		<label class="control-label " for="message">Message</label>
		<textarea class="form-control" cols="40" id="message" name="message" rows="10"></textarea>
	</div>
	
	<div class="form-group">
		<button class="btn btn-primary " name="submit" type="submit">Submit</button>
	</div>
	
</form>

This form..

Comes from this code:

	
<form class="form-inline">
	
	<div class="form-group"> <!-- Username field -->
		<input class="form-control" id="username_id" name="user_name" type="text" placeholder="Username"/>
	</div>
	
	<div class="form-group"> <!-- Password field -->
		<input class="form-control" id="password_id" name="user_password" type="password" placeholder="Password"/>
	</div>
	
	<div class="form-group"> <!-- Login button -->
		<button class="btn btn-primary " name="submit" type="submit">Login</button>
	</div>	
	
	<div class="form-group"> <!-- Remember Field -->
		<div class="checkbox">
			<label class="checkbox">
				<input name="remember" type="checkbox" value="yes"/>
				Remember
			</label>
		</div>
	</div>
	
</form>

This form...

We value your privacy and will never sell your email address.

Comes from this code:

				
<form class="form-horizontal">

	<div class="form-group"> <!-- Full Name -->
		<label for="full_name_id" class="control-label col-sm-2">Full Name</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="full_name_id" name="full_name" placeholder="John Deer">
		</div>  
	</div>

	<div class="form-group"> <!-- Email -->
		<label for="email_id" class="control-label col-sm-2">Email</label>
		<div class="col-sm-10">
			<input type="email" class="form-control" id="email_id" name="email_name" placeholder="[email protected]">
			<p class="help-text">We value your privacy and will never sell your email address.</p>
		</div>  
	</div>
	
	<div class="form-group"> <!-- Frequency Field -->
		<label class="control-label col-sm-2">Email Me</label>
		<div class="col-sm-10">
			<div class="radio">
				<label class="radio">
					<input name="email_frequency" type="radio" value="day"/>
					Daily
				</label>
			</div>
			<div class="radio">
				<label class="radio">
					<input name="email_frequency" type="radio" value="week"/>
					Weekly
				</label>
			</div>	
			<div class="radio">
				<label class="radio">
					<input name="email_frequency" type="radio" value="month"/>
					Monthly
				</label>
			</div>											
		</div>
	</div>							
	 
	<div class="form-group"> <!-- Submit Button -->
		<div class="col-sm-10 col-sm-offset-2">                     
			<button type="submit" class="btn btn-primary">Get Updates!</button>
		</div>
	</div>        
	 
</form>

This form...

Comes from this code:

				
<form>

	<div class="form-group"> <!-- Full Name -->
		<label for="full_name_id" class="control-label">Full Name</label>
		<input type="text" class="form-control" id="full_name_id" name="full_name" placeholder="John Deer">
	</div>	

	<div class="form-group"> <!-- Street 1 -->
		<label for="street1_id" class="control-label">Street Address 1</label>
		<input type="text" class="form-control" id="street1_id" name="street1" placeholder="Street address, P.O. box, company name, c/o">
	</div>					
							
	<div class="form-group"> <!-- Street 2 -->
		<label for="street2_id" class="control-label">Street Address 2</label>
		<input type="text" class="form-control" id="street2_id" name="street2" placeholder="Apartment, suite, unit, building, floor, etc.">
	</div>	

	<div class="form-group"> <!-- City-->
		<label for="city_id" class="control-label">City</label>
		<input type="text" class="form-control" id="city_id" name="city" placeholder="Smallville">
	</div>									
							
	<div class="form-group"> <!-- State Button -->
		<label for="state_id" class="control-label">State</label>
		<select class="form-control" id="state_id">
			<option value="AL">Alabama</option>
			<option value="AK">Alaska</option>
			<option value="AZ">Arizona</option>
			<option value="AR">Arkansas</option>
			<option value="CA">California</option>
			<option value="CO">Colorado</option>
			<option value="CT">Connecticut</option>
			<option value="DE">Delaware</option>
			<option value="DC">District Of Columbia</option>
			<option value="FL">Florida</option>
			<option value="GA">Georgia</option>
			<option value="HI">Hawaii</option>
			<option value="ID">Idaho</option>
			<option value="IL">Illinois</option>
			<option value="IN">Indiana</option>
			<option value="IA">Iowa</option>
			<option value="KS">Kansas</option>
			<option value="KY">Kentucky</option>
			<option value="LA">Louisiana</option>
			<option value="ME">Maine</option>
			<option value="MD">Maryland</option>
			<option value="MA">Massachusetts</option>
			<option value="MI">Michigan</option>
			<option value="MN">Minnesota</option>
			<option value="MS">Mississippi</option>
			<option value="MO">Missouri</option>
			<option value="MT">Montana</option>
			<option value="NE">Nebraska</option>
			<option value="NV">Nevada</option>
			<option value="NH">New Hampshire</option>
			<option value="NJ">New Jersey</option>
			<option value="NM">New Mexico</option>
			<option value="NY">New York</option>
			<option value="NC">North Carolina</option>
			<option value="ND">North Dakota</option>
			<option value="OH">Ohio</option>
			<option value="OK">Oklahoma</option>
			<option value="OR">Oregon</option>
			<option value="PA">Pennsylvania</option>
			<option value="RI">Rhode Island</option>
			<option value="SC">South Carolina</option>
			<option value="SD">South Dakota</option>
			<option value="TN">Tennessee</option>
			<option value="TX">Texas</option>
			<option value="UT">Utah</option>
			<option value="VT">Vermont</option>
			<option value="VA">Virginia</option>
			<option value="WA">Washington</option>
			<option value="WV">West Virginia</option>
			<option value="WI">Wisconsin</option>
			<option value="WY">Wyoming</option>
		</select>					
	</div>
	
	<div class="form-group"> <!-- Zip Code-->
		<label for="zip_id" class="control-label">Zip Code</label>
		<input type="text" class="form-control" id="zip_id" name="zip" placeholder="#####">
	</div>		
	
	<div class="form-group"> <!-- Submit Button -->
		<button type="submit" class="btn btn-primary">Buy!</button>
	</div>     
	
</form>

© 2014-2020 Pareto Software, LLC   | Blog | Bootstrap Form Builder