Examples of standard form controls supported in an example form layout. Individual form controls automatically receive some global styling set by .form-control class. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in div container and add .mb-3 for optimum spacing. Labels in horizontal form require .col-form-label class for proper spacing.

Demo of single/multiple selects and datalist combo box. Single and multiple selects require .form-select class for consistent cross browser styling. Input with corresponding datalist element requires regular .form-control class, since it's a text input that acts as combo select and allows you to type, select and type & select. More info about datalist can be found here.

Block-level or inline-level form text helpers. Form text below inputs can be styled with .form-text or .badge classes. If a block-level element will be used, a top margin is added for easy spacing from the inputs above. Inline text can use any typical inline HTML element (be it a <span>, <small>, or something else) with nothing more than the same class.

Form icon helpers. Can be user with any icon format - icon font, image, HTML symbol or SVG. Icon helpers are not supported in selects, textareas and file inputs due to specifics of custom styling. Images and SVG's require manual sizing and icon font (default) automatically scales up or down depending on input size. Spinners are also supported in various sizes.

Input fields support all available text options via available helper classes. Just add any text class to elements with .form-control or .form-select class, e.g. <class="form-control text-uppercase"> to apply custom text styling. You can also change text alignment, input shape and text/border/background color. Examples below demonstrate some of the options. For all available utility classes, refer to this page.

Form fields can be mixed with JS and other components to provide additional functionality in certain use cases. You can add tooltips, popovers, floating buttons and change their behaviour (e.g. trigger tooltip on hover of focus) simply by adding elements with utility classes or calling JS components with data attributes. Here are some examples:

Examples of additional input types to demonstrate how global styling is applied to them. All text input fields require our global .form-control class for consistent style and some inputs have their own classes: .form-range for range input and a combination of .form-control.form-control-color classes for color picker. It is strongly recommended to use content specific input type (e.g. search for search functionality, email for email inputs, etc) to trigger relevant keyboards on mobile devices.