RubyGems - card - Versions diffs - 1.92.2 → 1.93.0 - Mend

card 1.92.2 → 1.93.0

Files changed (965) hide show

data/mod/bootstrap/vendor/bootstrap/docs/_includes/css/overview.html ADDED

@@ -0,0 +1,52 @@
+<div class="bs-docs-section">
+  <h1 id="overview" class="page-header">Overview</h1>
+  <p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
+  <h2 id="overview-doctype">HTML5 doctype</h2>
+  <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
+{% highlight html %}
+<!DOCTYPE html>
+<html lang="en">
+  ...
+</html>
+{% endhighlight %}
+  <h2 id="overview-mobile">Mobile first</h2>
+  <p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
+  <p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code>&lt;head&gt;</code>.</p>
+{% highlight html %}
+<meta name="viewport" content="width=device-width, initial-scale=1">
+{% endhighlight %}
+  <p>You can disable zooming capabilities on mobile devices by adding <code>user-scalable=no</code> to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!</p>
+{% highlight html %}
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+{% endhighlight %}
+  <h2 id="overview-type-links">Typography and links</h2>
+  <p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
+  <ul>
+    <li>Set <code>background-color: #fff;</code> on the <code>body</code></li>
+    <li>Use the <code>@font-family-base</code>, <code>@font-size-base</code>, and <code>@line-height-base</code> attributes as our typographic base</li>
+    <li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li>
+  </ul>
+  <p>These styles can be found within <code>scaffolding.less</code>.</p>
+  <h2 id="overview-normalize">Normalize.css</h2>
+  <p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="https://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="https://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
+  <h2 id="overview-container">Containers</h2>
+  <p>Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to <code>padding</code> and more, neither container is nestable.</p>
+  <p>Use <code>.container</code> for a responsive fixed width container.</p>
+{% highlight html %}
+<div class="container">
+  ...
+</div>
+{% endhighlight %}
+  <p>Use <code>.container-fluid</code> for a full width container, spanning the entire width of your viewport.</p>
+{% highlight html %}
+<div class="container-fluid">
+  ...
+</div>
+{% endhighlight %}
+</div>

data/mod/bootstrap/vendor/bootstrap/docs/_includes/css/responsive-utilities.html ADDED

@@ -0,0 +1,258 @@
+<div class="bs-docs-section">
+  <h1 id="responsive-utilities" class="page-header">Responsive utilities</h1>
+  <p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
+  <p>Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.</p>
+  <h2 id="responsive-utilities-classes">Available classes</h2>
+  <p>Use a single or combination of the available classes for toggling content across viewport breakpoints.</p>
+  <div class="table-responsive">
+    <table class="table table-bordered table-striped responsive-utilities">
+      <thead>
+        <tr>
+          <th></th>
+          <th>
+            Extra small devices
+            <small>Phones (&lt;768px)</small>
+          </th>
+          <th>
+            Small devices
+            <small>Tablets (&ge;768px)</small>
+          </th>
+          <th>
+            Medium devices
+            <small>Desktops (&ge;992px)</small>
+          </th>
+          <th>
+            Large devices
+            <small>Desktops (&ge;1200px)</small>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row"><code>.visible-xs-*</code></th>
+          <td class="is-visible">Visible</td>
+          <td class="is-hidden">Hidden</td>
+          <td class="is-hidden">Hidden</td>
+          <td class="is-hidden">Hidden</td>
+        </tr>
+        <tr>
+          <th scope="row"><code>.visible-sm-*</code></th>
+          <td class="is-hidden">Hidden</td>
+          <td class="is-visible">Visible</td>
+          <td class="is-hidden">Hidden</td>
+          <td class="is-hidden">Hidden</td>
+        </tr>
+        <tr>
+          <th scope="row"><code>.visible-md-*</code></th>
+          <td class="is-hidden">Hidden</td>
+          <td class="is-hidden">Hidden</td>
+          <td class="is-visible">Visible</td>
+          <td class="is-hidden">Hidden</td>
+        </tr>
+        <tr>
+          <th scope="row"><code>.visible-lg-*</code></th>
+          <td class="is-hidden">Hidden</td>
+          <td class="is-hidden">Hidden</td>
+          <td class="is-hidden">Hidden</td>
+          <td class="is-visible">Visible</td>
+        </tr>
+      </tbody>
+      <tbody>
+        <tr>
+          <th scope="row"><code>.hidden-xs</code></th>
+          <td class="is-hidden">Hidden</td>
+          <td class="is-visible">Visible</td>
+          <td class="is-visible">Visible</td>
+          <td class="is-visible">Visible</td>
+        </tr>
+        <tr>
+          <th scope="row"><code>.hidden-sm</code></th>
+          <td class="is-visible">Visible</td>
+          <td class="is-hidden">Hidden</td>
+          <td class="is-visible">Visible</td>
+          <td class="is-visible">Visible</td>
+        </tr>
+        <tr>
+          <th scope="row"><code>.hidden-md</code></th>
+          <td class="is-visible">Visible</td>
+          <td class="is-visible">Visible</td>
+          <td class="is-hidden">Hidden</td>
+          <td class="is-visible">Visible</td>
+        </tr>
+        <tr>
+          <th scope="row"><code>.hidden-lg</code></th>
+          <td class="is-visible">Visible</td>
+          <td class="is-visible">Visible</td>
+          <td class="is-visible">Visible</td>
+          <td class="is-hidden">Hidden</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <p>As of v3.2.0, the <code>.visible-*-*</code> classes for each breakpoint come in three variations, one for each CSS <code>display</code> property value listed below.</p>
+  <div class="table-responsive">
+    <table class="table table-bordered table-striped">
+      <thead>
+        <tr>
+          <th>Group of classes</th>
+          <th>CSS <code>display</code></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row"><code>.visible-*-block</code></th>
+          <td><code>display: block;</code></td>
+        </tr>
+        <tr>
+          <th scope="row"><code>.visible-*-inline</code></th>
+          <td><code>display: inline;</code></td>
+        </tr>
+        <tr>
+          <th scope="row"><code>.visible-*-inline-block</code></th>
+          <td><code>display: inline-block;</code></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <p>So, for extra small (<code>xs</code>) screens for example, the available <code>.visible-*-*</code> classes are: <code>.visible-xs-block</code>, <code>.visible-xs-inline</code>, and <code>.visible-xs-inline-block</code>.</p>
+  <p>The classes <code>.visible-xs</code>, <code>.visible-sm</code>, <code>.visible-md</code>, and <code>.visible-lg</code> also exist, but are <strong>deprecated as of v3.2.0</strong>. They are approximately equivalent to <code>.visible-*-block</code>, except with additional special cases for toggling <code>&lt;table&gt;</code>-related elements.</p>
+  <h2 id="responsive-utilities-print">Print classes</h2>
+  <p>Similar to the regular responsive classes, use these for toggling content for print.</p>
+  <div class="table-responsive">
+    <table class="table table-bordered table-striped responsive-utilities">
+      <thead>
+        <tr>
+          <th>Classes</th>
+          <th>Browser</th>
+          <th>Print</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row">
+            <code>.visible-print-block</code><br>
+            <code>.visible-print-inline</code><br>
+            <code>.visible-print-inline-block</code>
+          </th>
+          <td class="is-hidden">Hidden</td>
+          <td class="is-visible">Visible</td>
+        </tr>
+        <tr>
+          <th scope="row"><code>.hidden-print</code></th>
+          <td class="is-visible">Visible</td>
+          <td class="is-hidden">Hidden</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <p>The class <code>.visible-print</code> also exists but is <strong>deprecated</strong> as of v3.2.0. It is approximately equivalent to <code>.visible-print-block</code>, except with additional special cases for <code>&lt;table&gt;</code>-related elements.</p>
+  <h2 id="responsive-utilities-tests">Test cases</h2>
+  <p>Resize your browser or load on different devices to test the responsive utility classes.</p>
+  <h3>Visible on...</h3>
+  <p>Green checkmarks indicate the element <strong>is visible</strong> in your current viewport.</p>
+  <div class="row responsive-utilities-test visible-on">
+    <div class="col-xs-6 col-sm-3">
+      <span class="hidden-xs">Extra small</span>
+      <span class="visible-xs-block">&#10004; Visible on x-small</span>
+    </div>
+    <div class="col-xs-6 col-sm-3">
+      <span class="hidden-sm">Small</span>
+      <span class="visible-sm-block">&#10004; Visible on small</span>
+    </div>
+    <div class="clearfix visible-xs-block"></div>
+    <div class="col-xs-6 col-sm-3">
+      <span class="hidden-md">Medium</span>
+      <span class="visible-md-block">&#10004; Visible on medium</span>
+    </div>
+    <div class="col-xs-6 col-sm-3">
+      <span class="hidden-lg">Large</span>
+      <span class="visible-lg-block">&#10004; Visible on large</span>
+    </div>
+  </div>
+  <div class="row responsive-utilities-test visible-on">
+    <div class="col-xs-6">
+      <span class="hidden-xs hidden-sm">Extra small and small</span>
+      <span class="visible-xs-block visible-sm-block">&#10004; Visible on x-small and small</span>
+    </div>
+    <div class="col-xs-6">
+      <span class="hidden-md hidden-lg">Medium and large</span>
+      <span class="visible-md-block visible-lg-block">&#10004; Visible on medium and large</span>
+    </div>
+    <div class="clearfix visible-xs-block"></div>
+    <div class="col-xs-6">
+      <span class="hidden-xs hidden-md">Extra small and medium</span>
+      <span class="visible-xs-block visible-md-block">&#10004; Visible on x-small and medium</span>
+    </div>
+    <div class="col-xs-6">
+      <span class="hidden-sm hidden-lg">Small and large</span>
+      <span class="visible-sm-block visible-lg-block">&#10004; Visible on small and large</span>
+    </div>
+    <div class="clearfix visible-xs-block"></div>
+    <div class="col-xs-6">
+      <span class="hidden-xs hidden-lg">Extra small and large</span>
+      <span class="visible-xs-block visible-lg-block">&#10004; Visible on x-small and large</span>
+    </div>
+    <div class="col-xs-6">
+      <span class="hidden-sm hidden-md">Small and medium</span>
+      <span class="visible-sm-block visible-md-block">&#10004; Visible on small and medium</span>
+    </div>
+  </div>
+  <h3>Hidden on...</h3>
+  <p>Here, green checkmarks also indicate the element <strong>is hidden</strong> in your current viewport.</p>
+  <div class="row responsive-utilities-test hidden-on">
+    <div class="col-xs-6 col-sm-3">
+      <span class="hidden-xs">Extra small</span>
+      <span class="visible-xs-block">&#10004; Hidden on x-small</span>
+    </div>
+    <div class="col-xs-6 col-sm-3">
+      <span class="hidden-sm">Small</span>
+      <span class="visible-sm-block">&#10004; Hidden on small</span>
+    </div>
+    <div class="clearfix visible-xs-block"></div>
+    <div class="col-xs-6 col-sm-3">
+      <span class="hidden-md">Medium</span>
+      <span class="visible-md-block">&#10004; Hidden on medium</span>
+    </div>
+    <div class="col-xs-6 col-sm-3">
+      <span class="hidden-lg">Large</span>
+      <span class="visible-lg-block">&#10004; Hidden on large</span>
+    </div>
+  </div>
+  <div class="row responsive-utilities-test hidden-on">
+    <div class="col-xs-6">
+      <span class="hidden-xs hidden-sm">Extra small and small</span>
+      <span class="visible-xs-block visible-sm-block">&#10004; Hidden on x-small and small</span>
+    </div>
+    <div class="col-xs-6">
+      <span class="hidden-md hidden-lg">Medium and large</span>
+      <span class="visible-md-block visible-lg-block">&#10004; Hidden on medium and large</span>
+    </div>
+    <div class="clearfix visible-xs-block"></div>
+    <div class="col-xs-6">
+      <span class="hidden-xs hidden-md">Extra small and medium</span>
+      <span class="visible-xs-block visible-md-block">&#10004; Hidden on x-small and medium</span>
+    </div>
+    <div class="col-xs-6">
+      <span class="hidden-sm hidden-lg">Small and large</span>
+      <span class="visible-sm-block visible-lg-block">&#10004; Hidden on small and large</span>
+    </div>
+    <div class="clearfix visible-xs-block"></div>
+    <div class="col-xs-6">
+      <span class="hidden-xs hidden-lg">Extra small and large</span>
+      <span class="visible-xs-block visible-lg-block">&#10004; Hidden on x-small and large</span>
+    </div>
+    <div class="col-xs-6">
+      <span class="hidden-sm hidden-md">Small and medium</span>
+      <span class="visible-sm-block visible-md-block">&#10004; Hidden on small and medium</span>
+    </div>
+  </div>
+</div>

data/mod/bootstrap/vendor/bootstrap/docs/_includes/css/sass.html ADDED

@@ -0,0 +1,52 @@
+<div class="bs-docs-section">
+  <h1 id="sass" class="page-header">Using Sass</h1>
+  <p class="lead">While Bootstrap is built on Less, it also has an <a href="{{ site.sass_repo }}">official Sass port</a>. We maintain it in a separate GitHub repository and handle updates with a conversion script.</p>
+  <h2 id="sass-contents">What's included</h2>
+  <p>Since the Sass port has a separate repo and serves a slightly different audience, the contents of the project differ greatly from the main Bootstrap project. This ensures the Sass port is as compatible with as many Sass-based systems as possible.</p>
+  <div class="table-responsive">
+    <table class="table table-bordered table-striped">
+      <thead>
+        <tr>
+          <th>Path</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row"><code>lib/</code></th>
+          <td>Ruby gem code (Sass configuration, Rails and Compass integrations)</td>
+        </tr>
+        <tr>
+          <th scope="row"><code>tasks/</code></th>
+          <td>Converter scripts (turning upstream Less to Sass)</td>
+        </tr>
+        <tr>
+          <th scope="row"><code>test/</code></th>
+          <td>Compilation tests</td>
+        </tr>
+        <tr>
+          <th scope="row"><code>templates/</code></th>
+          <td>Compass package manifest</td>
+        </tr>
+        <tr>
+          <th scope="row"><code>vendor/assets/</code></th>
+          <td>Sass, JavaScript, and font files</td>
+        </tr>
+        <tr>
+          <th scope="row"><code>Rakefile</code></th>
+          <td>Internal tasks, such as rake and convert</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <p>Visit the <a href="{{ site.sass_repo }}">Sass port's GitHub repository</a> to see these files in action.</p>
+  <h2 id="sass-installation">Installation</h2>
+  <p>For information on how to install and use Bootstrap for Sass, consult the <a href="{{ site.sass_repo }}">GitHub repository readme</a>. It's the most up to date source and includes information for use with Rails, Compass, and standard Sass projects.</p>
+  <p>
+    <a class="btn btn-lg btn-outline" href="{{ site.sass_repo }}">Bootstrap for Sass</a>
+  </p>
+</div>

data/mod/bootstrap/vendor/bootstrap/docs/_includes/css/tables.html ADDED

@@ -0,0 +1,467 @@
+<div class="bs-docs-section">
+  <h1 id="tables" class="page-header">Tables</h1>
+  <h2 id="tables-example">Basic example</h2>
+  <p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
+  <div class="bs-example" data-example-id="simple-table">
+    <table class="table">
+      <caption>Optional table caption.</caption>
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>Username</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row">1</th>
+          <td>Mark</td>
+          <td>Otto</td>
+          <td>@mdo</td>
+        </tr>
+        <tr>
+          <th scope="row">2</th>
+          <td>Jacob</td>
+          <td>Thornton</td>
+          <td>@fat</td>
+        </tr>
+        <tr>
+          <th scope="row">3</th>
+          <td>Larry</td>
+          <td>the Bird</td>
+          <td>@twitter</td>
+        </tr>
+      </tbody>
+    </table>
+  </div><!-- /example -->
+{% highlight html %}
+<table class="table">
+  ...
+</table>
+{% endhighlight %}
+  <h2 id="tables-striped">Striped rows</h2>
+  <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 bs-callout-danger" id="callout-tables-striped-ie8">
+    <h4>Cross-browser compatibility</h4>
+    <p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in Internet Explorer 8.</p>
+  </div>
+  <div class="bs-example" data-example-id="striped-table">
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>Username</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row">1</th>
+          <td>Mark</td>
+          <td>Otto</td>
+          <td>@mdo</td>
+        </tr>
+        <tr>
+          <th scope="row">2</th>
+          <td>Jacob</td>
+          <td>Thornton</td>
+          <td>@fat</td>
+        </tr>
+        <tr>
+          <th scope="row">3</th>
+          <td>Larry</td>
+          <td>the Bird</td>
+          <td>@twitter</td>
+        </tr>
+      </tbody>
+    </table>
+  </div><!-- /example -->
+{% highlight html %}
+<table class="table table-striped">
+  ...
+</table>
+{% endhighlight %}
+  <h2 id="tables-bordered">Bordered table</h2>
+  <p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p>
+  <div class="bs-example" data-example-id="bordered-table">
+    <table class="table table-bordered">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>Username</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row">1</th>
+          <td>Mark</td>
+          <td>Otto</td>
+          <td>@mdo</td>
+        </tr>
+        <tr>
+          <th scope="row">2</th>
+          <td>Jacob</td>
+          <td>Thornton</td>
+          <td>@fat</td>
+        </tr>
+        <tr>
+          <th scope="row">3</th>
+          <td>Larry</td>
+          <td>the Bird</td>
+          <td>@twitter</td>
+        </tr>
+      </tbody>
+    </table>
+  </div><!-- /example -->
+{% highlight html %}
+<table class="table table-bordered">
+  ...
+</table>
+{% endhighlight %}
+  <h2 id="tables-hover-rows">Hover rows</h2>
+  <p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
+  <div class="bs-example" data-example-id="hoverable-table">
+    <table class="table table-hover">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>Username</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row">1</th>
+          <td>Mark</td>
+          <td>Otto</td>
+          <td>@mdo</td>
+        </tr>
+        <tr>
+          <th scope="row">2</th>
+          <td>Jacob</td>
+          <td>Thornton</td>
+          <td>@fat</td>
+        </tr>
+        <tr>
+          <th scope="row">3</th>
+          <td>Larry</td>
+          <td>the Bird</td>
+          <td>@twitter</td>
+        </tr>
+      </tbody>
+    </table>
+  </div><!-- /example -->
+{% highlight html %}
+<table class="table table-hover">
+  ...
+</table>
+{% endhighlight %}
+  <h2 id="tables-condensed">Condensed table</h2>
+  <p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
+  <div class="bs-example" data-example-id="condensed-table">
+    <table class="table table-condensed">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>Username</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row">1</th>
+          <td>Mark</td>
+          <td>Otto</td>
+          <td>@mdo</td>
+        </tr>
+        <tr>
+          <th scope="row">2</th>
+          <td>Jacob</td>
+          <td>Thornton</td>
+          <td>@fat</td>
+        </tr>
+        <tr>
+          <th scope="row">3</th>
+          <td colspan="2">Larry the Bird</td>
+          <td>@twitter</td>
+        </tr>
+      </tbody>
+    </table>
+  </div><!-- /example -->
+{% highlight html %}
+<table class="table table-condensed">
+  ...
+</table>
+{% endhighlight %}
+  <h2 id="tables-contextual-classes">Contextual classes</h2>
+  <p>Use contextual classes to color table rows or individual cells.</p>
+  <div class="table-responsive">
+    <table class="table table-bordered table-striped">
+      <colgroup>
+        <col class="col-xs-1">
+        <col class="col-xs-7">
+      </colgroup>
+      <thead>
+        <tr>
+          <th>Class</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row">
+            <code>.active</code>
+          </th>
+          <td>Applies the hover color to a particular row or cell</td>
+        </tr>
+        <tr>
+          <th scope="row">
+            <code>.success</code>
+          </th>
+          <td>Indicates a successful or positive action</td>
+        </tr>
+        <tr>
+          <th scope="row">
+            <code>.info</code>
+          </th>
+          <td>Indicates a neutral informative change or action</td>
+        </tr>
+        <tr>
+          <th scope="row">
+            <code>.warning</code>
+          </th>
+          <td>Indicates a warning that might need attention</td>
+        </tr>
+        <tr>
+          <th scope="row">
+            <code>.danger</code>
+          </th>
+          <td>Indicates a dangerous or potentially negative action</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="bs-example" data-example-id="contextual-table">
+    <table class="table">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>Column heading</th>
+          <th>Column heading</th>
+          <th>Column heading</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr class="active">
+          <th scope="row">1</th>
+          <td>Column content</td>
+          <td>Column content</td>
+          <td>Column content</td>
+        </tr>
+        <tr>
+          <th scope="row">2</th>
+          <td>Column content</td>
+          <td>Column content</td>
+          <td>Column content</td>
+        </tr>
+        <tr class="success">
+          <th scope="row">3</th>
+          <td>Column content</td>
+          <td>Column content</td>
+          <td>Column content</td>
+        </tr>
+        <tr>
+          <th scope="row">4</th>
+          <td>Column content</td>
+          <td>Column content</td>
+          <td>Column content</td>
+        </tr>
+        <tr class="info">
+          <th scope="row">5</th>
+          <td>Column content</td>
+          <td>Column content</td>
+          <td>Column content</td>
+        </tr>
+        <tr>
+          <th scope="row">6</th>
+          <td>Column content</td>
+          <td>Column content</td>
+          <td>Column content</td>
+        </tr>
+        <tr class="warning">
+          <th scope="row">7</th>
+          <td>Column content</td>
+          <td>Column content</td>
+          <td>Column content</td>
+        </tr>
+        <tr>
+          <th scope="row">8</th>
+          <td>Column content</td>
+          <td>Column content</td>
+          <td>Column content</td>
+        </tr>
+        <tr class="danger">
+          <th scope="row">9</th>
+          <td>Column content</td>
+          <td>Column content</td>
+          <td>Column content</td>
+        </tr>
+      </tbody>
+    </table>
+  </div><!-- /example -->
+{% highlight html %}
+<!-- On rows -->
+<tr class="active">...</tr>
+<tr class="success">...</tr>
+<tr class="warning">...</tr>
+<tr class="danger">...</tr>
+<tr class="info">...</tr>
+<!-- On cells (`td` or `th`) -->
+<tr>
+  <td class="active">...</td>
+  <td class="success">...</td>
+  <td class="warning">...</td>
+  <td class="danger">...</td>
+  <td class="info">...</td>
+</tr>
+{% endhighlight %}
+  <div class="bs-callout bs-callout-warning" id="callout-tables-context-accessibility">
+    <h4>Conveying meaning to assistive technologies</h4>
+    <p>Using color to add meaning to a table row or individual cell only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text in the relevant table row/cell), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
+  </div>
+  <h2 id="tables-responsive">Responsive tables</h2>
+  <p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p>
+  <div class="bs-callout bs-callout-warning" id="callout-tables-responsive-overflow">
+    <h4>Vertical clipping/truncation</h4>
+    <p>Responsive tables make use of <code>overflow-y: hidden</code>, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.</p>
+  </div>
+  <div class="bs-callout bs-callout-warning" id="callout-tables-responsive-ff-fieldset">
+    <h4>Firefox and fieldsets</h4>
+    <p>Firefox has some awkward fieldset styling involving <code>width</code> that interferes with the responsive table. This cannot be overridden without a Firefox-specific hack that we <strong>don't</strong> provide in Bootstrap:</p>
+{% highlight css %}
+@-moz-document url-prefix() {
+  fieldset { display: table-cell; }
+}
+{% endhighlight %}
+    <p>For more information, read <a href="https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685">this Stack Overflow answer</a>.</p>
+  </div>
+  <div class="bs-example" data-example-id="simple-responsive-table">
+    <div class="table-responsive">
+      <table class="table">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row">1</th>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+          <tr>
+            <th scope="row">2</th>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+          <tr>
+            <th scope="row">3</th>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+        </tbody>
+      </table>
+    </div><!-- /.table-responsive -->
+    <div class="table-responsive">
+      <table class="table table-bordered">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row">1</th>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+          <tr>
+            <th scope="row">2</th>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+          <tr>
+            <th scope="row">3</th>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+        </tbody>
+      </table>
+    </div><!-- /.table-responsive -->
+  </div><!-- /example -->
+{% highlight html %}
+<div class="table-responsive">
+  <table class="table">
+    ...
+  </table>
+</div>
+{% endhighlight %}
+</div>