Creating a form in HTML 5 and styling it with CSS manually is a tedious process. Bootstrap form simplifies this task with its own styles and layouts. It supports several form controls with its predefined classes for textual inputs, select menus, text ares, file inputs, check boxes and radio buttons.
Note: All inputs must have a
type attribute as mandatory, since bootstrap utilizes the HTML5 doctype.Vertically aligned form controls
Bootstrap by default, sets the
display:block and width:100% which causes the form elements to stack vertically.<form>
<fieldset class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
<small class="text-muted">We'll never share your email with anyone else.</small>
</fieldset>
<fieldset class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</fieldset>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Creating inlined form controls
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-primary">Send invitation</button>
</form>
Adding
.form-inline class displays the labels, form controls and buttons in a single horizontal row with left aligned.Usage of
.from-inline class changes the value of default width from width:100% to width:auto and the value of display from display:block to display:inline-blockNote: Appearance of controls can only be seen in line with viewports that at atleast 768px wide.
Labels in the inlined forms can be made hidden by adding
.sr-only class. <form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Horizontally aligned form controls
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 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">Sign in</button>
</div>
</div>
</form>
.form-horizontal class needs to be added to forms to align labels and groups of form controls in a horizontal layout.
.control-label class needs to be added to labels..form-horizontal changes .form-groups to behave as grid rows, so no need for .row