From 85b12549ecff83f866588394ecff747e69567bc4 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Thu, 19 Dec 2019 15:28:40 +0100
Subject: Simplify input groups by dropping `.input-group-prepend` and
 `.input-group-append`

---
 site/content/docs/4.3/components/button-group.md   |   8 +-
 site/content/docs/4.3/components/navbar.md         |   4 +-
 site/content/docs/4.3/examples/checkout/index.html |  10 +-
 site/content/docs/4.3/forms/input-group.md         | 222 +++++++++------------
 site/content/docs/4.3/forms/layout.md              |  12 +-
 site/content/docs/4.3/forms/validation.md          |  16 +-
 site/content/docs/4.3/migration.md                 |   1 +
 7 files changed, 104 insertions(+), 169 deletions(-)

(limited to 'site/content')

diff --git a/site/content/docs/4.3/components/button-group.md b/site/content/docs/4.3/components/button-group.md
index b4c8543fc..3ec0db240 100644
--- a/site/content/docs/4.3/components/button-group.md
+++ b/site/content/docs/4.3/components/button-group.md
@@ -60,9 +60,7 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
     <button type="button" class="btn btn-secondary">4</button>
   </div>
   <div class="input-group">
-    <div class="input-group-prepend">
-      <div class="input-group-text" id="btnGroupAddon">@</div>
-    </div>
+    <div class="input-group-text" id="btnGroupAddon">@</div>
     <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
   </div>
 </div>
@@ -75,9 +73,7 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
     <button type="button" class="btn btn-secondary">4</button>
   </div>
   <div class="input-group">
-    <div class="input-group-prepend">
-      <div class="input-group-text" id="btnGroupAddon2">@</div>
-    </div>
+    <div class="input-group-text" id="btnGroupAddon2">@</div>
     <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
   </div>
 </div>
diff --git a/site/content/docs/4.3/components/navbar.md b/site/content/docs/4.3/components/navbar.md
index bc3c606d7..4ae3dddc4 100644
--- a/site/content/docs/4.3/components/navbar.md
+++ b/site/content/docs/4.3/components/navbar.md
@@ -249,9 +249,7 @@ Input groups work, too. If your navbar is an entire form, or mostly form, you ca
 <nav class="navbar navbar-light bg-light">
   <form class="container-fluid">
     <div class="input-group">
-      <div class="input-group-prepend">
-        <span class="input-group-text" id="basic-addon1">@</span>
-      </div>
+      <span class="input-group-text" id="basic-addon1">@</span>
       <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
     </div>
   </form>
diff --git a/site/content/docs/4.3/examples/checkout/index.html b/site/content/docs/4.3/examples/checkout/index.html
index bf65f9fbd..94f89db72 100644
--- a/site/content/docs/4.3/examples/checkout/index.html
+++ b/site/content/docs/4.3/examples/checkout/index.html
@@ -59,9 +59,7 @@ body_class: "bg-light"
       <form class="card p-2">
         <div class="input-group">
           <input type="text" class="form-control" placeholder="Promo code">
-          <div class="input-group-append">
-            <button type="submit" class="btn btn-secondary">Redeem</button>
-          </div>
+          <button type="submit" class="btn btn-secondary">Redeem</button>
         </div>
       </form>
     </div>
@@ -88,11 +86,9 @@ body_class: "bg-light"
           <div class="col-12">
             <label for="username">Username</label>
             <div class="input-group">
-              <div class="input-group-prepend">
-                <span class="input-group-text">@</span>
-              </div>
+              <span class="input-group-text">@</span>
               <input type="text" class="form-control" id="username" placeholder="Username" required>
-              <div class="invalid-feedback w-100">
+            <div class="invalid-feedback">
                 Your username is required.
               </div>
             </div>
diff --git a/site/content/docs/4.3/forms/input-group.md b/site/content/docs/4.3/forms/input-group.md
index 2faa6721e..4fde2cf78 100644
--- a/site/content/docs/4.3/forms/input-group.md
+++ b/site/content/docs/4.3/forms/input-group.md
@@ -12,41 +12,29 @@ Place one add-on or button on either side of an input. You may also place one on
 
 {{< example >}}
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <span class="input-group-text" id="basic-addon1">@</span>
-  </div>
+  <span class="input-group-text" id="basic-addon1">@</span>
   <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
 </div>
 
 <div class="input-group mb-3">
   <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
-  <div class="input-group-append">
-    <span class="input-group-text" id="basic-addon2">@example.com</span>
-  </div>
+  <span class="input-group-text" id="basic-addon2">@example.com</span>
 </div>
 
 <label for="basic-url">Your vanity URL</label>
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
-  </div>
+  <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="input-group mb-3">
-  <div class="input-group-prepend">
-    <span class="input-group-text">$</span>
-  </div>
+  <span class="input-group-text">$</span>
   <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
-  <div class="input-group-append">
-    <span class="input-group-text">.00</span>
-  </div>
+  <span class="input-group-text">.00</span>
 </div>
 
 <div class="input-group">
-  <div class="input-group-prepend">
-    <span class="input-group-text">With textarea</span>
-  </div>
+  <span class="input-group-text">With textarea</span>
   <textarea class="form-control" aria-label="With textarea"></textarea>
 </div>
 {{< /example >}}
@@ -57,9 +45,7 @@ Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custo
 
 {{< example >}}
 <div class="input-group flex-nowrap">
-  <div class="input-group-prepend">
-    <span class="input-group-text" id="addon-wrapping">@</span>
-  </div>
+  <span class="input-group-text" id="addon-wrapping">@</span>
   <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
 </div>
 {{< /example >}}
@@ -72,23 +58,17 @@ Add the relative form sizing classes to the `.input-group` itself and contents w
 
 {{< example >}}
 <div class="input-group input-group-sm mb-3">
-  <div class="input-group-prepend">
-    <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
-  </div>
+  <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
   <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
 </div>
 
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
-  </div>
+  <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
   <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
 </div>
 
 <div class="input-group input-group-lg">
-  <div class="input-group-prepend">
-    <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
-  </div>
+  <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
   <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
 </div>
 {{< /example >}}
@@ -99,19 +79,15 @@ Place any checkbox or radio option within an input group's addon instead of text
 
 {{< example >}}
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <div class="input-group-text">
-      <input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input">
-    </div>
+  <div class="input-group-text">
+    <input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input">
   </div>
   <input type="text" class="form-control" aria-label="Text input with checkbox">
 </div>
 
 <div class="input-group">
-  <div class="input-group-prepend">
-    <div class="input-group-text">
-      <input class="form-check-input" type="radio" value="" aria-label="Radio button for following text input">
-    </div>
+  <div class="input-group-text">
+    <input class="form-check-input" type="radio" value="" aria-label="Radio button for following text input">
   </div>
   <input type="text" class="form-control" aria-label="Text input with radio button">
 </div>
@@ -123,9 +99,7 @@ While multiple `<input>`s are supported visually, validation styles are only ava
 
 {{< example >}}
 <div class="input-group">
-  <div class="input-group-prepend">
-    <span class="input-group-text">First and last name</span>
-  </div>
+  <span class="input-group-text">First and last name</span>
   <input type="text" aria-label="First name" class="form-control">
   <input type="text" aria-label="Last name" class="form-control">
 </div>
@@ -137,19 +111,15 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
 
 {{< example >}}
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <span class="input-group-text">$</span>
-    <span class="input-group-text">0.00</span>
-  </div>
+  <span class="input-group-text">$</span>
+  <span class="input-group-text">0.00</span>
   <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
 </div>
 
 <div class="input-group">
   <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
-  <div class="input-group-append">
-    <span class="input-group-text">$</span>
-    <span class="input-group-text">0.00</span>
-  </div>
+  <span class="input-group-text">$</span>
+  <span class="input-group-text">0.00</span>
 </div>
 {{< /example >}}
 
@@ -157,33 +127,25 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
 
 {{< example >}}
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
-  </div>
+  <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
   <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
 </div>
 
 <div class="input-group mb-3">
   <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
-  <div class="input-group-append">
-    <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
-  </div>
+  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
 </div>
 
 <div class="input-group mb-3">
-  <div class="input-group-prepend" id="button-addon3">
-    <button class="btn btn-outline-secondary" type="button">Button</button>
-    <button class="btn btn-outline-secondary" type="button">Button</button>
-  </div>
-  <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons" aria-describedby="button-addon3">
+  <button class="btn btn-outline-secondary" type="button">Button</button>
+  <button class="btn btn-outline-secondary" type="button">Button</button>
+  <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons">
 </div>
 
 <div class="input-group">
-  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
-  <div class="input-group-append" id="button-addon4">
-    <button class="btn btn-outline-secondary" type="button">Button</button>
-    <button class="btn btn-outline-secondary" type="button">Button</button>
-  </div>
+  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons">
+  <button class="btn btn-outline-secondary" type="button">Button</button>
+  <button class="btn btn-outline-secondary" type="button">Button</button>
 </div>
 {{< /example >}}
 
@@ -191,30 +153,46 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
 
 {{< example >}}
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
-    <div class="dropdown-menu">
-      <a class="dropdown-item" href="#">Action</a>
-      <a class="dropdown-item" href="#">Another action</a>
-      <a class="dropdown-item" href="#">Something else here</a>
-      <div role="separator" class="dropdown-divider"></div>
-      <a class="dropdown-item" href="#">Separated link</a>
-    </div>
+  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+    <div role="separator" class="dropdown-divider"></div>
+    <a class="dropdown-item" href="#">Separated link</a>
   </div>
   <input type="text" class="form-control" aria-label="Text input with dropdown button">
 </div>
 
-<div class="input-group">
+<div class="input-group mb-3">
   <input type="text" class="form-control" aria-label="Text input with dropdown button">
-  <div class="input-group-append">
-    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
-    <div class="dropdown-menu">
-      <a class="dropdown-item" href="#">Action</a>
-      <a class="dropdown-item" href="#">Another action</a>
-      <a class="dropdown-item" href="#">Something else here</a>
-      <div role="separator" class="dropdown-divider"></div>
-      <a class="dropdown-item" href="#">Separated link</a>
-    </div>
+  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
+  <div class="dropdown-menu dropdown-menu-right">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+    <div role="separator" class="dropdown-divider"></div>
+    <a class="dropdown-item" href="#">Separated link</a>
+  </div>
+</div>
+
+<div class="input-group">
+  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" href="#">Action before</a>
+    <a class="dropdown-item" href="#">Another action before</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+    <div role="separator" class="dropdown-divider"></div>
+    <a class="dropdown-item" href="#">Separated link</a>
+  </div>
+  <input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons">
+  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
+  <div class="dropdown-menu dropdown-menu-right">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+    <div role="separator" class="dropdown-divider"></div>
+    <a class="dropdown-item" href="#">Separated link</a>
   </div>
 </div>
 {{< /example >}}
@@ -223,36 +201,32 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
 
 {{< example >}}
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <button type="button" class="btn btn-outline-secondary">Action</button>
-    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-      <span class="sr-only">Toggle Dropdown</span>
-    </button>
-    <div class="dropdown-menu">
-      <a class="dropdown-item" href="#">Action</a>
-      <a class="dropdown-item" href="#">Another action</a>
-      <a class="dropdown-item" href="#">Something else here</a>
-      <div role="separator" class="dropdown-divider"></div>
-      <a class="dropdown-item" href="#">Separated link</a>
-    </div>
+  <button type="button" class="btn btn-outline-secondary">Action</button>
+  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
+    <span class="sr-only">Toggle Dropdown</span>
+  </button>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+    <div role="separator" class="dropdown-divider"></div>
+    <a class="dropdown-item" href="#">Separated link</a>
   </div>
   <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
 </div>
 
 <div class="input-group">
   <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
-  <div class="input-group-append">
-    <button type="button" class="btn btn-outline-secondary">Action</button>
-    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-      <span class="sr-only">Toggle Dropdown</span>
-    </button>
-    <div class="dropdown-menu">
-      <a class="dropdown-item" href="#">Action</a>
-      <a class="dropdown-item" href="#">Another action</a>
-      <a class="dropdown-item" href="#">Something else here</a>
-      <div role="separator" class="dropdown-divider"></div>
-      <a class="dropdown-item" href="#">Separated link</a>
-    </div>
+  <button type="button" class="btn btn-outline-secondary">Action</button>
+  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
+    <span class="sr-only">Toggle Dropdown</span>
+  </button>
+  <div class="dropdown-menu dropdown-menu-right">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+    <div role="separator" class="dropdown-divider"></div>
+    <a class="dropdown-item" href="#">Separated link</a>
   </div>
 </div>
 {{< /example >}}
@@ -265,9 +239,7 @@ Input groups include support for custom selects and custom file inputs. Browser
 
 {{< example >}}
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <label class="input-group-text" for="inputGroupSelect01">Options</label>
-  </div>
+  <label class="input-group-text" for="inputGroupSelect01">Options</label>
   <select class="form-select" id="inputGroupSelect01">
     <option selected>Choose...</option>
     <option value="1">One</option>
@@ -283,15 +255,11 @@ Input groups include support for custom selects and custom file inputs. Browser
     <option value="2">Two</option>
     <option value="3">Three</option>
   </select>
-  <div class="input-group-append">
-    <label class="input-group-text" for="inputGroupSelect02">Options</label>
-  </div>
+  <label class="input-group-text" for="inputGroupSelect02">Options</label>
 </div>
 
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <button class="btn btn-outline-secondary" type="button">Button</button>
-  </div>
+  <button class="btn btn-outline-secondary" type="button">Button</button>
   <select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
     <option selected>Choose...</option>
     <option value="1">One</option>
@@ -307,9 +275,7 @@ Input groups include support for custom selects and custom file inputs. Browser
     <option value="2">Two</option>
     <option value="3">Three</option>
   </select>
-  <div class="input-group-append">
-    <button class="btn btn-outline-secondary" type="button">Button</button>
-  </div>
+  <button class="btn btn-outline-secondary" type="button">Button</button>
 </div>
 {{< /example >}}
 
@@ -317,9 +283,7 @@ Input groups include support for custom selects and custom file inputs. Browser
 
 {{< example >}}
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
-  </div>
+  <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
   <div class="form-file">
     <input type="file" class="form-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
     <label class="form-file-label" for="inputGroupFile01">
@@ -337,15 +301,11 @@ Input groups include support for custom selects and custom file inputs. Browser
       <span class="form-file-button">Browse</span>
     </label>
   </div>
-  <div class="input-group-append">
-    <span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
-  </div>
+  <span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
 </div>
 
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
-  </div>
+  <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
   <div class="form-file">
     <input type="file" class="form-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
     <label class="form-file-label" for="inputGroupFile03">
@@ -363,9 +323,7 @@ Input groups include support for custom selects and custom file inputs. Browser
       <span class="form-file-button">Browse</span>
     </label>
   </div>
-  <div class="input-group-append">
-    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
-  </div>
+  <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
 </div>
 {{< /example >}}
 
diff --git a/site/content/docs/4.3/forms/layout.md b/site/content/docs/4.3/forms/layout.md
index b580be6d3..e9586c654 100644
--- a/site/content/docs/4.3/forms/layout.md
+++ b/site/content/docs/4.3/forms/layout.md
@@ -232,9 +232,7 @@ The example below uses a flexbox utility to vertically center the contents and c
   <div class="col-auto">
     <label class="sr-only" for="autoSizingInputGroup">Username</label>
     <div class="input-group">
-      <div class="input-group-prepend">
-        <div class="input-group-text">@</div>
-      </div>
+      <div class="input-group-text">@</div>
       <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
     </div>
   </div>
@@ -272,9 +270,7 @@ You can then remix that once again with size-specific column classes.
   <div class="col-sm-3">
     <label class="sr-only" for="specificSizeInputGroupUsername">Username</label>
     <div class="input-group">
-      <div class="input-group-prepend">
-        <div class="input-group-text">@</div>
-      </div>
+      <div class="input-group-text">@</div>
       <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
     </div>
   </div>
@@ -317,9 +313,7 @@ Be sure to always include a `<label>` with each form control, even if you need t
   <div class="col-12">
     <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
     <div class="input-group">
-      <div class="input-group-prepend">
-        <div class="input-group-text">@</div>
-      </div>
+      <div class="input-group-text">@</div>
       <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
     </div>
   </div>
diff --git a/site/content/docs/4.3/forms/validation.md b/site/content/docs/4.3/forms/validation.md
index d7b5d29f8..c8d10745a 100644
--- a/site/content/docs/4.3/forms/validation.md
+++ b/site/content/docs/4.3/forms/validation.md
@@ -50,9 +50,7 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
   <div class="col-md-4">
     <label for="validationCustomUsername">Username</label>
     <div class="input-group">
-      <div class="input-group-prepend">
-        <span class="input-group-text" id="inputGroupPrepend">@</span>
-      </div>
+      <span class="input-group-text" id="inputGroupPrepend">@</span>
       <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
       <div class="invalid-feedback">
         Please choose a username.
@@ -142,9 +140,7 @@ While these feedback styles cannot be styled with CSS, you can still customize t
   <div class="col-md-4">
     <label for="validationDefaultUsername">Username</label>
     <div class="input-group">
-      <div class="input-group-prepend">
-        <span class="input-group-text" id="inputGroupPrepend2">@</span>
-      </div>
+      <span class="input-group-text" id="inputGroupPrepend2">@</span>
       <input type="text" class="form-control" id="validationDefaultUsername"  aria-describedby="inputGroupPrepend2" required>
     </div>
   </div>
@@ -200,9 +196,7 @@ We recommend using client-side validation, but in case you require server-side v
   <div class="col-md-4">
     <label for="validationServerUsername">Username</label>
     <div class="input-group">
-      <div class="input-group-prepend">
-        <span class="input-group-text" id="inputGroupPrepend3">@</span>
-      </div>
+      <span class="input-group-text" id="inputGroupPrepend3">@</span>
       <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
       <div class="invalid-feedback">
         Please choose a username.
@@ -329,9 +323,7 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
   <div class="col-md-4 position-relative">
     <label for="validationTooltipUsername">Username</label>
     <div class="input-group">
-      <div class="input-group-prepend">
-        <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
-      </div>
+      <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
       <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
       <div class="invalid-tooltip">
         Please choose a unique and valid username.
diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md
index 7c0541c00..be953eca3 100644
--- a/site/content/docs/4.3/migration.md
+++ b/site/content/docs/4.3/migration.md
@@ -99,6 +99,7 @@ Changes to Reboot, typography, tables, and more.
 - Dropped `.form-inline` for the more flexible grid.
 - Dropped support for `.form-control-plaintext` inside `.input-group`s.
 - Dropped `.form-text` as existing utilities cover this use class's former use case (e.g., `.mt-2`, `.text-small`, and/or `.text-muted`).
+- Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups.
 
 ## Components
 
-- 
cgit v1.2.3