Merge branch 'master' into docs_derp

Conflicts:
	docs/components.html
	docs/css.html

docs/assets/js/blob.js

@@ -1,5 +1,4 @@
-/*!
- * Blob.js
+/* Blob.js
  * A Blob implementation.
  * 2013-12-27
  * 

docs/assets/js/filesaver.js

@@ -1,5 +1,4 @@
-/*!
- * FileSaver.js
+/* FileSaver.js
  * A saveAs() FileSaver implementation.
  * 2013-12-27
  *

docs/components.html

@@ -29,7 +29,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
   <p>For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.</p>
   <div class="bs-callout bs-callout-danger">
     <h4>Don't mix with other components</h4>
-    <p>Icon classes cannot be combined with other elements. They are designed to be standalone elements.</p>
+    <p>Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <code>&lt;span&gt;</code> and apply the icon classes to the <code>&lt;span&gt;</code>.</p>
   </div>
 {% highlight html %}
 <span class="glyphicon glyphicon-search"></span>
@@ -181,7 +181,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
 
   <p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="../javascript/#buttons">our buttons plugin</a>.</p>
 
-  <div class="bs-callout bs-callout-info">
+  <div class="bs-callout bs-callout-warning">
     <h4>Tooltips &amp; popovers in button groups require special setting</h4>
     <p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
   </div>
@@ -795,6 +795,14 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
 </div>
 {% endhighlight %}
 
+  <div class="bs-callout bs-callout-warning">
+    <h4>Tooltips &amp; popovers in input groups require special setting</h4>
+    <p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
+  </div>
+  <div class="bs-callout bs-callout-warning">
+    <h4>Don't mix with other components</h4>
+    <p>Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.</p>
+  </div>
 
   <h2 id="input-groups-sizing">Sizing</h2>
   <p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
@@ -1417,7 +1425,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
     <p>There are some caveats regarding using form controls within fixed elements on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
   </div>
 
-  <div class="bs-callout bs-callout-danger">
+  <div class="bs-callout bs-callout-warning">
     <h4>Always add labels</h4>
     <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline navbar forms, you can hide the labels using the <code>.sr-only</code> class.</p>
   </div>

docs/css.html

@@ -1568,6 +1568,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <button type="submit" class="btn btn-default">Submit</button>
 </form>
 {% endhighlight %}
+    <div class="bs-callout bs-callout-warning">
+      <h4>Don't mix form groups with input groups</h4>
+      <p>Do not mix form groups directly with <a href="/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p>
+    </div>
 
 
   <h2 id="forms-inline">Inline form</h2>
@@ -1576,7 +1580,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h4>Requires custom widths</h4>
     <p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p>
   </div>
-  <div class="bs-callout bs-callout-danger">
+  <div class="bs-callout bs-callout-warning">
     <h4>Always add labels</h4>
     <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p>
   </div>
@@ -2349,7 +2353,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <img src="..." alt="..." class="img-thumbnail">
 {% endhighlight %}
 
-  <div class="bs-callout bs-callout-warning">
+  <div class="bs-callout bs-callout-info">
     <h4>Responsive images</h4>
     <p>Looking for how to make images more responsive? <a href="#overview-responsive-images">Check out the responsive images section</a> up top.</p>
   </div>

docs/javascript.html

@@ -925,7 +925,7 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
       <h4>Opt-in functionality</h4>
       <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
     </div>
-    <div class="bs-callout bs-callout-info">
+    <div class="bs-callout bs-callout-warning">
       <h4>Tooltips in button groups and input groups require special setting</h4>
       <p>When using tooltips on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).</p>
     </div>
@@ -1110,7 +1110,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
       <h4>Opt-in functionality</h4>
       <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
     </div>
-    <div class="bs-callout bs-callout-info">
+    <div class="bs-callout bs-callout-warning">
       <h4>Popovers in button groups and input groups require special setting</h4>
       <p>When using popovers on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).</p>
     </div>