Form / Components

Required

Add the .required class to an input's <label> to show that the input is mandatory.

Help text

Bootstrap 4 will have no official help text classes, so I recommend do not use the .help-block class. Instead, use Bootstrap utility classes like .text-muted.

Inline text can use any typical inline HTML element (be it a <small>, <span>, or something else).

Some inline text with a small tag looks like this.

Block help text—for below inputs or for longer lines of help text—can be easily achieved with a <p>.

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

Loading

To show a loading indicator, add the .form-loading class to a <form> element.

The .form-loading class sets position: relative on the form.

example@mail.com

Please do not use too weak password.

Show an inverted loading indicator, by adding the .form-loading-inverted class to the .form-loading.

Success

Warning

Error

State icon

Feedback icon

Message

Some success message.
Some warning message.
Some error message.

Message - light

Some success message.
Some warning message.
Some error message.

Message - dark

Some success message.
Some warning message.
Some error message.