.bs-docs-sidenote to .bs-callout

docs/css.html

@@ -738,7 +738,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-docs-sidenote">
+    <div class="bs-callout">
       <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>
@@ -1038,7 +1038,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-docs-sidenote">
+    <div class="bs-callout">
       <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>
@@ -1130,7 +1130,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-docs-sidenote">
+    <div class="bs-callout">
       <h4>Type declaration required</h4>
       <p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
     </div>
@@ -1269,7 +1269,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h3 id="forms-invalid-inputs">Invalid inputs</h3>
     <p>Style inputs via default browser functionality. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
 
-    <div class="bs-docs-sidenote">
+    <div class="bs-callout">
       <h4>Cross-browser compatibility</h4>
       <p>Invalid inputs are styled via the <code>:invalid</code> CSS selector, which is not supported by Internet Explorer 9 and below.</p>
     </div>
@@ -1293,12 +1293,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-docs-sidenote">
+    <div class="bs-callout">
       <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"&gt;</code> buttons, not their functionality. Use custom JavaScript to disable links here.</p>
     </div>
 
-    <div class="bs-docs-sidenote">
+    <div class="bs-callout">
       <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>
@@ -1399,7 +1399,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 a <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>
 
-    <div class="bs-docs-sidenote">
+    <div class="bs-callout">
       <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>
@@ -1816,7 +1816,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-docs-sidenote">
+    <div class="bs-callout">
       <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>
@@ -1834,7 +1834,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-docs-sidenote">
+    <div class="bs-callout">
       <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>
@@ -1855,7 +1855,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-docs-sidenote">
+    <div class="bs-callout">
       <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>
@@ -1872,7 +1872,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-docs-sidenote">
+    <div class="bs-callout">
       <h4>Cross-browser compatibility</h4>
       <p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
     </div>