Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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>
    <!-- Adding it inside a container will center the form-->
    <div class="container">
        <h4>Basic vertical form with two text inputs a checkbox
            and a submit button</h4>
        <form>
            <!-- mb-3 adds a margin bottom of 3 units to the div -->
            <!--Email Input -->
            <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>
            <!--Password input-->
            <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>
            <!--Checkbox -->
            <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>
            <!-- Submit Button -->
            <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">
            <!-- Email Address Input -->
            <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>
            <!-- Password Input -->
            <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>
            <!-- Checkbox -->
            <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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!