Merge pull request #12232 from twbs/mixing-docs

clarify docs regarding non-mixable components

docs/css.html

@@ -1580,6 +1580,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>