Bootstrap Forms

Forms are one of the most vital parts of any website. Forms are used to get input from users. You would have often seen contact forms in websites that allow user to send message to the website admin etc. Bootstrap makes it very easy to style forms that are completely responsive. In fact, bootstrap adds some default styling to a form even if you do not add any class to the form control. There are three types of bootstrap forms.

  • Vertical Forms
  • Inline Forms
  • Horizontal Forms

By default, bootstrap forms are vertical. Though bootstrap adds default styling to the form elements, there are some general rules to follow in order to create responsive and nice-looking forms. They are enlisted below:

  • Always add “role=form” attribute to the opening tag of the form element.
  • Add “form-group” class to the div that encapsulates labels and textual elements.
  • Add “form-control” class to the textual elements.

Vertical Forms in Bootstrap

Take a look at the following example to see how vertical forms are created in bootstrap.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
         <form role="form">
          <div class="form-group">
            <label for="fname">First Name</label>
            <input type="text" class="form-control" id="fname">
          </div>
          <div class="form-group">
            <label for="lname">Last Name</label>
            <input type="text" class="form-control" id="lname">
          </div>
           <div class="form-group">
            <label for="age">Age</label>
            <input type="text" class="form-control" id="age">
          </div>
          <div class="checkbox">
            <label><input type="checkbox"> Remember me</label>
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
            
    </body>

</html>

Download the code Try the code

If you look at the above web page in browser, you should see a form with three text fields, one checkbox and a submit button. The form elements are all arranged vertically, i.e each element on a new line.

Inline Bootstrap Forms

It is very simple to create inline forms via bootstrap. Just add the class “form-inline” to the opening form tag. This will arrange all the form elements in inline manner. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
         <form class="form-inline" role="form">
          <div class="form-group">
            <label for="fname">First Name</label>
            <input type="text" class="form-control" id="fname">
          </div>
          <div class="form-group">
            <label for="lname">Last Name</label>
            <input type="text" class="form-control" id="lname">
          </div>
           <div class="form-group">
            <label for="age">Age</label>
            <input type="text" class="form-control" id="age">
          </div>
          <div class="checkbox">
            <label><input type="checkbox"> Remember me</label>
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
            
    </body>

</html>

Download the code Try the code

Now, if you open the above page in browser, you should see that all the form elements including textboxes, checkbox and submit buttons, are arranged in single line.

Horizontal Bootstrap Forms

To create horizontal forms in bootstrap, you need to do a couple of things. First add “form-horizontal” class to the opening form tag. Next, to each “label” add class “control-label”. This will create a form where each label will sit on the same line with the text box. This will give horizontal outlook to the form. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
         <form class = "form-horizontal" role = "form">
   
           <div class = "form-group">
              <label for = "fname" class = "col-sm-2 control-label">First Name</label>
              <div class = "col-sm-10">
                 <input type = "text" class = "form-control" id = "fname" >
              </div>
           </div>

           <div class = "form-group">
              <label for = "lname" class = "col-sm-2 control-label">Last Name</label>
              <div class = "col-sm-10">
                 <input type = "text" class = "form-control" id = "lname" >
              </div>
           </div>
             
             <div class = "form-group">
              <label for = "age" class = "col-sm-2 control-label">Age</label>
              <div class = "col-sm-10">
                 <input type = "text" class = "form-control" id = "age" >
              </div>
           </div>


           <div class = "form-group">
              <div class = "col-sm-offset-2 col-sm-10">
                 <button type = "submit" class = "btn btn-default">Sign Up</button>
              </div>
           </div>
	
</form>
            
    </body>

</html>

Download the code Try the code

<<< Bootstrap Navbar AdvancedBootstrap Inputs >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .