Bootstrap 4 | Forms

12 May, 2022
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-fluit">        <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
ysachin2314
sahilintern
simmytarika5
Bootstrap-4
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.