Bootstrap Forms - Vertical forms, Horizontal forms, Inline forms

Bootstrap Tutorial

Bootstrap Forms

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

Form layouts: Bootstrap provides three types of form layouts:

1. Vertical form (this is default)

2. Horizontal form

3. Inline form

Standard rules for all three form layouts :

1. Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing).

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

Bootstrap Vertical Form :

	
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Bootstrap Vertical Form</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<form action="" method="post">
    <div class="form-group">
      <label for="email">User Name :</label>
      <input type="text" class="form-control" id="user_name" placeholder="User Name" name="user_name">
    </div>
    <div class="form-group">
      <label for="pwd">Password :</label>
      <input type="password" class="form-control" id="password" placeholder="Enter Password" name="password">
    </div>
    <div class="checkbox">
      <label><input type="checkbox" name="remember"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-info">Submit</button>
  </form>
 
</body>
</html>

Output :

Bootstrap Horizontal Form :

Horizontal form layout labels are right aligned and floated to left to make them appear on the same line as form controls. The horizontal form layout requires the various markup changes from a default form layout.

1. Add class .form-horizontal to the <form> element

2. Wrap labels and form controls in a <div> element and apply the class .form-group.

3. Add class .control-label to all <label> elements

	
<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Bootstrap Horizontal Form</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<form class="form-horizontal" action="/action_page.php">
    <div class="form-group">
      <label class="control-label col-sm-3" for="email">Email ID:</label>
      <div class="col-sm-9">
        <input type="email" class="form-control" id="email" placeholder="example@gmail.com" name="email">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-3" for="pwd">Password:</label>
      <div class="col-sm-9">          
        <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-3 col-sm-9">
        <div class="checkbox">
          <label><input type="checkbox" name="remember"> Remember me</label>
        </div>
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-3 col-sm-9">
        <button type="submit" class="btn btn-info">Submit</button>
      </div>
    </div>
  </form>
 
</body>
</html>

Output :

Email ID:

Password:

Remember me

Bootstrap Inline Form :

The .form-inline to the left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Bootstrap Inline Form</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<form class="form-inline" action="" method="post">
  <div class="form-group">
   <label class="sr-only" for="inputEmail">Email Id :</label>
   <input type="email" class="form-control" id="inputEmail" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="inputPassword">Password :</label>
     <input type="password" class="form-control" id="inputPassword" placeholder="Password">
  </div>
  <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
  </div>
    <button type="submit" class="btn btn-info">Submit</button>
</form>
 
</body>
</html>

Output :

Inputs, Textareas and Select Boxes :

The bootstrap forms are <input> , <select> , <textarea>.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Bootstrap Inputs, Textareas, Select Boxes</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<form action="" method="post">
<div class="row">

<div class="col-sm-6">

    <h4>Input Forms</h4>
    <input type="text" class="form-control input-lg" placeholder="Large input"><br>
    <input type="text" class="form-control" placeholder="Default input"><br>
    <input type="text" class="form-control input-sm" placeholder="small input"><br>
    
    <div class="clearfix"></div>
    
     <h4>Disabled Form</h4>
     <input type="text" class="form-control" placeholder="Disabled input" disabled><br>
     
     <div class="clearfix"></div>
     
     <h4>Readonly Form</h4>
     <input type="text" class="form-control" placeholder="Readonly Form" readonly="readonly"><br>
    
    <div class="clearfix"></div>
    
    <h4>Textarea</h4>
    <textarea class="form-control" cols="" rows="4" placeholder="Sample Message"></textarea>
    
    
</div>
    
    
    <div class="col-sm-6">
    
        <h4>Select Boxes</h4>
        <select class="form-control input-lg">
            <option value="">Please Select One</option>
            <option value="Sample-1">Sample-1</option>
            <option value="Sample-2">Sample-2</option>
            <option value="Sample-3">Sample-3</option>
        </select><br>
        <select class="form-control">
            <option value="">Default select</option>
            <option value="">Please Select One</option>
            <option value="Sample-1">Sample-1</option>
            <option value="Sample-2">Sample-2</option>
            <option value="Sample-3">Sample-3</option>
        </select><br>
        <select class="form-control input-sm">
            <option value="">Please Select One</option>
            <option value="Sample-1">Sample-1</option>
            <option value="Sample-2">Sample-2</option>
            <option value="Sample-3">Sample-3</option>
        </select><br>
        
         <div class="clearfix"></div>
        
         <h4>Disabled Select Box</h4>
         <select class="form-control" disabled>
            <option value="">Default select</option>
            <option value="">Please Select One</option>
            <option value="Sample-1">Sample-1</option>
            <option value="Sample-2">Sample-2</option>
            <option value="Sample-3">Sample-3</option>
        </select><br>
        
        <div class="clearfix"></div>
        
         <h4>Mutiple Select list</h4>
          <select multiple class = "form-control">
             <option>HTML</option>
             <option>CSS</option>
             <option>JavaScript</option>
             <option>Bootstrap</option>
             <option>PHP</option>
          </select><br>
          
          
        <div class="clearfix"></div>
        
  <h4>Input with help text</h4>
 <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
 <span id="helpBlock" class="help-block">This is a sample helping text paragraph.</span>
        
  </div>
    
</div>
</form>
 
</body>
</html>

Output :

Input Forms

Disabled Form

Readonly Form

Textarea

Select Boxes

Disabled Select Box

Mutiple Select list

Input with help text

This is a sample helping text paragraph.

Checkboxes and Radios Buttons :

Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Bootstrap Checkboxes and Radio buttons</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<form action="" method="post">
 
    <label class="checkbox-inline">
    <input type="checkbox" name="one" value="One"> One
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" name="two" value="Two"> Two
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" name="three" value="Three"> Three
    </label>
    <br /><br />
    <label class="radio-inline">
      <input type="radio" name="radio" value="One"> One
    </label>
    <label class="radio-inline">
      <input type="radio" name="radio" value="Two"> Two
    </label>
    <label class="radio-inline">
      <input type="radio" name="radio" value="Three"> Three
    </label>
    
</form>
 
</body>
</html>

Output :

Bootstrap Tutorial