How to Bootstrap- Responsive Forms

A web form or HTML form allows a user to fill out their data and sent to a web server for processing. In this guide, we will learn how to create different types responsive forms in the Bootstrap front-end framework. Using Bootstrap, you can create forms with simple steps. It has lots of predefined styles and alignments for form controls.

Bootstrap has three different form layouts

  • Vertical Form (default layout)
  • Horizontal Form
  • Inline Form

Let’s look at each type of Bootstrap form layouts.

 

Bootstrap Vertical Form Layout

You can create a basic or vertical form by wrapping the form with a default <form> element. Also, wrap form elements in a <div> with .form-group class. Also use .form-control class to all GUI elements.

 

Bootstrap Example
    <!-- Bootstrap vertical Form example -->
    <form>
       <div class="form-group">
           <label for="inputEmail">Email</label>
           <input type="email" class="form-control" id="userEmail" placeholder="Email Address">
       </div>
       <div class="form-group">
           <label for="inputPassword">Password</label>
           <input type="password" class="form-control" id="userPassword" placeholder="Password">
       </div>
       <button type="submit" class="btn btn-primary">Login</button>
   </form>

 

Result


 

Bootstrap Horizontal Form

You can create a horizontal form by adding .form-horizontal to the default <form> element. Also, wrap form elements in a <div> with .form-group class. Add a .control-label to the <label> element. Let’s see the example.

Bootstrap Example
    <!-- Bootstrap Horizontal Form example -->
    <form class="form-horizontal">
       <div class="form-group">
           <label class="col-xs-3 control-label" for="inputEmail">Email</label>
           <div class="col-xs-9" 
              <input type="email" class="form-control" id="userEmail" placeholder="Email Address">
           </div>
       </div>
       <div class="form-group">
           <label class="col-xs-3 control-label" for="inputPassword">Password</label>
           <div class="col-xs-9">
              <input type="password" class="form-control" id="userPassword" placeholder="Password">
           </div>
       </div>
       <button type="submit" class="col-offset-3 btn btn-primary">Login</button>
   </form>

 

Result

 

Bootstrap Inline Form

To create a Bootstrap form with all the GUI elements are inline, add the class .form-inline to the defult <form> tag. Let’s see an example.

Bootstrap Example
 <!-- Bootstrap Inline Form example -->
    <form class="form-inline">
       <div class="form-group">
           <input type="email" class="form-control" id="userEmail" placeholder="Email Address">
       </div>
       <div class="form-group">
           <input type="password" class="form-control" id="userPassword" placeholder="Password">
       </div>
       <button type="submit" class="btn btn-primary">Login</button>
   </form>

 

Result

 

Checkboxes and Radios

To add the checkboxes and radio buttons, wrap each control element in a <div> tag and use class .checkbox for checkboxes or .radio for radio buttons.

Bootstrap Example
   <!-- Bootstrap Checkboxes and Radio buttons -->
   <form>
       <div class="checkbox">
            <label><input type="checkbox" name="options"> WordPress</label>
       </div>
       <div class="checkbox">
            <label><input type="checkbox" name="options"> Drupal</label>
       </div>
 
       <div class="radio">
            <label><input type="radio" name="gender"> Male</label>
       </div>
       <div class="radio">
            <label><input type="radio" name="gender"> Female</label>
       </div>
   </form>

 

Result

 

To render checkboxes or radios on same line, youcan use .checkbox-inline or .radio-inline class on the <label> element .

Anwar Yakkiparamban

Anwar Yakkiparamban is the founder of Lauyou Learning. Prior to Lauyou learning, Anwar worked at ARD Engineering & Development, Qatar. He holds bachelor degree in Electronics and Communication Engineering from Govt. Engineering College Idukki.

You may also like...