Remove outdated documentation

* Remove about generated button of file form
* Remove and merge layout examples of custom forms
* Clarify id/for
* Change some spacing classes for consistency

diff --git a/site/content/docs/4.3/forms/file.md b/site/content/docs/4.3/forms/file.md
index 1c5370bc8153db4872e8895c53491304545f9773..bbf4afd98672fb22e28980010b29591234f62b5b 100644 (file)
--- a/site/content/docs/4.3/forms/file.md
+++ b/site/content/docs/4.3/forms/file.md
@@ -46,4 +46,4 @@ Longer placeholder text is truncated and an ellipsis is added when there's not e
 </div>
 {{< /example >}}
 
-We hide the default file `<input>` via `opacity` and instead style the `<label>`. The button is generated and positioned with `::after`. Lastly, we declare a `width` and `height` on the `<input>` for proper spacing for surrounding content.
+We hide the default file `<input>` via `opacity` and instead style the `<label>`, and declare a `width` and `height` on the `<input>` for proper spacing for surrounding content.

diff --git a/site/content/docs/4.3/forms/layout.md b/site/content/docs/4.3/forms/layout.md
index e9cdda2c1ee53888fd70f556923f5a5140dafc34..fb57d2760609862e9f5ba55bd14f75a1d55f9e33 100644 (file)
--- a/site/content/docs/4.3/forms/layout.md
+++ b/site/content/docs/4.3/forms/layout.md
@@ -239,18 +239,27 @@ The example below uses a flexbox utility to vertically center the contents and c
 <form>
   <div class="form-row align-items-center">
     <div class="col-auto">
-      <label class="sr-only" for="inlineFormInput">Name</label>
-      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
+      <label class="sr-only" for="autoSizingInput">Name</label>
+      <input type="text" class="form-control mb-2" id="autoSizingInput" placeholder="Jane Doe">
     </div>
     <div class="col-auto">
-      <label class="sr-only" for="inlineFormInputGroup">Username</label>
+      <label class="sr-only" for="autoSizingInputGroup">Username</label>
       <div class="input-group mb-2">
         <div class="input-group-prepend">
           <div class="input-group-text">@</div>
         </div>
-        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
+        <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
       </div>
     </div>
+    <div class="col-auto">
+      <label class="sr-only" for="autoSizingSelect">Preference</label>
+      <select class="form-select mb-2" id="autoSizingSelect">
+        <option selected>Choose...</option>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+      </select>
+    </div>
     <div class="col-auto">
       <div class="form-check mb-2">
         <input class="form-check-input" type="checkbox" id="autoSizingCheck">
@@ -272,41 +281,21 @@ You can then remix that once again with size-specific column classes.
 <form>
   <div class="form-row align-items-center">
     <div class="col-sm-3 my-1">
-      <label class="sr-only" for="inlineFormInputName">Name</label>
-      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
+      <label class="sr-only" for="specificSizeInputName">Name</label>
+      <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
     </div>
     <div class="col-sm-3 my-1">
-      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
+      <label class="sr-only" for="specificSizeInputGroupUsername">Username</label>
       <div class="input-group">
         <div class="input-group-prepend">
           <div class="input-group-text">@</div>
         </div>
-        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
+        <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
       </div>
     </div>
-    <div class="col-auto my-1">
-      <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
-        <label class="form-check-label" for="autoSizingCheck2">
-          Remember me
-        </label>
-      </div>
-    </div>
-    <div class="col-auto my-1">
-      <button type="submit" class="btn btn-primary">Submit</button>
-    </div>
-  </div>
-</form>
-{{< /example >}}
-
-And of course [custom form controls](#custom-forms) are supported.
-
-{{< example >}}
-<form>
-  <div class="form-row align-items-center">
-    <div class="col-auto my-1">
-      <label class="mr-sm-2 sr-only" for="inlineFormSelect">Preference</label>
-      <select class="form-select mr-sm-2" id="inlineFormSelect">
+    <div class="col-sm-3 my-1">
+      <label class="sr-only" for="specificSizeSelect">Preference</label>
+      <select class="form-select" id="specificSizeSelect">
         <option selected>Choose...</option>
         <option value="1">One</option>
         <option value="2">Two</option>
@@ -314,9 +303,11 @@ And of course [custom form controls](#custom-forms) are supported.
       </select>
     </div>
     <div class="col-auto my-1">
-      <div class="form-check mr-sm-2">
-        <input type="checkbox" class="form-check-input" id="formCheckAutosizing">
-        <label class="form-check-label" for="formCheckAutosizing">Remember my preference</label>
+      <div class="form-check">
+        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
+        <label class="form-check-label" for="autoSizingCheck2">
+          Remember me
+        </label>
       </div>
     </div>
     <div class="col-auto my-1">
@@ -338,46 +329,33 @@ You may need to manually address the width and alignment of individual form cont
 
 {{< example >}}
 <form class="form-inline">
-  <label class="sr-only" for="inlineFormInputName2">Name</label>
-  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
+  <label class="sr-only" for="inlineFormInputName">Name</label>
+  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName" placeholder="Jane Doe">
 
-  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
+  <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
   <div class="input-group mb-2 mr-sm-2">
     <div class="input-group-prepend">
       <div class="input-group-text">@</div>
     </div>
-    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
-  </div>
-
-  <div class="form-check mb-2 mr-sm-2">
-    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
-    <label class="form-check-label" for="inlineFormCheck">
-      Remember me
-    </label>
+    <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
   </div>
 
-  <button type="submit" class="btn btn-primary mb-2">Submit</button>
-</form>
-{{< /example >}}
-
-Custom form controls and selects are also supported.
-
-{{< example >}}
-<form class="form-inline">
-  <label class="my-1 mr-2" for="inlineFormSelectPref">Preference</label>
-  <select class="form-select my-1 mr-sm-2" id="inlineFormSelectPref">
+  <label class="sr-only" for="inlineFormSelectPref">Preference</label>
+  <select class="form-select mb-2 mr-sm-2" id="inlineFormSelectPref">
     <option selected>Choose...</option>
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
   </select>
 
-  <div class="form-check my-1 mr-sm-2">
-    <input type="checkbox" class="form-check-input" id="formCheckInline">
-    <label class="form-check-label" for="formCheckInline">Remember my preference</label>
+  <div class="form-check mb-2 mr-sm-2">
+    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
+    <label class="form-check-label" for="inlineFormCheck">
+      Remember me
+    </label>
   </div>
 
-  <button type="submit" class="btn btn-primary my-1">Submit</button>
+  <button type="submit" class="btn btn-primary mb-2">Submit</button>
 </form>
 {{< /example >}}
 

diff --git a/site/content/docs/4.3/forms/validation.md b/site/content/docs/4.3/forms/validation.md
index 63fc4e8f02f64c67f7de0b13a93d6e7e1471a54f..bedaeba13ae665859c37feb322d023ec486f4ceb 100644 (file)
--- a/site/content/docs/4.3/forms/validation.md
+++ b/site/content/docs/4.3/forms/validation.md
@@ -259,9 +259,8 @@ We recommend using client-side validation, but in case you require server-side v
 Validation styles are available for the following form controls and components:
 
 - `<input>`s and `<textarea>`s with `.form-control` (including up to one `.form-control` in input groups)
-- `<select>`s with `.form-control` or `.form-select`
+- `<select>`s with `.form-select`
 - `.form-check`s
-- `.custom-checkbox`s and `.custom-radio`s
 - `.form-file`
 
 {{< example >}}
@@ -274,19 +273,19 @@ Validation styles are available for the following form controls and components:
     </div>
   </div>
 
-  <div class="custom-control custom-checkbox mb-3">
-    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
-    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
+  <div class="form-check mb-3">
+    <input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
+    <label class="form-check-label" for="validationFormCheck1">Check this checkbox</label>
     <div class="invalid-feedback">Example invalid feedback text</div>
   </div>
 
-  <div class="custom-control custom-radio">
-    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
-    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
+  <div class="form-check">
+    <input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked" required>
+    <label class="form-check-label" for="validationFormCheck2">Toggle this radio</label>
   </div>
-  <div class="custom-control custom-radio mb-3">
-    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
-    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
+  <div class="form-check mb-3">
+    <input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" required>
+    <label class="form-check-label" for="validationFormCheck3">Or toggle this other radio</label>
     <div class="invalid-feedback">More example invalid feedback text</div>
   </div>
 
@@ -297,13 +296,13 @@ Validation styles are available for the following form controls and components:
       <option value="2">Two</option>
       <option value="3">Three</option>
     </select>
-    <div class="invalid-feedback">Example invalid custom select feedback</div>
+    <div class="invalid-feedback">Example invalid select feedback</div>
   </div>
 
   <div class="form-file">
-    <input type="file" class="form-file-input" id="validatedCustomFile" required>
-    <label class="form-file-label" for="validatedCustomFile">Choose file...</label>
-    <div class="invalid-feedback">Example invalid custom file feedback</div>
+    <input type="file" class="form-file-input" id="validationFormFile" required>
+    <label class="form-file-label" for="validationFormFile">Choose file...</label>
+    <div class="invalid-feedback">Example invalid form file feedback</div>
   </div>
 </form>
 {{< /example >}}