Skip to content
Related Articles
Open in App
Not now

Related Articles

Bootstrap 4 | Forms

Improve Article
Save Article
  • Last Updated : 22 Dec, 2022
Improve Article
Save Article

Form Layout: Bootstrap provides two types of form layout which are listed below: 

  • Stacked form
  • Inline form

Stacked form: The stacked form creates input field and submit button in stacked format. 
Example: 

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Form</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <h1 class="text-success text-center">
        GeeksforGeeks
    </h1>
    <h2 class="text-center">Stacked form</h2>
    <div class="container">
        <form action="#">
            <div class="form-group">
                <label for="fname">First Name:</label>
                <input type="text" class="form-control" id="fname"
                    placeholder="Enter First Name" name="fname">
            </div>
            <div class="form-group">
                <label for="lname">Last Name:</label>
                <input type="text" class="form-control" id="lname"
                    placeholder="Enter Last Name" name="lname">
            </div>
            <div class="form-group">
                <label for="email">Email Id:</label>
                <input type="email" class="form-control" id="email"
                    placeholder="Enter Email Id" name="email">
            </div>
            <div class="form-group">
                <label for="contact">Contact No:</label>
                <input type="text" class="form-control" id="contact"
                    placeholder="Enter Contact Number" name="contact">
            </div>
            <div class="form-group form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="checkbox"
                        name="remember">
                        Remember me
                </label>
            </div>
            <button type="submit" class="btn bg-success">
                Submit
            </button>
        </form>
    </div>
</body>
</html>

Output: 
Inline Form: The .form-inline class is used with <form> element to create inline form. The inline form contains elements that are left-aligned and inline. The inline property applies when viewports are at least 576px wide. If screen size is smaller than 576px then the form element will be stacked vertically.
Example: 
HTML



<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Form</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <h1 class="text-success text-center">
        GeeksforGeeks
    </h1>
    <h2 class="text-center">Inline form</h2>
    <div class="container">
        <form class="form-inline" action="#">
            <label for="fname">First Name:</label>
            <input type="text" class="form-control"
                   id="fname" placeholder="Enter First Name"
                   name="fname">
            <label for="lname">Last Name:</label>
            <input type="text" class="form-control"
                   id="lname" placeholder="Enter Last Name"
                   name="lname">
            <label for="email">Email Id:</label>
            <input type="email" class="form-control"
                   id="email" placeholder="Enter Email Id"
                   name="email">
            <label for="contact">Contact No:</label>
            <input type="text" class="form-control"
                   id="contact"
                   placeholder="Enter Contact Number"
                   name="contact">
            <div class="form-group form-check">
                <label class="form-check-label">
                    <input class="form-check-input"
                            type="checkbox"
                            name="remember">
                        Remember me
                </label>
            </div>
            <button type="submit"
                class="btn bg-success">
                Submit
            </button>
        </form>
    </div>
</body>
</html>
Output: 
Inline Form with Utilities: The Bootstrap spacing utilities is used to add space to look better inline form. The .mr-sm-2 class is used to add the right margin to each input on all devices (small and up) and .mb-2 class adds a margin to the bottom.
Example: 
HTML



<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Form</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <h1 class="text-success text-center">
          GeeksforGeeks
    </h1>
    <h2 class="text-center">Inline form with Utilities</h2>
    <div class="container-fluid">
        <form class="form-inline" action="#">
            <label for="fname" class="mb-2 mr-sm-2">
                   First Name:
            </label>
            <input type="text" class="form-control mb-2 mr-sm-2"
                   id="fname" placeholder="Enter First Name"
                   name="fname">
            <label for="lname" class="mb-2 mr-sm-2">
                   Last Name:
            </label>
            <input type="text" class="form-control mb-2 mr-sm-2"
                   id="lname" placeholder="Enter Last Name"
                   name="lname">
            <label for="email" class="mb-2 mr-sm-2">
                   Email Id:
            </label>
            <input type="email" class="form-control mb-2 mr-sm-2"
                   id="email" placeholder="Enter Email Id"
                   name="email">
            <label for="contact" class="mb-2 mr-sm-2">
                   Contact No:
            </label>
            <input type="text" class="form-control mb-2 mr-sm-2"
                   id="contact" placeholder="Enter Contact Number"
                   name="contact">
            <div class="form-check mb-2 mr-sm-2">
                <label class="form-check-label">
                    <input class="form-check-input"
                        type="checkbox"
                        name="remember">
                  Remember me
                </label>
            </div>
            <button type="submit" class="btn bg-success mb-2">
                Submit
            </button>
        </form>
    </div>
</body>
</html>
HTML



<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Form</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <h1 class="text-success text-center">
          GeeksforGeeks
    </h1>
    <h2 class="text-center">Inline form with Utilities</h2>
    <div class="container-fluid">
        <form class="form-inline" action="#">
            <label for="fname" class="mb-2 mr-sm-2">
                   First Name:
            </label>
            <input type="text" class="form-control mb-2 mr-sm-2"
                   id="fname" placeholder="Enter First Name"
                   name="fname">
            <label for="lname" class="mb-2 mr-sm-2">
                   Last Name:
            </label>
            <input type="text" class="form-control mb-2 mr-sm-2"
                   id="lname" placeholder="Enter Last Name"
                   name="lname">
            <label for="email" class="mb-2 mr-sm-2">
                   Email Id:
            </label>
            <input type="email" class="form-control mb-2 mr-sm-2"
                   id="email" placeholder="Enter Email Id"
                   name="email">
            <label for="contact" class="mb-2 mr-sm-2">
                   Contact No:
            </label>
            <input type="text" class="form-control mb-2 mr-sm-2"
                   id="contact" placeholder="Enter Contact Number"
                   name="contact">
            <div class="form-check mb-2 mr-sm-2">
                <label class="form-check-label">
                    <input class="form-check-input"
                        type="checkbox"
                        name="remember">
                  Remember me
                </label>
            </div>
            <button type="submit" class="btn bg-success mb-2">
                Submit
            </button>
        </form>
    </div>
</body>
</html>
Output: 
Form Validation: The .was-validated or .needs-validation class in <form> element is used to provide validation before or after submitting the form. The input field with green border indicate valid and red border indicate invalid form content. The .valid-feedback or .invalid-feedback is used to display a notification message to the user before submitting the form.
Example: 
HTML



<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Form</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <h1 class="text-success text-center">GeeksforGeeks</h1>
    <h2 class="text-center">Form Validation</h2>
    <div class="container">
        <form action="#" class="was-validated">
            <div class="form-group">
                <label for="fname">First Name:</label>
                <input type="text" class="form-control" id="fname"
                    placeholder="Enter First Name" name="fname" required>
                <div class="valid-feedback">Valid</div>
                <div class="invalid-feedback">
                    Please fill this field
                </div>
            </div>
            <div class="form-group">
                <label for="lname">Last Name:</label>
                <input type="text" class="form-control" id="lname"
                    placeholder="Enter Last Name" name="lname" required>
                <div class="valid-feedback">Valid</div>
                <div class="invalid-feedback">
                    Please fill this field
                </div>
            </div>
            <div class="form-group">
                <label for="email">Email Id:</label>
                <input type="email" class="form-control" id="email"
                    placeholder="Enter Email Id" name="email" required>
                <div class="valid-feedback">Valid</div>
                <div class="invalid-feedback">
                    Please fill this field
                </div>
            </div>
            <div class="form-group">
                <label for="contact">Contact No:</label>
                <input type="text" class="form-control" id="contact"
                    placeholder="Enter Contact Number" name="contact"
                    required>
                <div class="valid-feedback">Valid</div>
                <div class="invalid-feedback">
                    Please fill this field
                </div>
            </div>
            <div class="form-group form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="checkbox"
                        name="remember" required> I agree
                    <div class="valid-feedback">Valid</div>
                    <div class="invalid-feedback">
                        Please check the checkbox
                    </div>
                </label>
            </div>
            <button type="submit" class="btn bg-success">
                Submit
            </button>
        </form>
    </div>
</body>
</html>
Output: 
Supported Browser:
  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

My Personal Notes
arrow_drop_up
Related Articles
1.
Bootstrap Vertical Forms, Horizontal Forms, Inline Forms
2.
Bootstrap 4 | Custom Forms
3.
Bootstrap-5 Forms
4.
Explain the steps for creating basic or vertical forms using Bootstrap
5.
How to toggle password visibility in forms using Bootstrap-icons ?
6.
How to create forms using Twitter Bootstrap ?
7.
Bootstrap 5 Navbar Forms
8.
Bootstrap 5 Layout Forms
9.
Bootstrap 5 Input group Custom forms
10.
BootStrap 5 Reboot Forms
Previous
Bootstrap 4 | Nav-pills
Next

Bootstrap 4 | Custom Forms
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
Dharmendra_Kumar
@Dharmendra_Kumar
Vote for difficulty





Improved By :
Article Tags :
Report Issue
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!