Merge pull request #17320 from EspadaV8/form-doc-control-label

Replace instances of 'control-label' with 'form-control-label'

docs/components/forms.md

@@ -535,7 +535,7 @@ Block help text—for below inputs or for longer lines of help text—can be eas
 
 ## Validation
 
-Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.control-label`, `.form-control`, and `.text-help` within that element will receive the validation styles.
+Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, and `.text-help` within that element will receive the validation styles.
 
 {% comment %}
 {% callout warning %}
@@ -549,15 +549,15 @@ Ensure that an alternative indication of state is also provided. For instance, y
 
 {% example html %}
 <div class="form-group has-success">
-  <label class="control-label" for="inputSuccess1">Input with success</label>
+  <label class="form-control-label" for="inputSuccess1">Input with success</label>
   <input type="text" class="form-control form-control-success" id="inputSuccess1">
 </div>
 <div class="form-group has-warning">
-  <label class="control-label" for="inputWarning1">Input with warning</label>
+  <label class="form-control-label" for="inputWarning1">Input with warning</label>
   <input type="text" class="form-control form-control-warning" id="inputWarning1">
 </div>
 <div class="form-group has-error">
-  <label class="control-label" for="inputError1">Input with error</label>
+  <label class="form-control-label" for="inputError1">Input with error</label>
   <input type="text" class="form-control form-control-error" id="inputError1">
 </div>
 

docs/components/modal.md

@@ -336,11 +336,11 @@ Have a bunch of buttons that all trigger the same modal, just with slightly diff
         <div class="modal-body">
           <form>
             <div class="form-group">
-              <label for="recipient-name" class="control-label">Recipient:</label>
+              <label for="recipient-name" class="form-control-label">Recipient:</label>
               <input type="text" class="form-control" id="recipient-name">
             </div>
             <div class="form-group">
-              <label for="message-text" class="control-label">Message:</label>
+              <label for="message-text" class="form-control-label">Message:</label>
               <textarea class="form-control" id="message-text"></textarea>
             </div>
           </form>

scss/_forms.scss

@@ -425,7 +425,7 @@ input[type="checkbox"] {
       width: 100%;
     }
 
-    .control-label {
+    .form-control-label {
       margin-bottom: 0;
       vertical-align: middle;
     }

scss/mixins/_forms.scss

@@ -6,7 +6,7 @@
 @mixin form-control-validation($color) {
   // Color the label and help text
   .help-block,
-  .control-label,
+  .form-control-label,
   .radio,
   .checkbox,
   .radio-inline,