How to create forms using Twitter Bootstrap ?

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.

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:

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.

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: 

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:

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.

Output: This code will create the following form.

Bootstrap form with input validation