Forms

Bootstrap provides various form control styles, layout options, and custom components for creating a wide variety of forms.

Below is the basic example of a Bootstrap form controls.

Add .form-control class for textual form controls like <input>s, <select>s, and <textarea>s. It includes styles for appearance, focus state, sizing, and more.

You can also apply custom forms styles <select>s which is described later in this chapter

For file inputs use .form-control-file instead of .form-control.

Customize heights as needed by using classes .form-control-lg and .form-control-sm.

You can also add the readonly boolean attribute on an input element to prevent input's value modification.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Make <input readonly> elements to appear as plain text using the .form-control-plaintext class. It removes the default form field styling and preserves the correct margin and padding.

Add .form-control-range for horizontally scrollable range inputs.

Create a parent element with .form-check. Add checkboxes and radios inside with .form-check-input <label> with .form-check-label.

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked.

Add .form-check-inline to any .form-check to stack checkboxes or radios on the same horizontal row.

Add .position-static to inputs within .form-check when there is no label text.

By default forms will stack vertically because almost all form controls has display: block and width: 100%. But you can customize the form layout using below classes

Add .form-group class to which creates proper grouping of labels, controls, optional help text, and form validation messaging. It applies margin-bottom and can be used with .form-inline as needed.

It can be used with <fieldset>s, <div>s, or nearly any other element.

Create complex forms using grid classes.

You can use .form-row instead of .row which makes the column gutters(spacing) tighter.

More complex layouts can also be created with the grid system.

Create horizontal forms with the grid by adding the .row class to form groups. Add .col-*-* classes to specify the width of labels and controls. Add .col-form-label to <label>s as well which aligns vertically centered with their associated form controls.

Use margin or padding utilities as needed to create perfect alignment.(radio)

Use .col-form-label-sm or .col-form-label-lg to your <label>s or <legend>s to match the size of .form-control-lg and .form-control-sm.

Using grid classes you can make your columns to take up more or less space. For example add specific column classes like .col-7 and for remaining columns add .cols equally split.

Add .col-auto instead of .col so that columns only take up as much space as needed based on the contents.

You can also use .col-auto with size-specific column classes.

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

You can also create custom selects and form controls.

Use .form-text to create block level help text. For inline help text use any inline HTML element and utility classes like .text-muted.

Use any typical inline HTML element like <small>, <span> etc.

Add the disabled boolean attribute on an input to prevent user interactions.

Use custom validation styles provided by bootstrap, as native browser default validation messages are not consistently exposed to assistive technologies in all browsers.

Here's how form validation works with Bootstrap:

• HTML form validation is applied via CSS's two pseudo-classes, :invalid and :valid. It applies to <input>, <select>, and <textarea> elements.
• Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form>. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).
• To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove the .was-validated class from the <form> again after submission.
• As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation. They do not require a .was-validated parent class.
• Due to constraints in how CSS works, we cannot (at present) apply styles to a <label>that comes before a form control in the DOM without the help of custom JavaScript.
• All modern browsers support the constraint validation API, a series of JavaScript methods for validating form controls.
• Feedback messages may utilize the browser defaults (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.
• You may provide custom validity messages with setCustomValidity in JavaScript.

Before applying custom validation styles disable browser default tooltips by adding the novalidate boolean attribute to <form>.

When you submit, you can see the :invalid and :valid styles applied to your form controls.

Below example uses the browser defaults. When you submit the form below you'll see default validation message style which varies based on the browser.

When you use server side validation, you can indicate invalid and valid form fields with .is-invalid and .is-valid. .invalid-feedback is also supported with these classes.

You can apply form validation styles for custom form controls also.

Tooltips

To show validation messages in tooltip .{valid|invalid}-tooltip classes instead of .{valid|invalid}-feedback classes. Parent element should have position: relative on it for tooltip positioning.

Create custom form elements to replace the browser defaults.

Create a parent element(div) with class .custom-control and additionally add .custom-checkbox for checkbox or .custom-radio for radio. Add input element checkbox/ radio with class .custom-control-input and label text with class .custom-control-label

Utilize the :indeterminate pseudo class when manually set via JavaScript/ Jquery as below for custom checkboxes.

$('.your-checkbox').prop('indeterminate', true)

Add the disabled boolean attribute to the <input> checkboxes or radios. Style will be applied automatically.

Create custom <select> menus by adding custom class .custom-select which styles initial appearance. <option>s style cannot be modified due to browser limitations.

Make you selects small or large by adding .custom-select-sm or .custom-select-lg.

The multiple attribute is also supported

The size attribute is also supported

Create cross browser custom <input type="range"> controls with .custom-range.

Range inputs with values set for min and max 0 and 100, respectively.

Range inputs with step value specified. In the example below, the number of steps is doubled using step="0.5".

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

Create custom file input by adding .custom-file to parent container element, .custom-file-input for <input> and .custom-file-label for text label.

The :lang() pseudo-class is used to allow for translation of the “Browse” text into other languages. Override or add entries to the $custom-file-text Sass variable with the relevant language tag and localized strings. The English strings can be customized the same way.

In the below example Spanish translation is added(Spanish's language code is es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

Here's lang(es) in action on the custom file input for a Spanish translation: