CoreUI Floating label has been created as an extension of Bootstrap Floating label. Floating label is delivered with some new features, variants, and unique design that matches CoreUI Design System requirements.

For more information please visit our official documentation.
Floating labelsBasic example

Wrap a pair of <input class="form-control"> and <label> elements in .form-floating to enable floating labels with Bootstrap’s textual form fields. A placeholder is required on each <input> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element. Also note that the <input> must come first so we can utilize a sibling selector (e.g., ~).

When there’s a value already defined, <label>s will automatically adjust to their floated position.

Form validation styles also work as expected.

Floating labelsTextareas

By default, <textarea>s with .form-control will be the same height as <input>s.

To set a custom height on your <textarea>, do not use the rows attribute. Instead, set an explicit height (either inline or via custom CSS).

Floating labelsSelects

Other than .form-control, floating labels are only available on .form-selects. They work in the same way, but unlike <input>s, they’ll always show the <label> in its floated state.Selects with size and multiple are not supported.

Floating labelsLayout

When working with the CoreUI for Bootstrap grid system, be sure to place form elements within column classes.