跳到主要内容

Floating labels

Create beautifully simple form labels that float over your input fields.

Example

Wrap a <Form.Control> element in <FloatingLabel> to enable floating labels with Bootstrap’s textual form fields. A placeholder is required on each <Form.Control> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element.

结果
Loading...
实时编辑器

Textareas

By default, <textarea>s 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).

结果
Loading...
实时编辑器

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.

结果
Loading...
实时编辑器

Layout

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

结果
Loading...
实时编辑器

Customizing rendering

If you need greater control over the rendering, use the <FormFloating> component to wrap your input and label. Also note that the <Form.Control> must come first so we can utilize a sibling selector (e.g., ~).

结果
Loading...
实时编辑器

API

FormFloating

FloatingLabel