Bootstrap 4 Forms


Basic Form

We can change the style of Html's input elements by bootstrap form class. In order to use it, we need to use a number of .form class properties.

Example code

<form>
<input type="email" name="username" class="form-control mb-2" placeholder="Email">
<input type="password" name="password" class="form-control mb-2" placeholder="Password">
<input type="submit" name="submit" class="btn btn-primary mb-2" value="Submit">
</form>

Form Layout

There are two types of bootstrap form layouts. They are -

  1. Stacked form/Full-width form
  2. Inline form

Stacked form

Stacked form refers to the full-width form. width = 100% of all input elements of html in this form to use .form-control class. Each form-control element has a wrapper element with .form-group. The following is an example stacked form -

Example code

<form>
<div class="form-group">
<label>Username</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input type="checkbox" name="checkbox" class="form-check-input"> Remember me
</label>
</div>
<button class="btn btn-primary">Login</button>
</form>

Inline Form

Inline form means one line will be the whole form. It will always start from the left side. When the screen size is smaller than 576px it will stack horizontally. To use it, you need to add the .form-inline class to the <form> element.

Example code

<form class="form-inline">
<label class="mr-sm-2">Username:</label>
<input type="text" name="" class="form-control mr-sm-2">
<label class="mr-sm-2">Password:</label>
<input type="password" name="" class="form-control mr-sm-2">
<div class="form-group form-check mr-sm-2">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name=""> Remember me
</label>
</div>
<button class="btn btn-primary mr-sm-2">Login</button>
</form>

Form Within Grid/Row

If the form is to be inserted into the grid, the .row and .col classes will be required.

Example code

<form>
<div class="row">
<div class="col-6">
<input type="text" class="form-control" placeholder="Email" name="">
</div>
<div class="col-6">
<input type="password" class="form-control" placeholder="Password" name="">
</div>
</div>
</form>

If you want to further reduce the space between the two forms, you need to use the .form-row class.

Example code

<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="Email" name="">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="Password" name="">
</div>
</div>
</form>

Form Validation

To validate the form on Bootstrap, follow the steps below:

  1. You must first add a .was-validated class inside the <form> element.
  2. Then you need to add disabled attributes to each .form-control element.
  3. Then create a <div> and add a .valid-feedback class to it and write what the valid message will show the user.
  4. In the same way create a <div> and add a .invalid-feedback class to it and write down what invalid message the user will see.
Valid
Please enter your username.
Valid
Please enter your password.

Example code

<div class="container border p-3">
<form class="was-validated">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" name="" required>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">Please enter your username.</div>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="" required>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">Please enter your password.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="" required> Remember me
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button class="btn btn-primary">Submit</button>
</form>
</div>