Require .form-label classes on form labels

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;

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;

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.

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;

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;
 }

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;

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 {

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">

site/content/docs/4.3/examples/checkout/index.html

@@ -68,23 +68,23 @@ <h4 class="mb-3">Billing address</h4>
       <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.
             </div>
           </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.
             </div>
           </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,28 +95,28 @@ <h4 class="mb-3">Billing address</h4>
           </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.
             </div>
           </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.
             </div>
           </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 @@ <h4 class="mb-3">Billing address</h4>
           </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 @@ <h4 class="mb-3">Billing address</h4>
           </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 @@ <h4 class="mb-3">Payment</h4>
 
         <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,23 +188,23 @@ <h4 class="mb-3">Payment</h4>
           </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
             </div>
           </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
             </div>
           </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

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 */

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">

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">

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">

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>

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 >}}