Forms are made to let the user send data through input fields. To design it, wrap your label and input inside a div
To design your inputs, simply add the
.form-control class on it.
Readonly and disabled inputs are designed too.
Textareas are usefull to let the user send large messages.
To use it, add the same
.form-control class as before.
Initially, our textareas are not resizable horizontally, and the max and min heights are defined. To change it, you can use
Create an inline form by using the
.form-inline class on the
A helper text is usefull to show informations about what the input should recieve.
To create a helper text, add a span with the
.form-helper class below your input.
Input prefix & suffix
To use forms prefixes and/or forms suffixes, you have to wrap your input inside a
.form-group class element.
Then, add anything inside this form-group.
You can add multiple prefixes and/or suffixes
Custom input prefix & suffix
You can custom the content to match the design you want using our utilities classes.
|CSS Variable||Default value||Description|
||0.75rem||Form helper font-size.|
||1px solid #bbb8b8||Form control border.|
||#c8c8c8||Disabled form background color.|
||#787878||Disabled form text color.|