Skip to content
Related Articles

Related Articles

Improve Article
Bootstrap 4 | Forms
  • Last Updated : 31 May, 2019

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:




<!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=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </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 then 576px then the form element will be stacked vertically.



Example:




<!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=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </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:




<!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=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </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:




<!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=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :