mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-23 05:33:02 +02:00
Code Issues Releases Wiki Activity

Support floating labels on .form-control-plaintext (#32840)

Browse Source 
* Support floating labels on `.form-control-plaintext`

* Update floating-labels.md

* Apply suggestions from code review

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <otto@github.com>
This commit is contained in:
Sebastian Podjasek
2022-02-08 21:38:29 +01:00
committed by GitHub
parent 4308b67e59
commit 0853778eba
2 changed files with 25 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
site/content/docs/5.1/forms/floating-labels.md
View File

@@ -75,6 +75,21 @@ Other than `.form-control`, floating labels are only available on `.form-select`
</div>
{{< /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 >}}
<div class="form-floating mb-3">
<input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="name@example.com">
<label for="floatingEmptyPlaintextInput">Empty input</label>
</div>
<div class="form-floating mb-3">
<input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="name@example.com" value="name@example.com">
<label for="floatingPlaintextInput">Input with value</label>
</div>
{{< /example >}}
## Layout
When working with the Bootstrap grid system, be sure to place form elements within column classes.