mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-20 12:21:35 +02:00
Code Issues Releases Wiki Activity

Support input groups in floating forms (#36759)

Browse Source 
* Support input groups in floating forms

* Update bundlewatch

Co-authored-by: 719media <ben@719media.com>
This commit is contained in:
Mark Otto
2022-07-17 20:50:41 -07:00
committed by GitHub
parent 6d101b15a4
commit 71cbb88f09
3 changed files with 45 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
site/content/docs/5.2/forms/floating-labels.md
View File

@@ -90,6 +90,35 @@ Floating labels also support `.form-control-plaintext`, which can be helpful for
</div>
{{< /example >}}
## Input groups
Floating labels also support `.input-group`.
{{< example >}}
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<div class="form-floating">
<input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
<label for="floatingInputGroup1">Username</label>
</div>
</div>
{{< /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 >}}
<div class="input-group has-validation">
<span class="input-group-text">@</span>
<div class="form-floating is-invalid">
<input type="text" class="form-control is-invalid" id="floatingInputGroup2" placeholder="Username" required>
<label for="floatingInputGroup2">Username</label>
</div>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
{{< /example >}}
## Layout
When working with the Bootstrap grid system, be sure to place form elements within column classes.