Bootstrap makes it easy with the simple HTML markup and extended classes for different styles of forms.

Bootstrap greatly simplifies the process of styling and alignment of form controls like labels, input fields, select boxes, textareas, buttons, etc. through predefined set of classes.



HTML forms are the integral part of the web pages and applications, but styling the form controls manually one by one with CSS are often boring and tedious.

This tutorial will help you to create various types of forms with Bootstrap.

Three types of forms in Bootstrap are:

  1. Vertical or Basic form  (By default)
  2. Horizontal form
  3. Inline form
    For a better solution, you can take a look at our Bootstrap Landing Page Templates.


Rules For Form Layouts

  • Use  of role attribute in <form role=”form“> this improves accessibility for screen readers
  • Wrap up labels and form controls in <div class=”form-group“> for better spacing
  • Use  of class =”form-control in all text  elements (<input>, <select>, <textarea>)


Vertical or Basic Form

In Vertical or Basic Form layout there is no need to add any base class in the <form> element and in result labels are left-aligned on the top of form control.

Example:

<form role="form">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

vertical form


 Horizontal Form

Creates a horizontal form that uses the horizontal layout where labels are right aligned in this form.

Following rules are additional:

  • Use class=”form-horizontal in the <form> element
  • Use class=”control-label in the <label> element

Example:


<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter 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">Submit</button>
</div>
</div>
</form>

horizontal

Note: In horizontal layout we will use Bootstrap’s predefined grid classes for alignment of labels and groups of form controls.


Inline Form

An inline form show a compact layout of form. In this form labels are aligned alongside and all the elements are left-aligned and inline.

Following rule is additional:

  • Use class =”form-inline  in the <form> element

Example:

<form class="form-inline" role="form">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

inline

Note: Use a label for every input, Otherwise screen readers will have trouble with your forms.(We can use class=”sr-only in <label> element to hide these labels )


Supported Form Controls

Bootstrap easily supports the standard and important form controls namely:

  • input
  • textarea
  • checkbox
  • radio
  • select

Input

Input is the most common and useful form control. All the HTML5 input types (text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color) are supported by Bootstrap.

The following example includes two input types text and password :

Example:

<div class="form-group">
<label for="user">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>

input control


Textarea

The textarea supports multiple lines of text. According to your need you can update (increase or decrease) rows attribute.

Example:

<div class="form-group">
<label for="message">Comment:</label>
<textarea class="form-control" rows="4" id="comment"></textarea>
</div>

textarea control


Checkbox

Checkbox is used to select one or several options in a list. For inline appearance of controls we can use class=”checkbox-inline in <label> element.

The following example shows three checkboxes(Third Checkbox is disabled) :

Example:

<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>Option 3</label>
</div>

checkbox tag


Radio

Radio buttons are used to select one option from many in a list. For inline appearance of controls we can use class=”radio-inline in <label> element.

The following example shows two radio buttons :

Example:

<div class="radio">
<label><input type="radio" name="oradio">Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="oradio">Option 2</label>
</div>

radio control


Select

Select is a drop-down list and it is used when you want to allow the user to pick a option from multiple options. Use multiple=”multiple” in <select> tag to allow the users to select more than one option.

The following example shows a select list of name :

Example:

<div class="form-group">
<label for="name">Select list(select one):</label>
<select class="form-control" id="name">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select><br>

<label for="name1">Mutiple select(Hold shift to select more than one option):</label>
<select multiple class="form-control" id="name1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>

select control


Pabbly Form Builder


Conclusion

So, you’ve learned that how we can make form and its components stylish using bootstrap. I hope it was helpful. Keep visiting our blogs and feel free to comment.

You may also like –