Update labels and form grid examples

dist/css/bootstrap.css

@@ -377,6 +377,7 @@ th {
 
 label {
   display: inline-block;
+  margin-bottom: .5rem;
 }
 
 input, button, select, textarea {
@@ -1683,8 +1684,8 @@ pre code {
   border: 1px solid #eceeef;
 }
 
-label {
-  margin-bottom: .5rem;
+.form-control-label {
+  padding: .5625rem .75rem;
 }
 
 .form-control {

docs/components/forms.md

@@ -240,29 +240,57 @@ Because of this, you may need to manually adddres the width and alignment of ind
 
 ### Using the Grid
 
-For more structured form layouts, you can utilize Bootstrap's predefined grid classes (or mixins). Add the `.row` class to form groups and use the `.col-*` classes to specify the width of your labels and controls.
+For more structured form layouts, you can utilize Bootstrap's predefined grid classes (or mixins). Add the `.row` class to form groups and use the `.col-*` classes to specify the width of your labels and controls. To vertically center the labels with the textual inputs—nearly anything with `.form-control`—use the `.form-control-label` class.
 
 {% example html %}
 <form>
   <div class="form-group row">
-    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
+    <label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
     <div class="col-sm-10">
       <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
     </div>
   </div>
   <div class="form-group row">
-    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
+    <label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
     <div class="col-sm-10">
       <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
     </div>
   </div>
   <div class="form-group row">
-    <div class="col-sm-offset-2 col-sm-10">
-      <div class="checkbox">
+    <label class="col-sm-2" for="">Radios</label>
+    <div class="col-sm-10">
+      <div class="radio">
         <label>
-          <input type="checkbox"> Remember me
+          <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+          Option one is this and that&mdash;be sure to include why it's great
         </label>
       </div>
+      <div class="radio">
+        <label>
+          <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+          Option two can be something else and selecting it will deselect option one
+        </label>
+      </div>
+      <div class="radio disabled">
+        <label>
+          <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
+          Option three is disabled
+        </label>
+      </div>
+    </div>
+  </div>
+  <div class="form-group row">
+    <label class="col-sm-2" for="">Checkbox</label>
+    <div class="col-sm-10">
+      <div class="checkbox">
+        <label>
+          <input type="checkbox"> Check me out
+        </label>
+      </div>
+    </div>
+  </div>
+  <div class="form-group row">
+    <div class="col-sm-offset-2 col-sm-10">
       <button type="submit" class="btn btn-secondary">Sign in</button>
     </div>
   </div>

docs/dist/css/bootstrap.css

@@ -377,6 +377,7 @@ th {
 
 label {
   display: inline-block;
+  margin-bottom: .5rem;
 }
 
 input, button, select, textarea {
@@ -1683,8 +1684,8 @@ pre code {
   border: 1px solid #eceeef;
 }
 
-label {
-  margin-bottom: .5rem;
+.form-control-label {
+  padding: .5625rem .75rem;
 }
 
 .form-control {

scss/_forms.scss

@@ -3,12 +3,6 @@
 // --------------------------------------------------
 
 
-// todo: turn this into a class
-label {
-  margin-bottom: .5rem;
-}
-
-
 //
 // Textual form controls
 //
@@ -75,6 +69,19 @@ label {
   display: block;
 }
 
+
+//
+// Labels
+//
+
+// For use with horizontal and inline forms, when you need the label text to
+// align with the form controls.
+.form-control-label {
+  padding: ($padding-base-vertical + $border-width) $padding-base-horizontal;
+  margin-bottom: 0; // Override the `<label>` default
+}
+
+
 // Todo: clear this up
 
 // Special styles for iOS temporal inputs

scss/_reboot.scss

@@ -232,6 +232,7 @@ th {
 label {
   // Allow labels can use `margin` for spacing.
   display: inline-block;
+  margin-bottom: .5rem;
 }
 
 input,