Move inline CSS to docs.css.

13 files changed, 45 insertions, 45 deletions

diff --git a/docs/_includes/components/breadcrumbs.html b/docs/_includes/components/breadcrumbs.html
index 04d2f1468..39c6c14b6 100644
--- a/docs/_includes/components/breadcrumbs.html
+++ b/docs/_includes/components/breadcrumbs.html
@@ -11,7 +11,7 @@
       <li><a href="#">Home</a></li>
       <li class="active">Library</li>
     </ol>
-    <ol class="breadcrumb" style="margin-bottom: 5px;">
+    <ol class="breadcrumb">
       <li><a href="#">Home</a></li>
       <li><a href="#">Library</a></li>
       <li class="active">Data</li>
diff --git a/docs/_includes/components/navs.html b/docs/_includes/components/navs.html
index 4a0a4b6c3..2e41e57cf 100644
--- a/docs/_includes/components/navs.html
+++ b/docs/_includes/components/navs.html
@@ -49,7 +49,7 @@
 {% endhighlight %}
   <p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
   <div class="bs-example" data-example-id="simple-nav-stacked">
-    <ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
+    <ul class="nav nav-pills nav-stacked nav-pills-stacked-example">
       <li role="presentation" class="active"><a href="#">Home</a></li>
       <li role="presentation"><a href="#">Profile</a></li>
       <li role="presentation"><a href="#">Messages</a></li>
diff --git a/docs/_includes/css/buttons.html b/docs/_includes/css/buttons.html
index 78cd56487..66bb3d9e6 100644
--- a/docs/_includes/css/buttons.html
+++ b/docs/_includes/css/buttons.html
@@ -112,7 +112,7 @@
 
   <p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
   <div class="bs-example" data-example-id="block-btns">
-    <div class="well" style="max-width: 400px; margin: 0 auto 10px;">
+    <div class="well center-block" style="max-width: 400px;">
       <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
       <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
     </div>
diff --git a/docs/_includes/js/affix.html b/docs/_includes/js/affix.html
index 3cb846ea9..86b9a98e8 100644
--- a/docs/_includes/js/affix.html
+++ b/docs/_includes/js/affix.html
@@ -46,12 +46,12 @@ $('#myAffix').affix({
   <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p>
 
   <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped js-options-table">
       <thead>
        <tr>
-         <th style="width: 100px;">Name</th>
-         <th style="width: 100px;">type</th>
-         <th style="width: 50px;">default</th>
+         <th>Name</th>
+         <th>type</th>
+         <th>default</th>
          <th>description</th>
        </tr>
       </thead>
@@ -80,7 +80,7 @@ $('#myAffix').affix({
     <table class="table table-bordered table-striped bs-events-table">
       <thead>
         <tr>
-          <th style="width: 150px;">Event Type</th>
+          <th>Event Type</th>
           <th>Description</th>
         </tr>
       </thead>
diff --git a/docs/_includes/js/alerts.html b/docs/_includes/js/alerts.html
index 399cd732f..7f3bf99c2 100644
--- a/docs/_includes/js/alerts.html
+++ b/docs/_includes/js/alerts.html
@@ -49,7 +49,7 @@
     <table class="table table-bordered table-striped bs-events-table">
       <thead>
         <tr>
-          <th style="width: 150px;">Event Type</th>
+          <th>Event Type</th>
           <th>Description</th>
         </tr>
       </thead>
diff --git a/docs/_includes/js/carousel.html b/docs/_includes/js/carousel.html
index bf2fbecec..e50708ae1 100644
--- a/docs/_includes/js/carousel.html
+++ b/docs/_includes/js/carousel.html
@@ -155,12 +155,12 @@ $('.carousel').carousel()
   <h3 id="carousel-options">Options</h3>
   <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.</p>
   <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped js-options-table">
       <thead>
        <tr>
-         <th style="width: 100px;">Name</th>
-         <th style="width: 50px;">type</th>
-         <th style="width: 50px;">default</th>
+         <th>Name</th>
+         <th>type</th>
+         <th>default</th>
          <th>description</th>
        </tr>
       </thead>
@@ -230,7 +230,7 @@ $('.carousel').carousel({
     <table class="table table-bordered table-striped bs-events-table">
       <thead>
        <tr>
-         <th style="width: 150px;">Event Type</th>
+         <th>Event Type</th>
          <th>Description</th>
        </tr>
       </thead>
diff --git a/docs/_includes/js/collapse.html b/docs/_includes/js/collapse.html
index ca84ac857..85b56d94a 100644
--- a/docs/_includes/js/collapse.html
+++ b/docs/_includes/js/collapse.html
@@ -192,12 +192,12 @@ $('.collapse').collapse()
   <h3 id="collapse-options">Options</h3>
   <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-parent=""</code>.</p>
   <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped js-options-table">
       <thead>
        <tr>
-         <th style="width: 100px;">Name</th>
-         <th style="width: 50px;">type</th>
-         <th style="width: 50px;">default</th>
+         <th>Name</th>
+         <th>type</th>
+         <th>default</th>
          <th>description</th>
        </tr>
       </thead>
@@ -243,7 +243,7 @@ $('#myCollapsible').collapse({
     <table class="table table-bordered table-striped bs-events-table">
       <thead>
        <tr>
-         <th style="width: 150px;">Event Type</th>
+         <th>Event Type</th>
          <th>Description</th>
        </tr>
       </thead>
diff --git a/docs/_includes/js/dropdowns.html b/docs/_includes/js/dropdowns.html
index 683453096..d00c4da38 100644
--- a/docs/_includes/js/dropdowns.html
+++ b/docs/_includes/js/dropdowns.html
@@ -169,7 +169,7 @@ $('.dropdown-toggle').dropdown()
     <table class="table table-bordered table-striped bs-events-table">
       <thead>
         <tr>
-          <th style="width: 150px;">Event Type</th>
+          <th>Event Type</th>
           <th>Description</th>
         </tr>
       </thead>
diff --git a/docs/_includes/js/modal.html b/docs/_includes/js/modal.html
index f5861f4a5..6fae87cff 100644
--- a/docs/_includes/js/modal.html
+++ b/docs/_includes/js/modal.html
@@ -108,7 +108,7 @@
     </div><!-- /.modal-dialog -->
   </div><!-- /.modal -->
 
-  <div class="bs-example" style="padding-bottom: 24px;">
+  <div class="bs-example bs-example-padded-bottom">
     <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
       Launch demo modal
     </button>
@@ -220,7 +220,7 @@
 
   <h2 id="modals-related-target">Varying modal content based on trigger button</h2>
   <p>Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use <code>event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">HTML <code>data-*</code> attributes</a> (possibly <a href="http://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on <code>relatedTarget</code>,</p>
-  <div class="bs-example" style="padding-bottom: 24px;">
+  <div class="bs-example">
     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button>
@@ -314,12 +314,12 @@ $('#exampleModal').on('show.bs.modal', function (event) {
   <h3 id="modals-options">Options</h3>
   <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p>
   <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped js-options-table">
       <thead>
        <tr>
-         <th style="width: 100px;">Name</th>
-         <th style="width: 50px;">type</th>
-         <th style="width: 50px;">default</th>
+         <th>Name</th>
+         <th>type</th>
+         <th>default</th>
          <th>description</th>
        </tr>
       </thead>
@@ -386,7 +386,7 @@ $('#myModal').modal({
     <table class="table table-bordered table-striped bs-events-table">
       <thead>
        <tr>
-         <th style="width: 150px;">Event Type</th>
+         <th>Event Type</th>
          <th>Description</th>
        </tr>
       </thead>
diff --git a/docs/_includes/js/popovers.html b/docs/_includes/js/popovers.html
index 7e96464d6..21a2efc1d 100644
--- a/docs/_includes/js/popovers.html
+++ b/docs/_includes/js/popovers.html
@@ -76,7 +76,7 @@ $(function () {
   </div>
 
   <h3>Live demo</h3>
-  <div class="bs-example" style="padding-bottom: 24px;">
+  <div class="bs-example bs-example-padded-bottom">
     <button type="button" class="btn btn-lg btn-danger bs-docs-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
   </div>
 {% highlight html %}
@@ -125,7 +125,7 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
     <h4>Specific markup required for dismiss-on-next-click</h4>
     <p>For proper cross-browser and cross-platform behavior, you must use the <code>&lt;a&gt;</code> tag, <i>not</i> the <code>&lt;button&gt;</code> tag, and you also must include a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#tabindex"><code>tabindex</code></a> attribute.</p>
   </div>
-  <div class="bs-example" style="padding-bottom: 24px;">
+  <div class="bs-example bs-example-padded-bottom">
     <a tabindex="0" class="btn btn-lg btn-danger bs-docs-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
   </div>
 {% highlight html %}
@@ -140,12 +140,12 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
   <h3 id="popovers-options">Options</h3>
   <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
   <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped js-options-table js-options-table">
       <thead>
         <tr>
-          <th style="width: 100px;">Name</th>
-          <th style="width: 100px;">Type</th>
-          <th style="width: 50px;">Default</th>
+          <th>Name</th>
+          <th>Type</th>
+          <th>Default</th>
           <th>Description</th>
         </tr>
       </thead>
@@ -272,7 +272,7 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
     <table class="table table-bordered table-striped bs-events-table">
       <thead>
         <tr>
-          <th style="width: 150px;">Event Type</th>
+          <th>Event Type</th>
           <th>Description</th>
         </tr>
       </thead>
diff --git a/docs/_includes/js/scrollspy.html b/docs/_includes/js/scrollspy.html
index 602373172..84370a7bf 100644
--- a/docs/_includes/js/scrollspy.html
+++ b/docs/_includes/js/scrollspy.html
@@ -106,12 +106,12 @@ $('[data-spy="scroll"]').each(function () {
   <h3 id="scrollspy-options">Options</h3>
   <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.</p>
   <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped js-options-table">
       <thead>
        <tr>
-         <th style="width: 100px;">Name</th>
-         <th style="width: 100px;">type</th>
-         <th style="width: 50px;">default</th>
+         <th>Name</th>
+         <th>type</th>
+         <th>default</th>
          <th>description</th>
        </tr>
       </thead>
@@ -131,7 +131,7 @@ $('[data-spy="scroll"]').each(function () {
     <table class="table table-bordered table-striped bs-events-table">
       <thead>
        <tr>
-         <th style="width: 150px;">Event Type</th>
+         <th>Event Type</th>
          <th>Description</th>
        </tr>
       </thead>
diff --git a/docs/_includes/js/tabs.html b/docs/_includes/js/tabs.html
index ffb20345d..8622440fc 100644
--- a/docs/_includes/js/tabs.html
+++ b/docs/_includes/js/tabs.html
@@ -131,7 +131,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
     <table class="table table-bordered table-striped bs-events-table">
       <thead>
        <tr>
-         <th style="width: 150px;">Event Type</th>
+         <th>Event Type</th>
          <th>Description</th>
        </tr>
       </thead>
diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html
index 90fa37208..c4db01978 100644
--- a/docs/_includes/js/tooltips.html
+++ b/docs/_includes/js/tooltips.html
@@ -110,12 +110,12 @@ $('#example').tooltip(options)
   <h3 id="tooltips-options">Options</h3>
   <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
   <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped js-options-table">
       <thead>
         <tr>
-          <th style="width: 100px;">Name</th>
-          <th style="width: 100px;">Type</th>
-          <th style="width: 50px;">Default</th>
+          <th>Name</th>
+          <th>Type</th>
+          <th>Default</th>
           <th>Description</th>
         </tr>
       </thead>
@@ -233,7 +233,7 @@ $('#example').tooltip(options)
     <table class="table table-bordered table-striped bs-events-table">
       <thead>
         <tr>
-          <th style="width: 150px;">Event Type</th>
+          <th>Event Type</th>
           <th>Description</th>
         </tr>
       </thead>