* Bump version to 5.3.0-alpha1 * Dist * Add docs versions updates * Update note in homepage hero Co-authored-by: Mark Otto <markdotto@gmail.com>
6.7 KiB
layout | title | description | group | toc |
---|---|---|---|---|
docs | Floating labels | Create beautifully simple form labels that float over your input fields. | forms | true |
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 >}}
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 >}}
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 >}}
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 >}}
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 >}}
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 >}}
Input groups
Floating labels also support .input-group
.
{{< 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 >}}
Layout
When working with the Bootstrap grid system, be sure to place form elements within column classes.
{{< example >}}
Sass
Variables
{{< scss-docs name="form-floating-variables" file="scss/_variables.scss" >}}