From: Ryan Mortier <ryan@mortier.ca>
Date: Mon, 14 Nov 2022 17:54:40 +0000 (-0500)
Subject: Update input-group.md with form text example (#37406)
X-Git-Tag: v5.3.0-alpha1~63
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=46a7035ab2869789fcb737093f29a7b6403b213b;p=thirdparty%2Fbootstrap.git

Update input-group.md with form text example (#37406)

* Update input-group.md with form text example

This updated example shows where to correctly put form text (i.e. not inside the input group).

* Fix markup

* Update input-group.md

Co-authored-by: Mark Otto <markd.otto@gmail.com>
---

diff --git a/site/content/docs/5.2/forms/input-group.md b/site/content/docs/5.2/forms/input-group.md
index 00e9eeec9a..01be5cffed 100644
--- a/site/content/docs/5.2/forms/input-group.md
+++ b/site/content/docs/5.2/forms/input-group.md
@@ -21,10 +21,13 @@ Place one add-on or button on either side of an input. You may also place one on
   <span class="input-group-text" id="basic-addon2">@example.com</span>
 </div>
 
-<label for="basic-url" class="form-label">Your vanity URL</label>
-<div class="input-group mb-3">
-  <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
-  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
+<div class="mb-3">
+  <label for="basic-url" class="form-label">Your vanity URL</label>
+  <div class="input-group">
+    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
+    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
+  </div>
+  <div class="form-text">Example help text goes outside the input group.</div>
 </div>
 
 <div class="input-group mb-3">