Bootstrap Forms

About Contact
Advertise
Google Search
HOME
HTML5
XHTML
CSS3
JQUERY
BOOTSTRAP2
BOOTSTRAP3
PHP
REFERENCES
EXAMPLES
FAQ
Bootstrap 3 Button Generator
Advertise Here
Bootstrap Forms
P
A
R
T
O
B
S
T
Advertisements
CIS
A
B
Bootstrap Home
Bootstrap Introduction
In this tutorial you will learn how to create elegant forms with
Bootstrap.
Bootstrap Get Started

Bootstrap Grid
System
Bootstrap Fixed Layout
Bootstrap Fluid Layout
BootstrapResponsive
Layout
Bootstrap Typography
Bootstrap Tables
Creating Forms with Bootstrap

HTML forms are the integral part of the web pages and applications, but styling the form
controls manually one by one with CSS are often boring and tedious. Bootstrap greatly
simplifies the process of styling and alignment of form controls like labels, input fields,
selectboxes, textareas, buttons, etc. through predefined set of classes.
Bootstrap provides three different types of form layouts:
Bootstrap
Vertical Form (default form layout)
Lists
Horizontal Form
Bootstrap List Groups
Inline Form
Bootstrap Forms
Bootstrap Input Groups
The following section will give you the detailed overview of these form layouts as well as the
Bootstrap Buttons
various form related Bootstrap components one by one.
Bootstrap Button Groups

Bootstrap
Images
Creating Vertical Form Layout
Bootstrap Media Objects
This is the default Bootstrap form layout in which styles are applied to form controls without
Bootstrap Icons
adding any base class to the <form> element or any large changes in the markup.
Bootstrap Navs
Bootstrap Navbar
Bootstrap
Panels
Bootstrap Breadcrumbs
Bootstrap Pagination
Bootstrap Labels &
Badges
Bootstrap Progress Bars
Bootstrap Jumbotron
Bootstrap Wells
Bootstrap Helper Classes
P
A
R
T
O
B
S
T
D
N
A
E
C
V
Bootstrap Modals
Bootstrap
Dropdowns
Bootstrap Tabs
Bootstrap Tooltips
Bootstrap Popovers
Bootstrap Alerts
Bootstrap Stateful
Buttons
Bootstrap Accordion
Bootstrap Carousel
Bootstrap Typeahead
Bootstrap ScrollSpy
The form controls in this layout are stacked with left-aligned labels on the top.
Example
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
Try this code
<form>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail"
placeholder="Email">
</div>
<label 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-primary">Login</button>
</form>
The output of the above example will look something like this:
Advertise Here
Bootstrap Affix
P
A
R
T
O
B
S
T
S
E
M
A
X
LE
P
Bootstrap Practice
Examples
Bootstrap FAQ's Answers
Advertise Here
SPONSORED LINKS
Unlimited Hosting
$1.99/mo
Note: In Bootstrap 3 all textual elements like <input>, <textarea>, and <select>
WordPress Hosting
with the class .form-control are 100% wide by default. To use them inline, you'll
$3.75/mo
have to set a width on the element the form controls used within.
Cloud Hosting Only

$5/mo
Advertise Here
Creating Horizontal Form Layout

Tweet
Follow
20
In 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. Steps to achieve this layout are listed below:
Add the class .form-horizontal to the <form> element.
Wrap labels and form controls in a <div> element and apply the class .form-group.
Use Bootstrap's predefined grid classes to align labels and form controls.
Add the class .control-label to the <label> element.
Example
Try this code
01.
02.
03.
<form class="form-horizontal">
<label for="inputEmail" class="control-label col-xs2">Email</label>
04.
<div class="col-xs-10">
05.
<input type="email" class="form-control"
id="inputEmail" placeholder="Email">
06.
</div>
07.
</div>
08.
09.
<label for="inputPassword" class="control-label col-xs2">Password</label>
10.
11.
The output
of the above example
will look something like this:
id="inputPassword"
placeholder="Password">
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
</div>
</div>
<div class="col-xs-offset-2 col-xs-10">
<label><input type="checkbox"> Remember
me</label>
</div>
</div>
</div>
<button type="submit" class="btn btnprimary">Login</button>
</div>
</div>
</form>
Creating Inline Form Layout
Sometimes you might require to place the form controls side-by-side to compact the layout.
You can do this easily by adding the Bootstrap class .form-inline to the <form> element.
Example
01.
02.
03.
04.
Try this code
<form class="form-inline">
<label class="sr-only" for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail"
placeholder="Email">
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
</div>
<label class="sr-only" for="inputPassword">Password</label>
</div>
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
Note: It is recommended to include a label for every form inputs otherwise screen
readers will have trouble with your forms. However in case of inline form layout you
can hide these labels using the .sr-only class.
Static Form Control

There might be a situation when you need to place just plain text next to a form label instead
of a form control. You can do this within a horizontal form layout by using the
.form-control-static class on a <p> element, like this:
Example
Try this code
01.
02.
03.
04.
05.
<p class="form-controlstatic">harrypotter@mail.com</p>
06.
</div>
07.
</div>
08.
09.
<label for="inputPassword" class="control-label col-xs2">Password</label>
10.
11.
The output
of the above example
will look something like this:
id="inputPassword"
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
</div>
</div>
me</label>
</div>
</div>
</div>
</div>
</div>
</form>
Placement of Checkboxes and Radios
Checkboxes and radio buttons can be placed either stacked or inline.
Stacked Checkboxes and Radios

To place the checkboxes or radio buttons vertically stacked i.e. line by line, just wrap each
control in a <div> element and apply the class .checkbox or .radio, like this:
Example
Try this code
01.
02.
03.
04.
<form>

<label><input type="checkbox" name="sports">
Cricket</label>
05.
</div>
06.
07.
<label><input type="checkbox" name="sports">
Football</label>
08.
</div>
09.
10. Checkboxes
<label><input
type="checkbox" name="sports">
Inline
and Radios
Tennis</label>
However,
to place
them inline i.e. side-by-side just use the class .checkbox-inline or .radio11.
</div>
12. on the <label> element, as shown in the following example. No need to wrap the
inline
13. in a <div>

controls
unlikestacked
stacked version.
14.
<div class="radio">
15.
<label><input type="radio" name="gender"> Male</label>
16.
</div>
Try this code
Example
17.
<div class="radio">
18.
<label><input type="radio" name="gender"> Female</label>
01.
<form>
19.
</div>
02.

20.
</form>
03.
<div>
04.
<label class="checkbox-inline"><input type="checkbox"
name="sports"> Cricket</label>
05.
name="sports"> Football</label>
06.
name="sports"> Tennis</label>
07.
</div>
08.
09.

10.
<label class="radio-inline"><input type="radio"
name="gender"> Male</label>
11.
<label class="radio-inline"><input type="radio"
name="gender">
Female</label>
You can easily
control the height
of your input and select boxes to match the button sizes. The
12.
</form>
Bootstrap's relative sizing classes like .input-lg, .input-sm can be used both on <input> and
Height Sizing of Inputs and Select Boxes
<select> boxes to create it's larger or smaller sizes.
Example
Try this code
01.
02.
03.
04.
<form>
<div class="row">
<input type="text" class="form-control input-lg"
placeholder="Large input">
05.
</div>
06.
07.
<select class="form-control input-lg">
08.
<option>Large select</option>
09.
</select>
10.
</div>
11.
</div>
12.
<br>
13.
<div class="row">
14.
15.
<input type="text" class="form-control"
placeholder="Default input">
16.
</div>
class="col-xs-6">
You17.
can also match<div
the sizes
of your form controls to the Bootstrap grid column sizes. Just wrap
18.
<select class="form-control">
your form controls (i.e. <input>, <textarea>, and <select>) in grid columns, or any custom
19.
<option>Default select</option>
element
classes on it.
20. and apply the grid
</select>
21.
</div>
22.
</div>
Try this code
Example
23.
<br>
24.
<div class="row">
01.
<form> <div class="col-xs-6">
25.
02.
<div class="row">
26.
<input type="text" class="form-control input-sm"
03.
placeholder="Small
input">
04.
<input type="text" class="form-control">
27.
</div>
05.
</div>
28.
06.
<div <select
class="col-xs-4">
29.
class="form-control input-sm">
07.
<input
type="text"select</option>
class="form-control">
30.
<option>Small
08.
</div>
31.
</select>
09.
<div
class="col-xs-5">
32.
</div>
10.
33.
</div> <input type="text" class="form-control">
11.
34.
</form> </div>
12.
</div>
13.
<br>
14.
<div class="row">
15.
16.
<textarea class="form-control"></textarea>
17.
</div>
18.
19.
<textarea class="form-control"></textarea>
Column Sizing of Inputs, Textareas and Select Boxes
Height Sizing of Form Groups
You can add the relative form sizing classes such as .form-group-lg or .form-group-sm to the
.form-group itself to make both the labels and form controls larger or smaller at the same time
within the horizontal form layouts.
Example
Try this code
01.
02.
03.
<div class="form-group form-group-lg">
<label class="col-sm-3 control-label"
for="inputLarge">Large label</label>
04.
<div class="col-sm-9">
05.
id="inputLarge" placeholder="Large input">
06.
</div>
07.
</div>
08.
09.
<label class="col-sm-3 control-label"
for="inputDefault">Default label</label>
10.
11.
id="inputDefault" placeholder="Default input">
12.
</div>
13.
</div>
14.
<div class="form-group form-group-sm">
15. disabled text
<label
To create
based class="col-sm-3
inputs just add the control-label"
attributes disabled to the <input> element
for="inputSmall">Small label</label>
as shown in example below and Bootstrap will do the rest.
16.
17.
id="inputSmall" placeholder="Small input">
Try this code
Example
18.
</div>
19.
</div>
1.
<form>
20.
</form>
2.
<input type="text" class="form-control" placeholder="Disabled
input" disabled="disabled">
3.
</form>
Creating Disabled and Readonly Inputs
However, in case of checkboxes and radio buttons, along with the disabled attribute you'll also
need to apply the .disabled class on its parent .checkbox, .radio, .checkbox-inline or
.radio-inline element (see placement of checkboxes and radios), otherwise the browser will
not show the "not-allowed" cursor when you put the mouse pointer on label text.
Example
01.
02.
03.
04.
05.
06.
07.
Try this code
<form>

<div class="checkbox disabled">
<label><input type="checkbox" disabled="disabled">
Disabled checkbox</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" disabled="disabled">
Another disabled checkbox</label>
</div>
08.
09.
Similarly,
you can
use
the readonly
attribute
to create
10.
<!-Disabled
stacked
radios
--> read only text based input controls that
11. user inputs
<div and
class="radio
disabled">
prevent
give the style
same as disabled.
12.
<label><input type="radio" disabled="disabled"> Disabled
radio</label>
13.
</div>
Try this code
Example
14.
<div class="radio disabled">
15.
<label><input type="radio" disabled="disabled"> Another
1.
<form>
disabled
2.
<input radio</label>
type="text" class="form-control" placeholder="Readonly
16. input"
</div>
readonly="readonly">
17.
3.
</form>
18.

19.
<p>
20.
<label class="checkbox-inline disabled"><input
type="checkbox" disabled="disabled"> Disabled checkbox</label>
21.
<label class="checkbox-inline disabled"><input
type="checkbox" disabled="disabled"> Another disabled
checkbox</label>
Rather
22. than disabling
</p> the form controls individually, you can also disable all form controls
within
23.a fieldset at once by adding the disabled attribute to the <fieldset> element.
24.

25.
<p>
26.
<label class="radio-inline disabled"><input type="radio"
Creating Disabled Fieldsets
Example
Try this code
01.
02.
<fieldset disabled="disabled">
03.
04.
05.
The output of the
06.above example will look something like this:
id="inputEmail" placeholder="Email">
07.
</div>
08.
</div>
09.
10.
<label for="inputPassword" class="control-label colxs-2">Password</label>
11.
12.
13.
</div>
14.
</div>
Placing help text 15.
for the form controls in an efficient way to guide users to enter the correct
data in a form. You can place<div
blockclass="form-group">
level help text for the form controls using the class .help16. is typically displayed at the bottom of the control.
block. The help text
17.
Try this code
Example
18.
1.
<form>
me</label>
2.
<input
type="text" class="form-control">
19.class="help-block">A block of help text that breaks onto a
3.
<span
</div> one line.</span>
new line and may extend beyond
4.
</form>20.
</div>
21.
</div> will look something like this:
The output of the above example
22.
23.
24.
25.
</div>
26.
</div>
27.
</fieldset>
Bootstrap provides easy to use and powerful mechanism for styling input controls to present
28.
different validation</form>
states. Bootstrap includes validation styles for error, warning, and success
Placing Help Text around Form Controls
Bootstrap Form Validation States
messages. To use, just add the appropriate class to the surrounding .form-group.
Example
01.
02.
03.
Try this code
<div class="form-group has-success">
<label class="col-xs-2 control-label"
for="inputSuccess">Username</label>
04.
05.
<input type="text" id="inputSuccess" class="formcontrol" placeholder="Input with success">
06.
<span class="help-block">Username is available</span>
07.
</div>
08.
</div>
09.
<div class="form-group has-warning">
10.
for="inputWarning">Password</label>
11.
The
example
will look something
like this:
12. output of the above
<input
type="password"
id="inputWarning"
class="form13.
14.
15.
control" placeholder="Input with warning">

<span class="help-block">Password strength:
Weak</span>
</div>
</div>
You can also add optional feedback icons to your inputs using the class .has-feedback on
.form-group and the right glyphicon, like this:
Example
Try this code
01.
02.
03.
<div class="form-group has-success has-feedback">
for="inputSuccess">Username</label>
04.
05.
<input type="text" id="inputSuccess" class="formcontrol" placeholder="Input with success">
06.
<span class="glyphicon glyphicon-ok form-controlfeedback"></span>
07.
<span class="help-block">Username is available</span>
08.
</div>
09.
</div>
10.
<div class="form-group has-warning has-feedback">
11.
for="inputWarning">Password</label>
12.
13.
<input type="password" id="inputWarning" class="formcontrol" placeholder="Input with warning">
14.
<span
class="glyphicon
glyphicon-warning-sign
Bootstrap
includes support
for all
standard form controls
as well as new HTML5 forminput types
control-feedback"></span>
such as datetime, number, email, url, search, tel, color etc. The following example will show
15.
<span class="help-block">Password strength:
you the usages
of standard form controls with Bootstrap.
Weak</span>
16.
</div>
17.
</div>
Try this code
Example
18.
<div class="form-group has-error has-feedback">
19.
01. for="inputError">Email</label>
02.
<div
class="form-group">
20.
<div
class="col-xs-10">
03.
<label
class="control-label
col-xs-3" class="form21.
<input
type="email" id="inputError"
for="inputEmail">Email:</label>
control"
placeholder="Input with error">
04.
<div
class="col-xs-9">
22.
<span
class="glyphicon glyphicon-remove form-control05. feedback"></span>
id="inputEmail"
23.
<span placeholder="Email">
class="help-block">Please enter a valid email
06. address</span>
</div>
07.
</div>
24.
</div>
08.
25.
</div>
09. </form>
<label class="control-label col-xs-3"
26.
for="inputPassword">Password:</label>
10.
11.
In the next chapter
you will learn how
to create interactive text-based input controls for your
id="inputPassword"
Supported Form Controls in Bootstrap
</div>
forms12.
using the Bootstrap
input group component.
13.
</div>
14.
15.
PREVIOUS
PAGE
NEXT PAGE
for="confirmPassword">Confirm Password:</label>
16.
17.
id="confirmPassword" placeholder="Confirm Password">
18.
</div>
19.
</div>
20.
21.
for="firstName">First Name:</label>
22.
23.
id="firstName" placeholder="First Name">
24.
</div>
25.
</div>
26.
27.
<label class="control-label col-xs-3" for="lastName">Last
Name:</label>
28.
29.
<input type="text" class="form-control" id="lastName"
Is this page helpful to you? Please give us a Google+1,or share your feedback. Connect with us on Facebook,Twitter and Google+ for the updates.

Bootstrap Forms

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bootstrap Forms

Uploaded by

Copyright:

Available Formats

About Contact

Bootstrap 3 Button Generator

Bootstrap Get Started

Creating Forms with Bootstrap

Vertical Form (default form layout)

Bootstrap List Groups

various form related Bootstrap components one by one.

Bootstrap Button Groups

Creating Vertical Form Layout

Bootstrap Media Objects

Try this code

Cloud Hosting Only

Creating Horizontal Form Layout

Try this code

Creating Inline Form Layout

Try this code

Static Form Control

Try this code

Placement of Checkboxes and Radios

Checkboxes and radio buttons can be placed either stacked or inline.

Stacked Checkboxes and Radios

Try this code

Height Sizing of Inputs and Select Boxes

<select> boxes to create it's larger or smaller sizes.

Try this code

Column Sizing of Inputs, Textareas and Select Boxes

Height Sizing of Form Groups

Try this code

Creating Disabled and Readonly Inputs

Try this code

Creating Disabled Fieldsets

Try this code

Placing Help Text around Form Controls

Bootstrap Form Validation States

Try this code

control" placeholder="Input with warning">

Try this code

Supported Form Controls in Bootstrap

You might also like