diff --git a/docs/components.html b/docs/components.html index a400d216dced9072361e50aaca4ac89ebe2194ba..ec15779b134467fe945a17661eef5c91fa3f81d8 100644 --- 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><span></code> and apply the icon classes to the <code><span></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-warning"> <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 643d1dc0eb37e1071731a3f576f41a95fd67be49..81b9e53c1fe14bef4398f2206de02926f133dd6c 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1580,6 +1580,10 @@ For example, <code><section></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>