What is Bootstrap Form
The bootstrap form provides many useful classes that contain the added CSS properties automatically applies to form controls on addition of the classes.
Forms are the web content you can use to get the user input data. But, creating a beautiful looking form is the tedious task for many designers.
How to Create Bootstrap Form Responsive Layouts
To create a Bootstrap form, you must know the useful bootstrap classes and the various bootstrap form layouts.
There are three types of bootstrap form layouts given below.
- Vertical Form(Simple or default form layout)
- Inline Form
- Horizontal Form
In this tutorial, I have added all the useful class examples, you can check and remember each class to use in various form elements.
See details of each form layout given below.
Bootstrap Vertical Form(Basic or Default Form)
This is a simple form layout with no class for the HTML form tag.
To create this form put each individual form control inside the class .form-group and add .form-control class to textboxes, select box and textarea.
See the example given below.
|
1 2 3 4 5 6 7 8 9 10 11 |
<form> <div class="form-group"> <label for="Username">Username</label> <input type="email" class="form-control" name="username" id="email" placeholder="Email"> </div> <div class="form-group"> <label for="Password">Password</label> <input type="password" class="form-control" name="password" id="password" placeholder="Password"> </div> <button type="submit" class="btn btn-primary">Login</button> </form> |
Output
The above example creates a bootstrap form with left align elements. Each input text boxes added with the labels.
Here, I have used button .btn-primary class to create a button, see bootstrap button page to get more button classes and add beautiful buttons to your project.
Bootstrap Inline Form
Bootstrap inline forms are the forms in which form controls and labels are placed inline and left aligned.
You just need to put .form-inline as the base class of the form tag and add rest other classes of vertical or default form given above.
|
1 2 3 4 5 6 7 8 9 10 11 |
<form class="form-inline"> <div class="form-group"> <label for="Username">Username</label> <input type="email" class="form-control" name="username" id="email2" placeholder="Email"> </div> <div class="form-group"> <label for="Password">Password</label> <input type="password" class="form-control" name="password" id="password2" placeholder="Password"> </div> <button type="submit" class="btn btn-primary">Login</button> </form> |
Output
Horizontal Bootstrap Form
To create a horizontal form layout, you have the follow the below given rules.
- Put
.form-horizontalclass in the form tag. - Put form controls label and input tags inside the
.form-groupclass. - Add
.control-labelclass to the label and put input text inside the column grid div tag. The Rest of class are same as the default form classes.
Check out the below form to understand the horizontal form layout.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<form class="form-horizontal"> <div class="form-group"> <label for="Username" class="col-md-2 control-label">Username</label> <div class="col-md-10"> <input type="email" class="form-control" name="username" id="email4" placeholder="Email"> </div> </div> <div class="form-group"> <label for="Password" class="col-md-2 control-label">Password</label> <div class="col-md-10"> <input type="password" class="form-control" name="password" id="password4" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <button type="submit" class="btn btn-primary">Login</button> </div> </div> </form> |
Output
Disable Single Form Element
If you want to disable the input and the select boxes, you need to add the attribute .disabled as given below.
|
1 2 3 4 5 |
<form> <div class="form-group"> <input type="email" class="form-control" name="username" id="email6" placeholder="Disabled input" disabled> </div> </form> |
Output
To check the effect of the disabled item, just hover the input text given above.
Disable All Form Elements Using Fieldset Tag
If you want to disable all the items of a form, you don’t need to do this individually to all the element. Use the fieldset tag with the attribute .disabled. This will make all the elements appear as in the disable state.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<fieldset disabled> <form> <div class="form-group"> <label for="Username">Username</label> <input type="email" class="form-control" name="username" id="email8" placeholder="Disabled Input"> </div> <div class="form-group"> <label for="Password">Password</label> <input type="password" class="form-control" name="password" id="password8" placeholder="Disabled Input"> </div> <button type="submit" class="btn btn-primary">Login</button> </form> </fieldset> |
Output
Read Only State of Form input
If you want to create a read only input type form control, you have to add the attribute .readonly to it. This class makes the input controls prevent user inputs.
You can see the placeholder or value of the text box but not able to make any modifications. However, you can click on the input box which was not allowed in the disabled input box given above.
|
1 2 3 4 5 |
<form> <div class="form-group"> <input type="email" class="form-control" name="username" id="email10" placeholder="Readonly input" readonly> </div> </form> |
Output
Place Help text With Form Control
Sometimes, you need to put a help block text with the input boxes to help users understand the required input data. Bootstrap provides a class .help-block to use as the class of the span element and place it after the input form control types.
See the example below contains the help block that may extend beyond the new line.
|
1 2 3 4 5 6 |
<form> <div class="form-group"> <input type="email" class="form-control" name="username" id="email10" placeholder="Email"> <span class="help-block">This is the help text that may extend beyond the new line.</span> </div> </form> |
Output
Validation State of Form Input
There are three validation state classes you can use to show the states of the input type controls. You have to add these classes to the form tag. The description of these classes are given below
| Class name | Description |
|---|---|
.has-success |
Display the success message with the input box. |
.has-warning |
Specify the warning message with the input box. |
.has-error |
Display the error message with the input box. |
See the below example to find the style of each class with the input box and the help block.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<form> <div class="form-group has-success"> <label for="name" class="control-label">Name</label> <input type="text" class="form-control" name="name" id="name" placeholder="Name"> <span class="help-block">Enter text only</span> </div> <div class="form-group has-warning"> <label for="Username" class="control-label">Username</label> <input type="email" class="form-control" name="username" id="email12" placeholder="Email"> <span class="help-block">Enter a valid email id</span> </div> <div class="form-group has-error"> <label for="Password" class="control-label">Password</label> <input type="password" class="form-control" name="password" id="password12" placeholder="Password"> <span class="help-block">Enter numbers and text only</span> </div> <button type="submit" class="btn btn-primary">Login</button> </form> |
Output
Add Feedback Icons to Form input
You can add a feedback icon to your input box by adding .has-feedback in the form tag. In addition to this, you will also have to add a glyphicon with the glyphicon icon class and .form-control-feedback class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<form> <div class="form-group has-success has-feedback"> <label for="name" class="control-label">Name</label> <input type="text" class="form-control" name="name" id="name3" placeholder="Name"> <span class="glyphicon glyphicon-ok form-control-feedback"></span> <span class="help-block">Enter text only</span> </div> <div class="form-group has-warning has-feedback"> <label for="Username" class="control-label">Username</label> <input type="email" class="form-control" name="username" id="email14" placeholder="Email"> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> <span class="help-block">Enter a valid email id</span> </div> <div class="form-group has-error has-feedback"> <label for="Password" class="control-label">Password</label> <input type="password" class="form-control" name="password" id="password14" placeholder="Password"> <span class="glyphicon glyphicon-remove form-control-feedback"></span> <span class="help-block">Enter numbers and text only</span> </div> <button type="submit" class="btn btn-primary">Login</button> </form> |
Output
Control Height Sizing of Input and Select Box in Bootstrap Form
There are three bootstrap classes you can use to control the height of the input boxes and select boxes. These classes are given below the description.
| Class name | Description |
|---|---|
.input-lg |
Use this class to create a large size input box. |
.input-md |
If you want to create a medium input box, you can use this class. |
.input-sm |
Create a small input box by using this class with input form controls. |
See the example below to see the height changes made by above given classes.
|
1 2 3 4 5 6 7 8 9 10 11 |
<form> <div class="form-group"> <input type="email" class="form-control input-lg" name="username" id="email10" placeholder="Input-lg"> </div> <div class="form-group"> <input type="email" class="form-control input-md" name="username" id="email10" placeholder="Input-md"> </div> <div class="form-group"> <input type="email" class="form-control input-sm" name="username" id="email10" placeholder="Input-sm"> </div> </form> |
Output