Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Forms

Bootstrap 4 Form Layouts

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

  • Stacked form (full-width)
  • Inline form

Bootstrap 4 Stacked Form

The stacked form creates input fields and submit button in stacked format.

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

We'll never share your email with anyone else.

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

Run code

Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

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

You will learn more about form controls in the next chapter.


Bootstrap 4 Inline Form

Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row:

Note: Controls only appear inline in viewports that are at least 576px wide. On screens smaller than 576px, it will stack horizontally.

You may need to manually address the width and alignment of individual form controls with spacing utilities.

The following example:

  • Adds a right margin (.mr-sm-2) to each input and label on all devices (small and up)
  • Adds a margin bottom class (.mb-2) to style the input field and label
Run code

Bootstrap 4 Form Grid

More complex form layouts can also be created with the grid system:

Run code

The .form-row overrides the default column gutters for tighter and more compact layouts.


Bootstrap 4 Horizontal Form

Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls.

Radios
Checkbox
Run code

Form Validation

Bootstrap 4 Form Validation provides valuable, actionable feedback to your users with HTML5 form validation.

Looks good!
Please fill out this field.
Looks good!
Please fill out this field.
Looks good!
Please fill out this field.
Looks good!
Please fill out this field.
You must agree before submitting.

The .was-validated or .needs-validation class in <form> element is used to provide validation before or after submitting the form.

The .valid-feedback or .invalid-feedback is used to display a notification message to the user before submitting the form.

The input field with green border indicate valid and red border indicate invalid form content.

In the following example, we use .was-validated to indicate what's missing BEFORE submitting the form:

Run code

In the following example, we use .needs-validation, which will add the validation effect AFTER the form has been submitting (if there's anything missing):

Run code