From cf9454caa00872899215603e5e036d9a824b1b11 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Sat, 24 Dec 2022 18:37:22 +0200
Subject: Release v5.3.0-alpha1 (#37661)

* Bump version to 5.3.0-alpha1

* Dist

* Add docs versions updates

* Update note in homepage hero

Co-authored-by: Mark Otto <markdotto@gmail.com>
---
 site/content/docs/5.3/forms/floating-labels.md | 180 +++++++++++++++++++++++++
 1 file changed, 180 insertions(+)
 create mode 100644 site/content/docs/5.3/forms/floating-labels.md

(limited to 'site/content/docs/5.3/forms/floating-labels.md')

diff --git a/site/content/docs/5.3/forms/floating-labels.md b/site/content/docs/5.3/forms/floating-labels.md
new file mode 100644
index 000000000..6b33fb67b
--- /dev/null
+++ b/site/content/docs/5.3/forms/floating-labels.md
@@ -0,0 +1,180 @@
+---
+layout: docs
+title: Floating labels
+description: Create beautifully simple form labels that float over your input fields.
+group: forms
+toc: 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., `~`).
+
+{{< example >}}
+<div class="form-floating 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">
+  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
+  <label for="floatingPassword">Password</label>
+</div>
+{{< /example >}}
+
+When there's a `value` already defined, `<label>`s will automatically adjust to their floated position.
+
+{{< example >}}
+<form class="form-floating">
+  <input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com">
+  <label for="floatingInputValue">Input with value</label>
+</form>
+{{< /example >}}
+
+Form validation styles also work as expected.
+
+{{< example >}}
+<form class="form-floating">
+  <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="name@example.com" value="test@example.com">
+  <label for="floatingInputInvalid">Invalid input</label>
+</form>
+{{< /example >}}
+
+## Textareas
+
+By default, `<textarea>`s with `.form-control` will be the same height as `<input>`s.
+
+{{< example >}}
+<div class="form-floating">
+  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
+  <label for="floatingTextarea">Comments</label>
+</div>
+{{< /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 >}}
+<div class="form-floating">
+  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
+  <label for="floatingTextarea2">Comments</label>
+</div>
+{{< /example >}}
+
+## Selects
+
+Other than `.form-control`, floating labels are only available on `.form-select`s. They work in the same way, but unlike `<input>`s, they'll always show the `<label>` in its floated state. **Selects with `size` and `multiple` are not supported.**
+
+{{< example >}}
+<div class="form-floating">
+  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+  <label for="floatingSelect">Works with selects</label>
+</div>
+{{< /example >}}
+
+## Disabled
+
+Add the `disabled` boolean attribute on an input, a textarea or a select to give it a grayed out appearance, remove pointer events, and prevent focusing.
+
+{{< example >}}
+<div class="form-floating mb-3">
+  <input type="email" class="form-control" id="floatingInputDisabled" placeholder="name@example.com" disabled>
+  <label for="floatingInputDisabled">Email address</label>
+</div>
+<div class="form-floating mb-3">
+  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled" disabled></textarea>
+  <label for="floatingTextareaDisabled">Comments</label>
+</div>
+<div class="form-floating mb-3">
+  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2Disabled" style="height: 100px" disabled></textarea>
+  <label for="floatingTextarea2Disabled">Comments</label>
+</div>
+<div class="form-floating">
+  <select class="form-select" id="floatingSelectDisabled" aria-label="Floating label disabled select example" disabled>
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+  <label for="floatingSelectDisabled">Works with selects</label>
+</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 >}}
+
+## 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.
+
+{{< example >}}
+<div class="row g-2">
+  <div class="col-md">
+    <div class="form-floating">
+      <input type="email" class="form-control" id="floatingInputGrid" placeholder="name@example.com" value="mdo@example.com">
+      <label for="floatingInputGrid">Email address</label>
+    </div>
+  </div>
+  <div class="col-md">
+    <div class="form-floating">
+      <select class="form-select" id="floatingSelectGrid">
+        <option selected>Open this select menu</option>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+      </select>
+      <label for="floatingSelectGrid">Works with selects</label>
+    </div>
+  </div>
+</div>
+{{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="form-floating-variables" file="scss/_variables.scss" >}}
-- 
cgit v1.2.3


From c57be446869e25cea88b585af789a83817d45cd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Mon, 13 Mar 2023 11:41:27 +0100
Subject: Docs: consistent usage of CSS sections (#38175)

---
 site/content/docs/5.3/forms/floating-labels.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'site/content/docs/5.3/forms/floating-labels.md')

diff --git a/site/content/docs/5.3/forms/floating-labels.md b/site/content/docs/5.3/forms/floating-labels.md
index 6b33fb67b..a65a85797 100644
--- a/site/content/docs/5.3/forms/floating-labels.md
+++ b/site/content/docs/5.3/forms/floating-labels.md
@@ -173,8 +173,8 @@ When working with the Bootstrap grid system, be sure to place form elements with
 </div>
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Variables
+### Sass variables
 
 {{< scss-docs name="form-floating-variables" file="scss/_variables.scss" >}}
-- 
cgit v1.2.3


From cc5a8a903612e9c0de92238ac17dcb083efce138 Mon Sep 17 00:00:00 2001
From: louismaximepiton <louismaxime.piton@orange.com>
Date: Mon, 17 Jul 2023 12:08:24 +0200
Subject: fix

---
 site/content/docs/5.3/forms/floating-labels.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'site/content/docs/5.3/forms/floating-labels.md')

diff --git a/site/content/docs/5.3/forms/floating-labels.md b/site/content/docs/5.3/forms/floating-labels.md
index a65a85797..9a390e4ff 100644
--- a/site/content/docs/5.3/forms/floating-labels.md
+++ b/site/content/docs/5.3/forms/floating-labels.md
@@ -89,7 +89,7 @@ Add the `disabled` boolean attribute on an input, a textarea or a select to give
   <label for="floatingTextareaDisabled">Comments</label>
 </div>
 <div class="form-floating mb-3">
-  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2Disabled" style="height: 100px" disabled></textarea>
+  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2Disabled" style="height: 100px" disabled>Disabled textarea with some text inside</textarea>
   <label for="floatingTextarea2Disabled">Comments</label>
 </div>
 <div class="form-floating">
-- 
cgit v1.2.3