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

* 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>

1 files changed, 15 insertions, 0 deletions

diff --git a/site/content/docs/5.1/forms/floating-labels.md b/site/content/docs/5.1/forms/floating-labels.md
index 2ac6752047..a19bbdbfe9 100644
--- a/site/content/docs/5.1/forms/floating-labels.md
+++ b/site/content/docs/5.1/forms/floating-labels.md
@@ -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.