Merge branch 'master' into docs_derp

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

1 files changed, 6 insertions, 2 deletions

diff --git a/docs/css.html b/docs/css.html
index 22439aa77..09d7df311 100644
--- a/docs/css.html
+++ b/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>