Require `.form-label` classes on form labels (#30476)

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index e486d469d9fc0a587142066dcb950d188aeb1f69..e3d2e4cc4cff8a2e0c77d88928c00aac6b626adc 100644 (file)
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -149,8 +149,6 @@
 .btn-group-toggle {
   > .btn,
   > .btn-group > .btn {
-    margin-bottom: 0; // Override default `<label>` value
-
     input[type="radio"],
     input[type="checkbox"] {
       position: absolute;

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 99ec43be820e0aa8af732ac8ad061e8a90e49cf4..fe97ce526986494a990020f00200553d488a1f94 100644 (file)
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -46,7 +46,6 @@
   position: relative;
   display: block;
   padding: $list-group-item-padding-y $list-group-item-padding-x;
-  margin-bottom: 0; // for <label> variations
   color: $list-group-color;
   text-decoration: if($link-decoration == none, null, none);
   background-color: $list-group-bg;

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index cf48352d26acffcb5dd62b709bbd7abff95c6f58..d3d4871891fffeff4e18a691e1abbba32c19a355 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -381,7 +381,6 @@ th {
 
 label {
   display: inline-block; // 1
-  margin-bottom: $label-margin-bottom;
 }
 
 // Remove the default `border-radius` that macOS Chrome adds.

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 9312c0be405025380f2a036344765b08cd45ccc9..638945eb22d721e6e47aa95408e437b52bf5c6fc 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -557,7 +557,11 @@ $btn-transition:              color .15s ease-in-out, background-color .15s ease
 
 // Forms
 
-$label-margin-bottom:                   .5rem !default;
+$form-label-margin-bottom:              .5rem !default;
+$form-label-font-size:                  null !default;
+$form-label-font-style:                 null !default;
+$form-label-font-weight:                null !default;
+$form-label-color:                      null !default;
 
 $input-padding-y:                       $input-btn-padding-y !default;
 $input-padding-x:                       $input-btn-padding-x !default;

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index 03ae57385acff963ba1259a2c64b1fbe001352b8..3666b6ab47c77109ede7d7999c749c88ee939953 100644 (file)
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -99,7 +99,6 @@
 }
 
 .form-check-label {
-  margin-bottom: 0;
   color: $form-check-label-color;
   cursor: $form-check-label-cursor;
 }

diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index 878cb83d693b6d318e5282460cff6848aa806cb4..c8e86cebe5c39d2cdfead42f97096b2227ef621b 100644 (file)
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -63,7 +63,6 @@
   display: flex;
   align-items: center;
   padding: $input-padding-y $input-padding-x;
-  margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
   @include font-size($input-font-size); // Match inputs
   font-weight: $font-weight-normal;
   line-height: $input-line-height;

diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss
index a3184b7d72f8eda846b60f77bf9b7e500f93584b..39ecafcd2f0d5be8843b4be9ff5d7ac0d608c350 100644 (file)
--- a/scss/forms/_labels.scss
+++ b/scss/forms/_labels.scss
@@ -2,14 +2,25 @@
 // Labels
 //
 
+.form-label {
+  margin-bottom: $form-label-margin-bottom;
+  @include font-size($form-label-font-size);
+  font-style: $form-label-font-style;
+  font-weight: $form-label-font-weight;
+  color: $form-label-color;
+}
+
 // For use with horizontal and inline forms, when you need the label (or legend)
 // text to align with the form controls.
 .col-form-label {
   padding-top: add($input-padding-y, $input-border-width);
   padding-bottom: add($input-padding-y, $input-border-width);
-  margin-bottom: 0; // Override the `<label>/<legend>` default
+  margin-bottom: 0; // Override the `<legend>` default
   @include font-size(inherit); // Override the `<legend>` default
+  font-style: $form-label-font-style;
+  font-weight: $form-label-font-weight;
   line-height: $input-line-height;
+  color: $form-label-color;
 }
 
 .col-form-label-lg {

diff --git a/site/content/docs/4.3/components/dropdowns.md b/site/content/docs/4.3/components/dropdowns.md
index 54aad5ce43072102c26f8b107454d2e16b1ff100..6b3fe8fc9e672f0c88349e3fc20fe27ee0cf4d63 100644 (file)
--- a/site/content/docs/4.3/components/dropdowns.md
+++ b/site/content/docs/4.3/components/dropdowns.md
@@ -690,11 +690,11 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar
 <div class="dropdown-menu">
   <form class="px-4 py-3">
     <div class="mb-3">
-      <label for="exampleDropdownFormEmail1">Email address</label>
+      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
       <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
     </div>
     <div class="mb-3">
-      <label for="exampleDropdownFormPassword1">Password</label>
+      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
       <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
     </div>
     <div class="mb-3">
@@ -716,11 +716,11 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar
 {{< example >}}
 <form class="dropdown-menu p-4">
   <div class="mb-3">
-    <label for="exampleDropdownFormEmail2">Email address</label>
+    <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
     <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
   </div>
   <div class="mb-3">
-    <label for="exampleDropdownFormPassword2">Password</label>
+    <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
     <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
   </div>
   <div class="mb-3">

diff --git a/site/content/docs/4.3/examples/checkout/index.html b/site/content/docs/4.3/examples/checkout/index.html
index 94f89db724af05709e729e02ac25a139fcf60881..82079d19a139218a551308882f49772a53ae8c1b 100644 (file)
--- a/site/content/docs/4.3/examples/checkout/index.html
+++ b/site/content/docs/4.3/examples/checkout/index.html
@@ -68,7 +68,7 @@ body_class: "bg-light"
       <form class="needs-validation" novalidate>
         <div class="row g-3">
           <div class="col-sm-6">
-            <label for="firstName">First name</label>
+            <label for="firstName" class="form-label">First name</label>
             <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
             <div class="invalid-feedback">
               Valid first name is required.
@@ -76,7 +76,7 @@ body_class: "bg-light"
           </div>
 
           <div class="col-sm-6">
-            <label for="lastName">Last name</label>
+            <label for="lastName" class="form-label">Last name</label>
             <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
             <div class="invalid-feedback">
               Valid last name is required.
@@ -84,7 +84,7 @@ body_class: "bg-light"
           </div>
 
           <div class="col-12">
-            <label for="username">Username</label>
+            <label for="username" class="form-label">Username</label>
             <div class="input-group">
               <span class="input-group-text">@</span>
               <input type="text" class="form-control" id="username" placeholder="Username" required>
@@ -95,7 +95,7 @@ body_class: "bg-light"
           </div>
 
           <div class="col-12">
-            <label for="email">Email <span class="text-muted">(Optional)</span></label>
+            <label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label>
             <input type="email" class="form-control" id="email" placeholder="you@example.com">
             <div class="invalid-feedback">
               Please enter a valid email address for shipping updates.
@@ -103,7 +103,7 @@ body_class: "bg-light"
           </div>
 
           <div class="col-12">
-            <label for="address">Address</label>
+            <label for="address" class="form-label">Address</label>
             <input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
             <div class="invalid-feedback">
               Please enter your shipping address.
@@ -111,12 +111,12 @@ body_class: "bg-light"
           </div>
 
           <div class="col-12">
-            <label for="address2">Address 2 <span class="text-muted">(Optional)</span></label>
+            <label for="address2" class="form-label">Address 2 <span class="text-muted">(Optional)</span></label>
             <input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
           </div>
 
           <div class="col-md-5">
-            <label for="country">Country</label>
+            <label for="country" class="form-label">Country</label>
             <select class="form-select" id="country" required>
               <option value="">Choose...</option>
               <option>United States</option>
@@ -127,7 +127,7 @@ body_class: "bg-light"
           </div>
 
           <div class="col-md-4">
-            <label for="state">State</label>
+            <label for="state" class="form-label">State</label>
             <select class="form-select" id="state" required>
               <option value="">Choose...</option>
               <option>California</option>
@@ -138,7 +138,7 @@ body_class: "bg-light"
           </div>
 
           <div class="col-md-3">
-            <label for="zip">Zip</label>
+            <label for="zip" class="form-label">Zip</label>
             <input type="text" class="form-control" id="zip" placeholder="" required>
             <div class="invalid-feedback">
               Zip code required.
@@ -179,7 +179,7 @@ body_class: "bg-light"
 
         <div class="row gy-3">
           <div class="col-md-6">
-            <label for="cc-name">Name on card</label>
+            <label for="cc-name" class="form-label">Name on card</label>
             <input type="text" class="form-control" id="cc-name" placeholder="" required>
             <small class="text-muted">Full name as displayed on card</small>
             <div class="invalid-feedback">
@@ -188,7 +188,7 @@ body_class: "bg-light"
           </div>
 
           <div class="col-md-6">
-            <label for="cc-number">Credit card number</label>
+            <label for="cc-number" class="form-label">Credit card number</label>
             <input type="text" class="form-control" id="cc-number" placeholder="" required>
             <div class="invalid-feedback">
               Credit card number is required
@@ -196,7 +196,7 @@ body_class: "bg-light"
           </div>
 
           <div class="col-md-3">
-            <label for="cc-expiration">Expiration</label>
+            <label for="cc-expiration" class="form-label">Expiration</label>
             <input type="text" class="form-control" id="cc-expiration" placeholder="" required>
             <div class="invalid-feedback">
               Expiration date required
@@ -204,7 +204,7 @@ body_class: "bg-light"
           </div>
 
           <div class="col-md-3">
-            <label for="cc-cvv">CVV</label>
+            <label for="cc-cvv" class="form-label">CVV</label>
             <input type="text" class="form-control" id="cc-cvv" placeholder="" required>
             <div class="invalid-feedback">
               Security code required

diff --git a/site/content/docs/4.3/examples/floating-labels/floating-labels.css b/site/content/docs/4.3/examples/floating-labels/floating-labels.css
index 163d213005da9697deb83381b61305ac539711fd..a9224c0d2dd66b1b7558223124943c937b383cc3 100644 (file)
--- a/site/content/docs/4.3/examples/floating-labels/floating-labels.css
+++ b/site/content/docs/4.3/examples/floating-labels/floating-labels.css
@@ -35,7 +35,6 @@ body {
   left: 0;
   display: block;
   width: 100%;
-  margin-bottom: 0; /* Override default `<label>` margin */
   color: #495057;
   pointer-events: none;
   cursor: text; /* Match the input under the label */

diff --git a/site/content/docs/4.3/forms/form-control.md b/site/content/docs/4.3/forms/form-control.md
index e74338d09618d17f7bf9f73922fe4966fae071bc..87b5c4ace392f8608148a25b4b672608ea9e6d31 100644 (file)
--- a/site/content/docs/4.3/forms/form-control.md
+++ b/site/content/docs/4.3/forms/form-control.md
@@ -10,11 +10,11 @@ toc: true
 
 {{< example >}}
 <div class="mb-3">
-  <label for="exampleFormControlInput1">Email address</label>
+  <label for="exampleFormControlInput1" class="form-label">Email address</label>
   <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
 </div>
 <div class="mb-3">
-  <label for="exampleFormControlTextarea1">Example textarea</label>
+  <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
   <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
 </div>
 {{< /example >}}
@@ -75,7 +75,7 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
 ## Color
 
 {{< example >}}
-<label for="exampleColorInput">Color picker</label>
+<label for="exampleColorInput" class="form-label">Color picker</label>
 <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
 {{< /example >}}
 
@@ -86,7 +86,7 @@ Datalists allow you to create a group of `<option>`s that can be accessed (and a
 Learn more about [support for datalist elements](https://caniuse.com/#feat=datalist).
 
 {{< example >}}
-<label for="exampleDataList">Datalist example</label>
+<label for="exampleDataList" class="form-label">Datalist example</label>
 <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
 <datalist id="datalistOptions">
   <option value="San Francisco">

diff --git a/site/content/docs/4.3/forms/input-group.md b/site/content/docs/4.3/forms/input-group.md
index 4fde2cf78f722f57ce81e446d2954bc86e1c9dad..4186f6b362640606bd247cb565cac713e38f2044 100644 (file)
--- a/site/content/docs/4.3/forms/input-group.md
+++ b/site/content/docs/4.3/forms/input-group.md
@@ -21,7 +21,7 @@ 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">Your vanity URL</label>
+<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">

diff --git a/site/content/docs/4.3/forms/layout.md b/site/content/docs/4.3/forms/layout.md
index 3e5b45f8accd985e916f3e29399207e251d5bd3f..fb3cd68cb721fda2abc0927c745094a9cad1a5be 100644 (file)
--- a/site/content/docs/4.3/forms/layout.md
+++ b/site/content/docs/4.3/forms/layout.md
@@ -24,11 +24,11 @@ Feel free to build your forms however you like, with `<fieldset>`s, `<div>`s, or
 
 {{< example >}}
 <div class="mb-3">
-  <label for="formGroupExampleInput">Example label</label>
+  <label for="formGroupExampleInput" class="form-label">Example label</label>
   <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
 </div>
 <div class="mb-3">
-  <label for="formGroupExampleInput2">Another label</label>
+  <label for="formGroupExampleInput2" class="form-label">Another label</label>
   <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
 </div>
 {{< /example >}}
@@ -68,34 +68,34 @@ More complex layouts can also be created with the grid system.
 {{< example >}}
 <form class="row g-3">
   <div class="col-md-6">
-    <label for="inputEmail4">Email</label>
+    <label for="inputEmail4" class="form-label">Email</label>
     <input type="email" class="form-control" id="inputEmail4">
   </div>
   <div class="col-md-6">
-    <label for="inputPassword4">Password</label>
+    <label for="inputPassword4" class="form-label">Password</label>
     <input type="password" class="form-control" id="inputPassword4">
   </div>
   <div class="col-12">
-    <label for="inputAddress">Address</label>
+    <label for="inputAddress" class="form-label">Address</label>
     <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
   </div>
   <div class="col-12">
-    <label for="inputAddress2">Address 2</label>
+    <label for="inputAddress2" class="form-label">Address 2</label>
     <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
   </div>
   <div class="col-md-6">
-    <label for="inputCity">City</label>
+    <label for="inputCity" class="form-label">City</label>
     <input type="text" class="form-control" id="inputCity">
   </div>
   <div class="col-md-4">
-    <label for="inputState">State</label>
+    <label for="inputState" class="form-label">State</label>
     <select id="inputState" class="form-select">
       <option selected>Choose...</option>
       <option>...</option>
     </select>
   </div>
   <div class="col-md-2">
-    <label for="inputZip">Zip</label>
+    <label for="inputZip" class="form-label">Zip</label>
     <input type="text" class="form-control" id="inputZip">
   </div>
   <div class="col-12">

diff --git a/site/content/docs/4.3/forms/overview.md b/site/content/docs/4.3/forms/overview.md
index 8ba099dfe72daa13431f4f3460f921e08425bcd0..a4cc7800848a6312b50529bda97e2bd59adb915b 100644 (file)
--- a/site/content/docs/4.3/forms/overview.md
+++ b/site/content/docs/4.3/forms/overview.md
@@ -35,12 +35,12 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for
 {{< example >}}
 <form>
   <div class="mb-3">
-    <label for="exampleInputEmail1">Email address</label>
+    <label for="exampleInputEmail1" class="form-label">Email address</label>
     <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
     <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
   </div>
   <div class="mb-3">
-    <label for="exampleInputPassword1">Password</label>
+    <label for="exampleInputPassword1" class="form-label">Password</label>
     <input type="password" class="form-control" id="exampleInputPassword1">
   </div>
   <div class="mb-3 form-check">
@@ -64,7 +64,7 @@ Help text should be explicitly associated with the form control it relates to us
 Help text below inputs can be styled with `.form-text`. This class includes `display: block` and adds some top margin for easy spacing from the inputs above.
 
 {{< example >}}
-<label for="inputPassword5">Password</label>
+<label for="inputPassword5" class="form-label">Password</label>
 <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
 <small id="passwordHelpBlock" class="form-text text-muted">
   Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
@@ -105,11 +105,11 @@ By default, browsers will treat all native form controls (`<input>`, `<select>`,
 <form>
   <fieldset disabled aria-label="Disabled fieldset example">
     <div class="mb-3">
-      <label for="disabledTextInput">Disabled input</label>
+      <label for="disabledTextInput" class="form-label">Disabled input</label>
       <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
     </div>
     <div class="mb-3">
-      <label for="disabledSelect">Disabled select menu</label>
+      <label for="disabledSelect" class="form-label">Disabled select menu</label>
       <select id="disabledSelect" class="form-select">
         <option>Disabled select</option>
       </select>

diff --git a/site/content/docs/4.3/forms/range.md b/site/content/docs/4.3/forms/range.md
index 979e765c33bd72473a9b860f44c199e2993714ee..f229908b01ef1a8fb8365a046fbb9812aa110ec5 100644 (file)
--- a/site/content/docs/4.3/forms/range.md
+++ b/site/content/docs/4.3/forms/range.md
@@ -11,7 +11,7 @@ toc: true
 Create custom `<input type="range">` controls with `.form-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
 
 {{< example >}}
-<label for="customRange1">Example range</label>
+<label for="customRange1" class="form-label">Example range</label>
 <input type="range" class="form-range" id="customRange1">
 {{< /example >}}
 
@@ -20,7 +20,7 @@ Create custom `<input type="range">` controls with `.form-range`. The track (the
 Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes.
 
 {{< example >}}
-<label for="customRange2">Example range</label>
+<label for="customRange2" class="form-label">Example range</label>
 <input type="range" class="form-range" min="0" max="5" id="customRange2">
 {{< /example >}}
 
@@ -29,6 +29,6 @@ Range inputs have implicit values for `min` and `max`—`0` and `100`, respectiv
 By default, range inputs "snap" to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step="0.5"`.
 
 {{< example >}}
-<label for="customRange3">Example range</label>
+<label for="customRange3" class="form-label">Example range</label>
 <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
 {{< /example >}}

diff --git a/site/content/docs/4.3/forms/validation.md b/site/content/docs/4.3/forms/validation.md
index 2bac5786060f5da25499f0b32edb57ba07d9cad2..2d6e2cab105eb9bfa8b013d34174ecfe92153228 100644 (file)
--- a/site/content/docs/4.3/forms/validation.md
+++ b/site/content/docs/4.3/forms/validation.md
@@ -34,21 +34,21 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
 {{< example >}}
 <form class="row g-3 needs-validation" novalidate>
   <div class="col-md-4">
-    <label for="validationCustom01">First name</label>
+    <label for="validationCustom01" class="form-label">First name</label>
     <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
     <div class="valid-feedback">
       Looks good!
     </div>
   </div>
   <div class="col-md-4">
-    <label for="validationCustom02">Last name</label>
+    <label for="validationCustom02" class="form-label">Last name</label>
     <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
     <div class="valid-feedback">
       Looks good!
     </div>
   </div>
   <div class="col-md-4">
-    <label for="validationCustomUsername">Username</label>
+    <label for="validationCustomUsername" class="form-label">Username</label>
     <div class="input-group">
       <span class="input-group-text" id="inputGroupPrepend">@</span>
       <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
@@ -58,14 +58,14 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
     </div>
   </div>
   <div class="col-md-6">
-    <label for="validationCustom03">City</label>
+    <label for="validationCustom03" class="form-label">City</label>
     <input type="text" class="form-control" id="validationCustom03" required>
     <div class="invalid-feedback">
       Please provide a valid city.
     </div>
   </div>
   <div class="col-md-3">
-    <label for="validationCustom04">State</label>
+    <label for="validationCustom04" class="form-label">State</label>
     <select class="form-select" id="validationCustom04" required>
       <option selected disabled value="">Choose...</option>
       <option>...</option>
@@ -75,7 +75,7 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
     </div>
   </div>
   <div class="col-md-3">
-    <label for="validationCustom05">Zip</label>
+    <label for="validationCustom05" class="form-label">Zip</label>
     <input type="text" class="form-control" id="validationCustom05" required>
     <div class="invalid-feedback">
       Please provide a valid zip.
@@ -130,33 +130,33 @@ While these feedback styles cannot be styled with CSS, you can still customize t
 {{< example >}}
 <form class="row g-3">
   <div class="col-md-4">
-    <label for="validationDefault01">First name</label>
+    <label for="validationDefault01" class="form-label">First name</label>
     <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
   </div>
   <div class="col-md-4">
-    <label for="validationDefault02">Last name</label>
+    <label for="validationDefault02" class="form-label">Last name</label>
     <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
   </div>
   <div class="col-md-4">
-    <label for="validationDefaultUsername">Username</label>
+    <label for="validationDefaultUsername" class="form-label">Username</label>
     <div class="input-group">
       <span class="input-group-text" id="inputGroupPrepend2">@</span>
       <input type="text" class="form-control" id="validationDefaultUsername"  aria-describedby="inputGroupPrepend2" required>
     </div>
   </div>
   <div class="col-md-6">
-    <label for="validationDefault03">City</label>
+    <label for="validationDefault03" class="form-label">City</label>
     <input type="text" class="form-control" id="validationDefault03" required>
   </div>
   <div class="col-md-3">
-    <label for="validationDefault04">State</label>
+    <label for="validationDefault04" class="form-label">State</label>
     <select class="form-select" id="validationDefault04" required>
       <option selected disabled value="">Choose...</option>
       <option>...</option>
     </select>
   </div>
   <div class="col-md-3">
-    <label for="validationDefault05">Zip</label>
+    <label for="validationDefault05" class="form-label">Zip</label>
     <input type="text" class="form-control" id="validationDefault05" required>
   </div>
   <div class="col-12">
@@ -180,21 +180,21 @@ We recommend using client-side validation, but in case you require server-side v
 {{< example >}}
 <form class="row g-3">
   <div class="col-md-4">
-    <label for="validationServer01">First name</label>
+    <label for="validationServer01" class="form-label">First name</label>
     <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
     <div class="valid-feedback">
       Looks good!
     </div>
   </div>
   <div class="col-md-4">
-    <label for="validationServer02">Last name</label>
+    <label for="validationServer02" class="form-label">Last name</label>
     <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
     <div class="valid-feedback">
       Looks good!
     </div>
   </div>
   <div class="col-md-4">
-    <label for="validationServerUsername">Username</label>
+    <label for="validationServerUsername" class="form-label">Username</label>
     <div class="input-group">
       <span class="input-group-text" id="inputGroupPrepend3">@</span>
       <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
@@ -204,14 +204,14 @@ We recommend using client-side validation, but in case you require server-side v
     </div>
   </div>
   <div class="col-md-6">
-    <label for="validationServer03">City</label>
+    <label for="validationServer03" class="form-label">City</label>
     <input type="text" class="form-control is-invalid" id="validationServer03" required>
     <div class="invalid-feedback">
       Please provide a valid city.
     </div>
   </div>
   <div class="col-md-3">
-    <label for="validationServer04">State</label>
+    <label for="validationServer04" class="form-label">State</label>
     <select class="form-select is-invalid" id="validationServer04" required>
       <option selected disabled value="">Choose...</option>
       <option>...</option>
@@ -221,7 +221,7 @@ We recommend using client-side validation, but in case you require server-side v
     </div>
   </div>
   <div class="col-md-3">
-    <label for="validationServer05">Zip</label>
+    <label for="validationServer05" class="form-label">Zip</label>
     <input type="text" class="form-control is-invalid" id="validationServer05" required>
     <div class="invalid-feedback">
       Please provide a valid zip.
@@ -256,7 +256,7 @@ Validation styles are available for the following form controls and components:
 {{< example >}}
 <form class="was-validated">
   <div class="mb-3">
-    <label for="validationTextarea">Textarea</label>
+    <label for="validationTextarea" class="form-label">Textarea</label>
     <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
     <div class="invalid-feedback">
       Please enter a message in the textarea.
@@ -311,21 +311,21 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
 {{< example >}}
 <form class="row g-3 needs-validation" novalidate>
   <div class="col-md-4 position-relative">
-    <label for="validationTooltip01">First name</label>
+    <label for="validationTooltip01" class="form-label">First name</label>
     <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
     <div class="valid-tooltip">
       Looks good!
     </div>
   </div>
   <div class="col-md-4 position-relative">
-    <label for="validationTooltip02">Last name</label>
+    <label for="validationTooltip02" class="form-label">Last name</label>
     <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
     <div class="valid-tooltip">
       Looks good!
     </div>
   </div>
   <div class="col-md-4 position-relative">
-    <label for="validationTooltipUsername">Username</label>
+    <label for="validationTooltipUsername" class="form-label">Username</label>
     <div class="input-group">
       <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
       <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
@@ -335,14 +335,14 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
     </div>
   </div>
   <div class="col-md-6 position-relative">
-    <label for="validationTooltip03">City</label>
+    <label for="validationTooltip03" class="form-label">City</label>
     <input type="text" class="form-control" id="validationTooltip03" required>
     <div class="invalid-tooltip">
       Please provide a valid city.
     </div>
   </div>
   <div class="col-md-3 position-relative">
-    <label for="validationTooltip04">State</label>
+    <label for="validationTooltip04" class="form-label">State</label>
     <select class="form-select" id="validationTooltip04" required>
       <option selected disabled value="">Choose...</option>
       <option>...</option>
@@ -352,7 +352,7 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
     </div>
   </div>
   <div class="col-md-3 position-relative">
-    <label for="validationTooltip05">Zip</label>
+    <label for="validationTooltip05" class="form-label">Zip</label>
     <input type="text" class="form-control" id="validationTooltip05" required>
     <div class="invalid-tooltip">
       Please provide a valid zip.

diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md
index e3d2e1b3beff2f0da83b7a2e8dca5e55dd76e7f1..2d73328d199dca5dccabfcb57c13c5bf4330d22e 100644 (file)
--- a/site/content/docs/4.3/migration.md
+++ b/site/content/docs/4.3/migration.md
@@ -103,6 +103,7 @@ Changes to Reboot, typography, tables, and more.
 - 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.
+- Form labels now require the `.form-label` class. Sass variables are now available to style form labels to your needs. [See #30476](https://github.com/twbs/bootstrap/pull/30476)
 
 ## Components