Input fields
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.
Selects
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.
File input
readonly state by definition,
the only difference in style is disabled state.
All disabled styles in selects are sharing same look and feel
with other form elements, such as input fields and file
inputs.
Form helpers
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.
Input icons
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.
Local styling
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.
Custom options
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:
Advanced filters
Additional input types
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.
input type="datetime-local"
input type="date"
input type="month"
input type="time"
input type="week"
input type="number"
input type="email"
input type="url"
input type="search"
input type="tel"
input type="color"
input type="range"
