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, Checkboxes 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.