Merge branch '3.0.0-docs-calloutfam' of https://github.com/juthilo/bootstrap-wip into juthilo-3.0.0-docs-calloutfam

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

1 files changed, 19 insertions, 16 deletions

diff --git a/docs/css.html b/docs/css.html
index e87abfbc0..e15157fba 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -259,7 +259,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 </div>
 {% endhighlight %}
 
-    <div class="bs-callout">
+    <div class="bs-callout bs-callout-danger">
       <h4>Need more examples?</h4>
       <p>We dive into more grid layouts in a separate page, free of chrome and documentation to better show you the power of the grid.</p>
       <p><a class="btn btn-danger" target="_blank" href="../examples/grid/">More grid examples</a></p>
@@ -520,7 +520,10 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 <em>rendered as italicized text</em>
 {% endhighlight %}
 
-    <p>Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
+    <div class="bs-callout bs-callout-info">
+      <h4>Alternate elements</h4>
+      <p>Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
+    </div>
 
     <h3>Alignment classes</h3>
     <p>Easily realign text to components with text alignment classes.</p>
@@ -788,10 +791,10 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 </dl>
 {% endhighlight %}
 
-    <h5>Auto-truncating</h5>
-    <p>
-      Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
-    </p>
+    <div class="bs-callout bs-callout-info">
+      <h4>Auto-truncating</h4>
+      <p>Horizontal description lists will truncate terms that are too long to fit in the left column with <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.</p>
+    </div>
   </div>
 
 
@@ -878,7 +881,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h3 id="tables-striped">Striped</h3>
     <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>.</p>
-    <div class="bs-callout">
+    <div class="bs-callout bs-callout-danger">
       <h4>Cross-browser compatibility</h4>
       <p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in IE8.</p>
     </div>
@@ -1172,7 +1175,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h3 id="forms-inline">Inline form</h3>
     <p>Add <code>.form-inline</code> for left-aligned and inline-block controls for a compact layout.</p>
-    <div class="bs-callout">
+    <div class="bs-callout bs-callout-danger">
       <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>
@@ -1254,7 +1257,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h3>Inputs</h3>
     <p>Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.</p>
-    <div class="bs-callout">
+    <div class="bs-callout bs-callout-danger">
       <h4>Type declaration required</h4>
       <p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
     </div>
@@ -1402,12 +1405,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
     <p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once.</p>
 
-    <div class="bs-callout">
+    <div class="bs-callout bs-callout-warning">
       <h4>Link functionality of <code>&lt;a&gt;</code> not impacted</h4>
       <p>This class will only change the appearance of <code>&lt;a class="btn btn-default"&gt;</code> buttons, not their functionality. Use custom JavaScript to disable links here.</p>
     </div>
 
-    <div class="bs-callout">
+    <div class="bs-callout bs-callout-danger">
       <h4>Cross-browser compatibility</h4>
       <p>While Bootstrap will apply these styles in all browsers, IE and Safari don't actually support the <code>&lt;disabled&gt;</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
     </div>
@@ -1504,7 +1507,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h3 id="forms-input-groups">Input groups</h3>
     <p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with an <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>
 
-    <div class="bs-callout">
+    <div class="bs-callout bs-callout-danger">
       <h4>Cross-browser compatibility</h4>
       <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
     </div>
@@ -1891,7 +1894,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button>
 {% endhighlight %}
 
-    <div class="bs-callout">
+    <div class="bs-callout bs-callout-danger">
       <h4>Cross-browser compatibility</h4>
       <p>If you add the <code>disabled</code> attribute to a <code>&lt;button&gt;</code>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.</p>
     </div>
@@ -1909,7 +1912,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>
       We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
     </p>
-    <div class="bs-callout">
+    <div class="bs-callout bs-callout-warning">
       <h4>Link functionality not impacted</h4>
       <p>This class will only change the <code>&lt;a&gt;</code>'s appearance, not its functionality. Use custom JavaScript to disable links here.</p>
     </div>
@@ -1930,7 +1933,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <input class="btn btn-default" type="submit" value="Submit">
 {% endhighlight %}
 
-    <div class="bs-callout">
+    <div class="bs-callout bs-callout-warning">
       <h4>Cross-browser rendering</h4>
       <p>As a best practice, <strong>we highly recommend using the <code>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
     </div>
@@ -1947,7 +1950,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
 
     <p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project.</p>
-    <div class="bs-callout">
+    <div class="bs-callout bs-callout-danger">
       <h4>Cross-browser compatibility</h4>
       <p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
     </div>