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., ~).
{ {< example >} }
{ {< /example >} }
When there's a value already defined, <label>s will automatically adjust to
their floated position.
{ {< example >} }
{ {< /example >} }
Form validation styles also work as expected.
{ {< example >} }
{ {< /example >} }
Textareas#
By default, <textarea>s with .form-control will be the same height as
<input>s.
{ {< example >} }
{ {< /example >} }
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).
{ {< example >} }
{ {< /example >} }
Selects#
Other than .form-control, floating labels are only available on .form-select
s. 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.
{ {< example >} }
{ {< /example >} }
Disabled#
Add the disabled boolean attribute on an input, a textarea or a select to give
it a grayed out appearance, remove pointer events, and prevent focusing.
{ {< example >} }
{ {< /example >} }
Readonly plaintext#
Floating labels also support .form-control-plaintext, which can be helpful for
toggling from an editable <input> to a plaintext value without affecting the
page layout.
{ {< example >} }
{ {< /example >} }
Input groups#
Floating labels also support .input-group.
{ {< example >} }
{ {< /example >} }
When using .input-group and .form-floating along with form validation, the
-feedback should be placed outside of the .form-floating, but inside of the
.input-group. This means that the feedback will need to be shown using
javascript.
{ {< example >} }
{ {< /example >} }
Layout#
When working with the Bootstrap grid system, be sure to place form elements within column classes.
{ {< example >} }
{ {< /example >} }
CSS#
Sass variables#
{ { < scss-docs name="form-floating-variables" file="scss/_variables.scss" }}