General inputs

Be sure to use an appropriate type attribute on all inputs (e.g., code email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

A block of help text that breaks onto a new line and may extend beyond one line.

General inputs (disabled)

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter. By default, browsers will treat all native form controls (<input>, <select> and <button> elements) inside a <fieldset disabled> as disabled, preventing both keyboard and mouse interactions on them.

A block of help text that breaks onto a new line and may extend beyond one line.

Floating Labels

Floating Labels (Disabled)

Input Sizes

Set heights using classes like .form-control-lg, .form-control-sm and for custom inputs, you can use .form-select-sm, .form-select-lg, and set widths using grid column classes like .col-lg-*
Check out how it works

Altering with utilities

You can easily alter the border, border-radius and padding using the utility classes.