3e2f9ab237
* v5: Promote floating labels example to component - Adds new .form-floating - Stubs out basics of a docs page - Removes existing Example * Update floating labels to support .form-select, make inputs and selects more consistent - To do this, I made the .form-control and .form-select consistent in min-height vs height - Removed some unused variables now - Updated -color to be the -color because I don't know why this was any different before - Update page to include some examples for layout, validation, and value - Rewrite styles to not modify padding, but instead transform and opacity * Streamline and bulletproof some things - Apply some optimizations from code review - Removed unecessary properties from the label - Add some comments for what properties are required - Move from fixed height for labels to height 100% so we can support textareas - Improve docs a little bit, add ToC * Move some values to variables, switch from scaling font-size to scale, update transforms * Bring over changes from #30966 and add to them to tighten things up * Delete the now unused example images * Fix typo * Allowlist the calc function * Add transform-origin, update transform values * Test out autofill fix * Fix linter issue * Mention it in the migration guide * Bump bundlesize * Add one more variable per review * Shave .25rem off the height Co-authored-by: XhmikosR <xhmikosr@gmail.com>
3.8 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., ~).
This approach works in the new Microsoft Edge built on Chromium and gracefully degrades on older versions.
{{< 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 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.
{{< example >}}
Layout
When working with the Bootstrap grid system, be sure to place form elements within column classes.
{{< example >}}