grunt dist

dist/css/bootstrap.css

@@ -2480,7 +2480,8 @@ fieldset[disabled] .radio label,
 fieldset[disabled] .checkbox label {
   cursor: not-allowed;
 }
-.input-sm {
+.input-sm,
+.form-horizontal .form-group-sm .form-control {
   height: 30px;
   padding: 5px 10px;
   font-size: 12px;
@@ -2495,7 +2496,8 @@ textarea.input-sm,
 select[multiple].input-sm {
   height: auto;
 }
-.input-lg {
+.input-lg,
+.form-horizontal .form-group-lg .form-control {
   height: 46px;
   padding: 10px 16px;
   font-size: 18px;
@@ -2705,6 +2707,16 @@ select[multiple].input-lg {
   top: 0;
   right: 15px;
 }
+@media (min-width: 768px) {
+  .form-horizontal .form-group-lg .control-label {
+    padding-top: 14.3px;
+  }
+}
+@media (min-width: 768px) {
+  .form-horizontal .form-group-sm .control-label {
+    padding-top: 6px;
+  }
+}
 .btn {
   display: inline-block;
   padding: 6px 12px;

dist/js/bootstrap.js

@@ -492,7 +492,7 @@ if (typeof define == 'undefined' && typeof exports == 'undefined' && typeof jQue
     $(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
       var href
       var $this   = $(this)
-      var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
+      var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
       var options = $.extend({}, $target.data(), $this.data())
       var slideIndex = $this.attr('data-slide-to')
       if (slideIndex) options.interval = false
@@ -675,7 +675,7 @@ if (typeof define == 'undefined' && typeof exports == 'undefined' && typeof jQue
       var $this   = $(this)
       var target  = $this.attr('data-target')
           || e.preventDefault()
-          || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
+          || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
       var $target = $(target)
       var data    = $target.data('bs.collapse')
       var option  = data ? 'toggle' : $this.data()
@@ -802,7 +802,7 @@ if (typeof define == 'undefined' && typeof exports == 'undefined' && typeof jQue
 
       if (!selector) {
         selector = $this.attr('href')
-        selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
+        selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
       }
 
       var $parent = selector && $(selector)
@@ -1121,13 +1121,13 @@ if (typeof define == 'undefined' && typeof exports == 'undefined' && typeof jQue
     $(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
       var $this   = $(this)
       var href    = $this.attr('href')
-      var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
+      var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7
       var option  = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
 
       if ($this.is('a')) e.preventDefault()
 
       $target.one('show.bs.modal', function (showEvent) {
-        if (showEvent.isDefaultPrevented()) return  // only register focus restorer if modal will actually get shown
+        if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown
         $target.one('hidden.bs.modal', function () {
           $this.is(':visible') && $this.trigger('focus')
         })
@@ -1932,7 +1932,7 @@ if (typeof define == 'undefined' && typeof exports == 'undefined' && typeof jQue
 
       if (!selector) {
         selector = $this.attr('href')
-        selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
+        selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
       }
 
       if ($this.parent('li').hasClass('active')) return

docs/_includes/css/forms.html

@@ -670,6 +670,42 @@
 <select class="form-control input-sm">...</select>
 {% endhighlight %}
 
+  <h3>Horizontal form group sizes</h3>
+  <p>Quickly size labels and form controls within <code>.form-horizontal</code> by adding <code>.form-group-lg</code> or <code>.form-group-sm</code>.</p>
+  <div class="bs-example">
+    <form class="form-horizontal" role="form">
+      <div class="form-group form-group-lg">
+        <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
+        <div class="col-sm-10">
+          <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
+        </div>
+      </div>
+      <div class="form-group form-group-sm">
+        <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
+        <div class="col-sm-10">
+          <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
+        </div>
+      </div>
+    </form>
+  </div><!-- /.bs-example -->
+{% highlight html %}
+<form class="form-horizontal" role="form">
+  <div class="form-group form-group-lg">
+    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
+    <div class="col-sm-10">
+      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
+    </div>
+  </div>
+  <div class="form-group form-group-sm">
+    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
+    <div class="col-sm-10">
+      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
+    </div>
+  </div>
+</form>
+{% endhighlight %}
+
+
   <h3>Column sizing</h3>
   <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
   <div class="bs-example">

less/forms.less

@@ -507,4 +507,29 @@ input[type="checkbox"] {
     top: 0;
     right: (@grid-gutter-width / 2);
   }
+
+  // Form group sizes
+  //
+  // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
+  // inputs and labels within a `.form-group`.
+  .form-group-lg {
+    @media (min-width: @screen-sm-min) {
+      .control-label {
+        padding-top: ((@padding-large-vertical * @line-height-large) + 1);
+      }
+    }
+    .form-control {
+      &:extend(.input-lg);
+    }
+  }
+  .form-group-sm {
+    @media (min-width: @screen-sm-min) {
+      .control-label {
+        padding-top: (@padding-small-vertical + 1);
+      }
+    }
+    .form-control {
+      &:extend(.input-sm);
+    }
+  }
 }