Bootstrap form

1. Introduction

Bootstrap provides with predefined styling for all the form controls. <input>, <textarea>, and <select> elements when applied with class .form-control, as we have done in the below example, gets the width assigned as 100%.

2. Bootstrap Form – Thumb Rules

There are some thumb rules we must follow while creating an HTML form –

  1. We must always specify the role attribute, like <form role = “form” …>
  2. Must wrap all the labels and form controls within .form-group class, like <div class=”form-group”>
  3. Add class .form-control to all textual <input>, <textarea>, and <select> elements
  4. For an inline form, add class .form-inline to the <form> element
  5. For horizontal form, add class .form-horizontal to the <form> element and .control-label to all <label> elements

3. Demonstration

Receive our updates to your inbox

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.