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.
.form-control will be the same height as
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).
.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
multiple are not supported.
When working with the CoreUI for Bootstrap grid system, be sure to place form elements within column classes.