How to create forms using Twitter Bootstrap ?
Last Updated :
16 Jan, 2022
Every website that you visit will have some sort of form in it to collect data from the users. A Form consists of input fields that allow the user to enter the data. Bootstrap provides us with a very easy way to add customizable & responsive forms to our web pages.
In this article, we will learn how to create forms using bootstrap 5.
Bootstrap Setup:
Step 1: Create a file with the name index.html and add the initial HTML5 boilerplate code to it.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Bootstrap forms</ title >
</ head >
< body ></ body >
</ html >
|
Step 2: Now to add bootstrap you need to include the following script tag in the body element of your HTML code:
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js”integrity=”sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p”crossorigin=”anonymous”></script>
And this link tag inside the head of your HTML code.
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet”integrity=”sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3″crossorigin=”anonymous”>
If you need the most up-to-date CDN links, go to the bootstrap website.
After doing this your index.html file should look like this:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< link href =
rel = "stylesheet" integrity =
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin = "anonymous" >
< title >Bootstrap forms</ title >
</ head >
< body >
< script src =
integrity =
"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin = "anonymous" >
</ script >
</ body >
</ html >
|
Input fields: A basic form contains text input fields, labels, textarea, select options, and a submit button.
To use bootstrap forms there are some standard rules that we can follow.
- By default, the form created will be vertical
- Add form-control class to all text inputs, and select tags.
- For labels add the form-label class
- For a checkbox add form-check class
- For block-level texts use the form-text class
Example: The following code creates a vertical form with two text input fields, a checkbox, and a submit button with the primary bootstrap button.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Bootstrap forms</ title >
< link href =
rel = "stylesheet"
integrity =
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "container" >
< h4 >Basic vertical form with two text inputs a checkbox
and a submit button</ h4 >
< form >
< div class = "mb-3" >
< label for = "email"
class = "form-label" >
Email address:
</ label >
< input type = "email"
class = "form-control"
id = "email"
placeholder = "Enter your email id" >
</ div >
< div class = "mb-3" >
< label for = "password"
class = "form-label" >
Password:
</ label >
< input type = "password"
class = "form-control"
id = "password"
placeholder = "Enter your password" >
< div id = "password-help-block"
class = "form-text" >
Password needs to be 8 characters long
</ div >
</ div >
< div class = "mb-3 form-check" >
< input type = "checkbox"
class = "form-check-input"
id = "checkbox" >
< label class = "form-check-label"
for = "checkbox" >
Check me!
</ label >
</ div >
< button type = "submit"
class = "btn btn-primary" >
Submit
</ button >
</ form >
</ div >
</ body >
</ html >
|
Output:
Basic bootstrap form
Dropdown menu: To add a dropdown using the form-select class on a normal select element and add options normally. All the styles would be applied.
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Bootstrap forms</ title >
< link href =
rel = "stylesheet"
integrity =
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin = "anonymous" />
< script src =
integrity =
"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "container" >
< h4 >Dropdown menu</ h4 >
< form >
< select class = "mb-3 form-select" >
< option selected>Default Option</ option >
< option value = "option1" >Option 1</ option >
< option value = "option2" >Option 2</ option >
</ select >
</ form >
</ div >
</ body >
</ html >
|
Output:
Dropdown menu using bootstrap
Toggle Switch: To add a toggle switch add both form-check and form-switch class to a checkbox input.
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Bootstrap forms</ title >
< link href =
rel = "stylesheet"
integrity =
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin = "anonymous" />
< script src =
integrity =
"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "container" >
< h4 class = "mt-3" >Toggle Switches</ h4 >
< form >
< div class = "form-check form-switch" >
< input class = "form-check-input" type = "checkbox"
id = "switch" />
< label class = "form-check-label" for = "switch" >
Toggle Me
</ label >
</ div >
</ form >
</ div >
</ body >
</ html >
|
Output:
Toggle Switch using bootstrap
Creating a complete form with input validation: To add user validation for input fields there are two methods.
- By adding was-validated class to the form element if validation needs to be done on the client-side or,
- by adding needs-validation class to the form element if validation is to be done on the server-side.
We can also add valid-feedback or an invalid-feedback message to tell the user what’s missing before/after submitting the form.
Example: The following code creates two text input fields and a checkbox with client-side input validations.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Bootstrap forms</ title >
< link href =
rel = "stylesheet"
integrity =
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin = "anonymous" />
< script src =
integrity =
"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "container" >
< h4 >Form Validation</ h4 >
< form class = "was-validated" >
< div class = "mb-3" >
< label for = "email"
class = "form-label" >
Email Address:
</ label >
< input type = "email"
class = "form-control"
id = "email"
placeholder = "Enter your email id"
required />
< div class = "valid-feedback" >
Valid Email id
</ div >
< div class = "invalid-feedback" >
Please fill out this field.
</ div >
</ div >
< div class = "mb-3" >
< label for = "password"
class = "form-label" >
Password:
</ label >
< input type = "password"
class = "form-control"
id = "password"
placeholder = "Enter your password"
minlength = "8" required />
< div class = "form-text"
id = "password-help-block" >
Password needs to be 8 characters long.
</ div >
< div class = "valid-feedback" >
Valid Password.
</ div >
< div class = "invalid-feedback" >
Please fill out this field.
</ div >
</ div >
< div class = "form-check mb-3" >
< input class = "form-check-input"
type = "checkbox"
id = "checkbox" required />
< label class = "form-check-label"
for = "checkbox" >
I agree on T & C.
</ label >
< div class = "valid-feedback" >
You Agree to the T & C.
</ div >
< div class = "invalid-feedback" >
Check this checkbox to continue.
</ div >
</ div >
< button type = "submit"
class = "btn btn-primary" >
Submit
</ button >
</ form >
</ div >
</ body >
</ html >
|
Output: This code will create the following form.
Bootstrap form with input validation
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...