BOOTSTRAP 4 FORMS

Bootstrap 4’s Default Settings

Form controls automatically receive some global styling with Bootstrap:

All textual <input><textarea>, and <select> elements with class .form-control have a width of 100%.

Bootstrap 4 Form Layouts

Bootstrap provides two types of form layouts:

  • Stacked (full-width) form
  • Inline form

Bootstrap 4 Stacked Form

Email :

Password :

Remember me

The following example creates a stacked form with two input fields, one checkbox, and a submit button.

Add a wrapper element with .form-group, around each form control, to ensure proper margins:

Example

<form action="/action_page.php">

<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

Bootstrap Inline Form





In an inline form, all of the elements are inline and left-aligned.

Note: This only applies to forms within viewports that are at least 576px wide. On screens smaller than 576px, it will stack horizontally.

Additional rule for an inline form:

Add class .form-inline to the <form> element

The following example creates an inline form with two input fields, one checkbox, and one submit button:

Example

<form class="form-inline" action="/action_page.php">

<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

Inline Form with Utilities

The inline form above feels “compressed”, and will look much better with Bootstrap’s spacing utilities. The following example adds a right margin (.mr-sm-2) to each input on all devices (small and up). And a margin-bottom class (.mb-2) is used to style the input field when it breaks (goes from horizontal to vertical due to not enough space/width):





Example

<form class="form-inline" action="/action_page.php">

<label for="email" class="mr-sm-2">Email address:</label>
<input type="email" class="form-control mb-2 mr-sm-2" id="email">
<label for="pwd" class="mr-sm-2">Password:</label>
<input type="password" class="form-control mb-2 mr-sm-2" id="pwd">
<div class="form-check mb-2 mr-sm-2">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Bootstrap 4 Custom Forms

Bootstrap 4 comes with customized form elements, that are meant to replace browser defaults:

This image has an empty alt attribute; its file name is Screenshot-178.png

Custom Checkbox

To create a custom checkbox, wrap a container element, like <div>, with a class of .custom-control and .custom-checkbox around the checkbox. Then add the .custom-control-input to the input with type=”checkbox”.

Bootstrap 4’s Default Settings

Form controls automatically receive some global styling with Bootstrap:

All textual <input><textarea>, and <select> elements with class .form-control have a width of 100%.

Bootstrap 4 Form Layouts

Bootstrap provides two types of form layouts:

  • Stacked (full-width) form
  • Inline form

Bootstrap 4 Stacked Form





The following example creates a stacked form with two input fields, one checkbox, and a submit button.

Add a wrapper element with .form-group, around each form control, to ensure proper margins:

Example

<form action="/action_page.php">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Bootstrap Inline Form





In an inline form, all of the elements are inline and left-aligned.

Note: This only applies to forms within viewports that are at least 576px wide. On screens smaller than 576px, it will stack horizontally.

Additional rule for an inline form:

Add class .form-inline to the <form> element

The following example creates an inline form with two input fields, one checkbox, and one submit button:

Example

<form class="form-inline" action="/action_page.php">
  <label for="email">Email address:</label>
  <input type="email" class="form-control" id="email">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Inline Form with Utilities

The inline form above feels “compressed”, and will look much better with Bootstrap’s spacing utilities. The following example adds a right margin (.mr-sm-2) to each input on all devices (small and up). And a margin-bottom class (.mb-2) is used to style the input field when it breaks (goes from horizontal to vertical due to not enough space/width):





Example

<form class="form-inline" action="/action_page.php">
  <label for="email" class="mr-sm-2">Email address:</label>
  <input type="email" class="form-control mb-2 mr-sm-2" id="email">
  <label for="pwd" class="mr-sm-2">Password:</label>
  <input type="password" class="form-control mb-2 mr-sm-2" id="pwd">
  <div class="form-check mb-2 mr-sm-2">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Bootstrap 4 Custom Forms

Bootstrap 4 comes with customized form elements, that are meant to replace browser defaults:

Screenshot 178

Custom Checkbox

To create a custom checkbox, wrap a container element, like <div>, with a class of .custom-control and .custom-checkbox around the checkbox. Then add the .custom-control-input to the input with type=”checkbox”.

Tip: If you use labels for accompanying text, add the .custom-control-label class to it. Note that the value of the for attribute should match the id of the checkbox:

Custom checkbox

Default checkbox

Example

<form>
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck"name="example1">
    <label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
  </div>
</form>

Custom Switch

To create a custom “toggle switch”, wrap a container element, like <div>, with a class of .custom-control and .custom-switch around a checkbox. Then add the .custom-control-input class to the checkbox:

Toogel Me

Example

<form>
  <div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="switch1">
    <label class="custom-control-label" for="switch1">Toggle me</label>
  </div>
</form>

Custom Radio buttons

To create a custom radio button, wrap a container element, like <div>, with a class of .custom-control and .custom-radio around the radio button. Then add the .custom-control-input to the input with type=”radio”.

Tip: If you use labels for accompanying text, add the .custom-control-label class to it. Note that the value of the for attribute should match the id of the radio:

Default radio

Example

<form>
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customRadio" name="example1"value="customEx">
    <label class="custom-control-label" for="customRadio">Custom radio</label>
  </div> 
</form>

Inline Custom Form Controls

If you want the custom form controls to sit side by side (inline), add the .custom-control-inline to the wrapper/container:

Default radio

Example

<form>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio" name="example"value="customEx">
    <label class="custom-control-label" for="customRadio">Custom radio 1</label>
  </div>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio2" name="example"value="customEx">
    <label class="custom-control-label" for="customRadio2">Custom radio 2</label>
  </div> 
</form>

Custom Select Menu

To create a custom select menu, add the .custom-select class to the <select> element:



Example

<form>
  <select name="cars" class="custom-select">
    <option selected>Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
</form>

Custom Select Menu Size

Use the .custom-select-sm class to create a small select menu and the .custom-select-lg class for a large one:



Example

<form>
  <!-- Small -->
  <select name="cars" class="custom-select-sm">
    <option selected>Small Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>

  <!-- Large -->
  <select name="cars" class="custom-select-lg">
    <option selected>Large Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
</form>

Custom Range

To create a custom select menu, add the .custom-range class to an input with type=”<range>”:

Example

<form>
  <label for="customRange">Custom range</label>
  <input type="range" class="custom-range" id="customRange" name="points1">
</form>

Custom File Upload

To create a custom file upload, wrap a container element with a class of .custom-file around the input with type=”file”. Then add the .custom-control-input to it.

Tip: If you use labels for accompanying text, add the .custom-control-label class to it. Note that the value of the for attribute should match the id of the checkbox:

Example

<form>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
  </div>
</form>

Leave a Comment