2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-11 18:02:28 +03:00

Add option for always visible floating labels

This commit is contained in:
Mark Otto
2022-04-01 15:13:01 -07:00
parent 33992b7d5b
commit 36ee50fa84
2 changed files with 52 additions and 10 deletions
@@ -90,6 +90,21 @@ Floating labels also support `.form-control-plaintext`, which can be helpful for
</div>
{{< /example >}}
## Always floating
Make any `.form-control` always use a floating label with visible placeholder with the `.form-floating-always` modifier class. Visible placeholders use the default input `color` and lighten to the placeholder color on focus. This matches them with other floating labels built with plaintext inputs and selects.
{{< example >}}
<div class="form-floating form-floating-always mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating form-floating-always">
<input type="password" class="form-control" id="floatingPassword" placeholder="••••••••">
<label for="floatingPassword">Password</label>
</div>
{{< /example >}}
## Layout
When working with the Bootstrap grid system, be sure to place form elements within column classes.