Basic Elements
Input Example
Input Sizing
Use form-control-lg class to set large
size input and Use
form-control-sm class to set small size
input. No class is needed for default size input.
File Input
Use input attribute
with type="file" tag for
default file input.
Use multiple attribute within
the input attribute to select multiple
files.
Use disabled attribute within
the input attribute to disable the file
input.
File Input Sizing
Use form-control-sm class
within the form-control class to set
a small size file input.
Use form-control class
and type="file" attribute
within the input attribute to set a default
size file input.
Use form-control-lg class
within the form-control class to set
a large size file input.
Input Group
Basic example
Use input-group class to div element
which contains input attribute to wrap a default
input in the group.
Wrapping
Input groups wrap by default via flex-wrap: wrap
in order to accommodate custom form field
validation within an input group. You may
disable this with flex-nowrap class.
Input Group Sizing
Use input-group-sm class to set a small
size input group and
input-group-lg class to input-group class
to set a large size input group respectively. no such
class is required for a default size input group.
Multiple Inputs
While multiple <input>s are
supported visually, validation styles are only
available for input groups with a single
<input>.
Buttons, Checkboxs and Radios Group
Use any checkbox, radio, or button option
within an input group’s addon instead of
text. We recommend adding mt-0
class to the
form-check-input when there’s no
visible text next to the input.
Buttons with dropdowns
You can use a button with the dropdown toggle to set the file input group.
Custom Forms
Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.
Select
File Input