profile-user
  1. Metrica
  2. UI Kit
  3. Form Elements

Form Elements

Textual inputs

Here are examples of .form-control applied to each textual HTML5 <input> type.

Example help text that remains unchanged.
Example help text that remains unchanged.
Example help text that remains unchanged.

Basic Form

Basic example to demonstrate Bootstrap’s form styles.

We'll never share your email with anyone else.

Horizontal form

Be sure to use .col-form-label-sm or .col-form-label-lg to your <label>s or <legend>s to correctly follow the size of .form-control-lg and .form-control-sm.

Custom styles

Custom stylr example.

Inline Form

Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states..

Input Size

Set heights using classes like .form-control-lg and .form-control-sm.

File browser

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.

Here’s lang(es) in action on the custom file input for a Spanish translation:

Form controls

Basic example to demonstrate Bootstrap’s form styles.

Range

Create custom <input type="range"> controls with .custom-range.

Range Inputs

Set horizontally scrollable range inputs using .form-control-range.

Switches

A switch has the markup of a custom checkbox but uses the .custom-switch class to render a toggle switch. Switches also support the disabled attribute.

Checkboxs

For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.

Radios

For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.

Bootstrap Supported elements

Our example forms show native textual <input>s above, but form validation styles are available for our custom form controls, too.

Example invalid feedback text
More example invalid feedback text
Example invalid custom select feedback
Example invalid custom file feedback

Validation Form Server side

We recommend using client side validation, but in case you require server side, you can indicate invalid and valid form fields with .is-invalid and .is-valid. Note that .invalid-feedback is also supported with these classes.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.

Input groups Static

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

.00
0.00
With textarea
First and last name

Input groups Buttons

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

© 2019 - 2020 Metrica Crafted with by Mannatthemes