How to Create Forms using Bootstrap

A form contains many fields (also known as form controls) with optional labels and submit button.

To create a basic form, you need to add two classes:

  1. .form-group class on <div> element for each field. The .form-group class provides proper grouping of labels, controls, optional help text, and form validation messaging.

  2. form-control class on <input>, <select> and <textarea> elements.

You can change the height of fields by adding classes like .form-control-lg and .form-control-sm.

<form>
<div class="form-group">
 <label for="name">Name</label>
 <input type="text" class="form-control" id="name" placeholder="Enter Name">
</div>
 
<div class="form-group">
 <label for="inputfile">File input</label>
 <input type="file" class="form-control-file" id="inputfile">
</div>
 
<div class="checkbox">
 <label><input type="checkbox">Check me out</label>
</div>
 
 <button type="submit" class="btn btn-default">Submit</button>
</form>

Different Types of Inputs

1. Range Input

You can set horizontally scrollable range inputs using .form-control-range.

<input type="range" class="form-control-range" id="formControlRange">

2. Checkbox and Radio

Checkboxes are used for selecting one or several options in a list, while radios are used for selecting only one option. By default, any number of checkboxes and radios are vertically stacked and appropriately spaced with .form-check.

<div class="form-check">
 <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
 <label class="form-check-label" for="defaultCheck1">
 Default checkbox
 </label>
</div

You can group checkboxes or radios on the same horizontal row by adding .form-check-inline class.

<div class="form-check form-check-inline">
 <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
 <label class="form-check-label" for="inlineRadio1">1</label>
</div>

Disabled checkboxes and radios are created using the disabled attribute, that applies a lighter color to help indicate the input’s state.

3. File Input

For file inputs, swap the .form-control for .form-control-file.

Form Layout

Bootstrap applies display: block and width: 100% to almost all form controls. So, by default forms are stacked vertically. Additional classes can be used to change this layout. Complex form layouts that require multiple columns, varied widths, and additional alignment options can be built using grid classes.

Bootstrap provides three types of form layouts:

  1. Vertical form (default)
  2. Horizontal form
  3. Inline form

1. Horizontal Form

In horizontal form, labels and controls are placed in a single row. To create horizontal form, add the class .row to form groups. Then, add .col-*-* classes to specify the width of labels and controls. Also add .col-form-label to <label> element so they are vertically centered with their associated form controls.

2. Inline Forms

Add the .form-inline class to <form> element to display a series of labels, form controls, and buttons on a single horizontal row.

Disabled Input

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter. Add the disabled attribute to a <fieldset> to disable all the controls within.

Read Only Input

Add the readonly boolean attribute on an input to prevent modification of value of the input. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

If you want to have read-only elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.

<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">