CodesJava

Easy learning with example program codes

Bootstrap Horizontal Form Tutorial


Form act as a container for form elements. All textual input, textarea, and select elements with class .form-control have a width of 100%.

A horizontal form refers that the labels are aligned next to the input field (horizontal) on large and medium screens. On small screens (767px and below), it will transform to a vertical form (labels are placed on top of each input).

Standard rules for horizontal form layouts:
• Wrap labels and form controls in div class=”form-group.
• Add class .form-control to all textual input, textarea, and select elements.
• Add class .form-horizontal to the form element
• Add class .control-label to all label elements

Bootstrap Horizontal Form Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Horizontal Form Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Bootstrap Horizontal Form Example</h2>
  <form class="form-horizontal" action="/action_page.php">
    <div class="form-group">
      <label class="control-label col-sm-2" for="email">Email:</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="pwd">Password:</label>
      <div class="col-sm-10">          
        <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label><input type="checkbox" name="remember"> Remember me</label>
        </div>
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
    </div>
  </form>
</div>
 
</body>
</html>

Try it:

Bootstrap Horizontal Form Example on jsbin.com

Bootstrap 3 Tutorial

Bootstrap package tutorial.
Bootstrap CDN link tutorial.
Create First Web Page With Bootstrap.
Bootstrap Grid System tutorial.
Bootstrap grid equal columns example.
Bootstrap grid unequal columns example.
Bootstrap Jumbotron tutorial.
Bootstrap Page Header Tutorial.
Bootstrap Well tutorial.
Bootstrap Alert Tutorial.
Bootstrap Alert Link Tutorial.
Bootstrap Closing Alerts tutorial.
Bootstrap Animated Alerts Tutorial.
Bootstrap Buttons Style Tutorial.
Bootstrap Buttons Size Tutorial.
Bootstrap Block Level Buttons tutorial.
Bootstrap Buttons States Tutorial.
Bootstrap Button Groups Tutorial.
Bootstrap Vertical Button Groups tutorial.
Bootstrap Justified Button Groups Tutorial.
Bootstrap Nesting Button Groups Tutorial.
Bootstrap Split Button Dropdowns tutorial.
Bootstrap Badges Tutorial.
Bootstrap Contextual Badges Tutorial.
Bootstrap Pill Badges tutorial.
Bootstrap Labels Tutorial.
Bootstrap Contextual Labels Tutorial.
Bootstrap Basic Progress Bar tutorial.
Bootstrap Progress Bar With Label Tutorial.
Bootstrap Colored Progress Bars Tutorial.
Bootstrap Striped Progress Bars Tutorial.
Bootstrap Animated Progress Bars tutorial.
Bootstrap Stacked Progress Bars Tutorial.
Bootstrap Pagination Tutorial.
Bootstrap Pagination – Active State.
Bootstrap Pagination – Disabled State.
Bootstrap Pagination – Sizing Tutorial.
Bootstrap Pagination Breadcrumbs Tutorial.
Bootstrap Pager Tutorial.
Bootstrap Align Buttons tutorial.
Bootstrap Basic List Group Tutorial.
Bootstrap List Group With Badges Tutorial.
Bootstrap List Group With Linked Items.
Bootstrap Active Item in a List Group.
Bootstrap Disabled Item in a List Group.
Bootstrap Group Contextual Classes.
Bootstrap Basic Panel Tutorial.
Bootstrap Panel Heading tutorial.
Bootstrap Panel Footer Tutorial.
Bootstrap Panel Group Tutorial.
Bootstrap Panels with Contextual Classes.
Bootstrap Glyphicon Tutorial.
Bootstrap Dropdowns Tutorial.
Bootstrap Dropdowns Divider tutorial.
Bootstrap Dropdowns Header Tutorial.
Bootstrap Dropdowns Active items.
Bootstrap Dropdowns Disable items.
Bootstrap Dropdowns Position Tutorial.
Bootstrap Dropup Tutorial.
Bootstrap Simple Collapsible items.
Bootstrap Collapsible Panel Tutorial.
Bootstrap Collapsible List Group.
Bootstrap Vertical Form items.
Bootstrap Inline Form.
Bootstrap Horizontal Form.


Copyright © 2018 CodesJava DMCA.com Protection Status SiteMap