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 Form Controls

Bootstrap 4 natively supports the most common form controls mainly:

  • input
  • select
  • textarea
  • checkbox
  • radio

Bootstrap 4 Form Controls

Bootstrap 4 supports all the HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Use the .form-control class to style inputs with full-width, proper padding, focus state, sizing, and more.

Run code

The .form-group class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging.

Bootstrap 4 Checkboxes

Checkboxes are for selecting one or several options in a list.

Checkboxes are improved upon with the help of .form-check class.

Use the .form-check-label class to label elements, and .form-check-input to style checkboxes properly.

Run code

Add the .form-check-inline to any .form-check if you want the checkboxes to appear on the same horizontal row:

Run code

Bootstrap 4 Radio Buttons

Radio Buttons are for selecting one option in a list.

The following example contains three radio buttons. The first option is checked and the last option is disabled:

Run code

As with checkboxes, use the .form-check-inline class if you want the radio buttons to appear on the same horizontal row:

Run code

Bootstrap 4 Form Control Sizing

Change the size of the form control with .form-control-lg or .form-control-sm.

Run code
Run code

Form Control with Plain Text

If you want to have <input readonly> elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.

Run code

Helper Text

Block-level help text in forms can be created using .form-text class.

We'll never share your email with anyone else.
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, or special characters.
Run code

Form Control File and Range

Add the .form-control-range class to <input type="range"> to style a range control field with full-width.

Add the .form-control-file class to <input type="file"> to style a file field with full-width.

Run code

Disabled Forms

Add the disabled attribute to a <fieldset> to disable all the controls within.

Run code