clarify docs regarding non-mixable components

diff --git a/docs/components.html b/docs/components.html
index 4caa9e6f28f30c9990f6fe1aed285e4b55cef852..0db89d977d896a48a28304f2f03b8b739a37c85e 100644 (file)
--- a/docs/components.html
+++ b/docs/components.html
@@ -31,7 +31,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>
@@ -761,7 +761,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
     </div>
     <div class="bs-callout bs-callout-info">
       <h4>Don't mix with other components</h4>
-      <p>Do not mix form group or grid column classes directly with input groups.</p>
+      <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>
 
 

diff --git a/docs/css.html b/docs/css.html
index d8d6b8bb5bc0b95b2a81e98a142d8e044ad1770c..315e8249ae26ee99df30013cf965e31cea41af94 100644 (file)
--- a/docs/css.html
+++ b/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>