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.

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.

Sizing

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

Readonly

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>
Readonly plain text

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.

Range Inputs

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

Checkboxes and radios

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

Default Style

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

Default checkbox
Default radio
Inline

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

Inline Checkbox
Inline radio
Without labels

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

Note

Note For assistive technologies provide some form of label using aria-label.

Layout

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

Form groups

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.

Form grid

Create complex forms using grid classes.

Form row

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.

Horizontal form

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)

Horizontal form label sizing

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.

Column sizing

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.

Auto-sizing

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.

Inline forms

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.

Note
Alternatives to hidden labels

To support assistive technologies such as screen readers you must include a label for every input hide the labels using the .sr-only class. Alternatively you can use aria-label, aria-labelledby or titleattribute.

Help text

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

Note
Accessibility
Associating help text with form controls

Help text should be explicitly associated with the form control it relates to using the aria-describedby attribute which will announce this help text when the user focuses or enters the control with screen readers.

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

Disabled forms

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

Validation

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

How it works

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.
Custom styles

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.

Browser defaults

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.

Server side

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.

Supported elements

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.

Custom forms

Create custom form elements to replace the browser defaults.

Checkboxes and radios

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

Checkboxes

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

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

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

Select menu

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

Range

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">
File browser

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

Translating or customizing the strings

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:

Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents