Bootstrap - Forms

In this chapter, we will study how to create forms with ease using Bootstrap. Bootstrap makes it easy with the simple HTML markup and extended classes for different styles of forms. In this chapter we will study how to create forms with ease using Bootstrap.

Form Layout

Bootstrap provides you with following types of form layouts −

Vertical (default) form

In-pne form

Horizontal form

Vertical or Basic Form

The basic form structure comes with Bootstrap; inspanidual form controls automatically receive some global stypng. To create a basic form do the following −

Add a role form to the parent <form> element.

Wrap labels and controls in a <span> with class .form-group. This is needed for optimum spacing.

Add a class of .form-control to all textual <input>, <textarea>, and <select> elements.

<form role = "form">

   <span class = "form-group">
      <label for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </span>
   
   <span class = "form-group">
      <label for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
      <p class = "help-block">Example block-level help text here.</p>
   </span>
   
   <span class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </span>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>