diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index 980596e8c34c9cdc9e4471e327c759099cdf8a3f..634b3288c586f1e0f87be03443d9975af2011670 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -360,9 +360,7 @@ More complex layouts can also be created with the grid system.
 
 #### Horizontal form
 
-Create horizontal forms with the grid by adding the `.row` class to form groups and using the `.col-*-*` classes to specify the width of your labels and controls.
-
-Be sure to add `.col-form-label` to your `<label>`s as well so they're vertically centered with their associated form controls. For `<legend>` elements, you can use `.col-form-legend` to make them appear similar to regular `<label>` elements.
+Create horizontal forms with the grid by adding the `.row` class to form groups and using the `.col-*-*` classes to specify the width of your labels and controls. Be sure to add `.col-form-label` to your `<label>`s as well so they're vertically centered with their associated form controls.
 
 At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we've removed the `padding-top` on our stacked radio inputs label to better align the text baseline.
 
@@ -382,7 +380,7 @@ At times, you maybe need to use margin or padding utilities to create that perfe
   </div>
   <fieldset class="form-group">
     <div class="row">
-      <legend class="col-form-legend col-sm-2 pt-0">Radios</legend>
+      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
       <div class="col-sm-10">
         <div class="form-check">
           <label class="form-check-label">
@@ -425,7 +423,7 @@ At times, you maybe need to use margin or padding utilities to create that perfe
 
 ##### Horizontal form label sizing
 
-Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`.
+Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s or `<legend>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`.
 
 {% example html %}
 <form>
diff --git a/scss/_forms.scss b/scss/_forms.scss
index d2a1b3601d86bc6593884cc7720e4f62c18206d0..9cec3ac9c710d4f111e4e50d19d0086f93df90d6 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -83,12 +83,13 @@ select.form-control {
 // Labels
 //
 
-// For use with horizontal and inline forms, when you need the label text to
-// align with the form controls.
+// 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: calc(#{$input-padding-y} + #{$input-border-width});
   padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
-  margin-bottom: 0; // Override the `<label>` default
+  margin-bottom: 0; // Override the `<label>/<legend>` default
+  font-size: inherit; // Override the `<legend>` default
   line-height: $input-line-height;
 }
 
@@ -107,20 +108,6 @@ select.form-control {
 }
 
 
-//
-// Legends
-//
-
-// For use with horizontal and inline forms, when you need the legend text to
-// be the same size as regular labels, and to align with the form controls.
-.col-form-legend {
-  padding-top: $input-padding-y;
-  padding-bottom: $input-padding-y;
-  margin-bottom: 0;
-  font-size: $font-size-base;
-}
-
-
 // Readonly controls as plain text
 //
 // Apply class to a readonly input to make it appear like regular plain