bootstrap_styleguide 0.1.0

data/app/views/bootstrap_styleguide/content/tables.html.erb

@@ -0,0 +1,74 @@
+<h1 id="content">Tables</h1>
+<p>Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.</p>
+
+<h2>Overview</h2>
+<p>Due to the widespread use of <code>&lt;table&gt;</code> elements across third-party widgets like calendars and date pickers, Bootstrap’s tables are <strong>opt-in</strong>. Add the base class <code>.table</code> to any <code>&lt;table&gt;</code>, then extend with our optional modifier classes or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent.</p>
+
+<p>Using the most basic table markup, here’s how <code>.table</code>-based tables look in Bootstrap.</p>
+
+<%= example_with_code do %>
+  <table class="table">
+    <thead>
+      <tr>
+        <th scope="col">#</th>
+        <th scope="col">First</th>
+        <th scope="col">Last</th>
+        <th scope="col">Handle</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>
+<% end %>
+
+<h2>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>
+
+<%= example_with_code do %>
+  <table class="table table-striped">
+    <thead>
+      <tr>
+        <th scope="col">#</th>
+        <th scope="col">First</th>
+        <th scope="col">Last</th>
+        <th scope="col">Handle</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>
+<% end %>

data/app/views/bootstrap_styleguide/content/typography.html.erb

@@ -0,0 +1,68 @@
+<h1 id="content">Typography</h1>
+<p>Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p>
+
+<h2>Headings</h2>
+<p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code>, are available.</p>
+
+<table class="table">
+  <thead>
+    <tr>
+      <th>Heading</th>
+      <th>Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <code>&lt;h1&gt;&lt;/h1&gt;</code>
+      </td>
+      <td><span class="h1">h1. Bootstrap heading</span></td>
+    </tr>
+    <tr>
+      <td>
+        <code>&lt;h2&gt;&lt;/h2&gt;</code>
+      </td>
+      <td><span class="h2">h2. Bootstrap heading</span></td>
+    </tr>
+    <tr>
+      <td>
+        <code>&lt;h3&gt;&lt;/h3&gt;</code>
+      </td>
+      <td><span class="h3">h3. Bootstrap heading</span></td>
+    </tr>
+    <tr>
+      <td>
+        <code>&lt;h4&gt;&lt;/h4&gt;</code>
+      </td>
+      <td><span class="h4">h4. Bootstrap heading</span></td>
+    </tr>
+    <tr>
+      <td>
+        <code>&lt;h5&gt;&lt;/h5&gt;</code>
+      </td>
+      <td><span class="h5">h5. Bootstrap heading</span></td>
+    </tr>
+    <tr>
+      <td>
+        <code>&lt;h6&gt;&lt;/h6&gt;</code>
+      </td>
+      <td><span class="h6">h6. Bootstrap heading</span></td>
+    </tr>
+  </tbody>
+</table>
+
+<h2>Inline text elements</h2>
+<p>Styling for common inline HTML5 elements.</p>
+
+<%= example_with_code do %>
+  <div class="bg-light p-3">
+    <p>You can use the mark tag to <mark>highlight</mark> text.</p>
+    <p><del>This line of text is meant to be treated as deleted text.</del></p>
+    <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
+    <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
+    <p><u>This line of text will render as underlined.</u></p>
+    <p><small>This line of text is meant to be treated as fine print.</small></p>
+    <p><strong>This line rendered as bold text.</strong></p>
+    <p><em>This line rendered as italicized text.</em></p>
+  </div>
+<% end %>

data/app/views/bootstrap_styleguide/forms/checks_and_radios.html.erb

@@ -0,0 +1,58 @@
+<h1 id="content">Checks and radios</h1>
+<p class="bd-lead">Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.</p>
+
+<h2>Checks</h2>
+
+<%= example_with_code do %>
+  <div class="form-check">
+    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
+    <label class="form-check-label" for="flexCheckDefault">
+      Default checkbox
+    </label>
+  </div>
+  <div class="form-check">
+    <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
+    <label class="form-check-label" for="flexCheckChecked">
+      Checked checkbox
+    </label>
+  </div>
+<% end %>
+
+<h2>Radios</h2>
+
+<%= example_with_code do %>
+  <div class="form-check">
+    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
+    <label class="form-check-label" for="flexRadioDefault1">
+      Default radio
+    </label>
+  </div>
+  <div class="form-check">
+    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
+    <label class="form-check-label" for="flexRadioDefault2">
+      Default checked radio
+    </label>
+  </div>
+<% end %>
+
+<h2 id="examples" class="mt-4">Radios</h2>
+<p>A switch has the markup of a custom checkbox but uses the <code>.form-switch</code> class to render a toggle switch. Switches also support the <code>disabled</code> attribute.</p>
+
+<%= example_with_code do %>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
+    <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
+    <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
+    <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
+  </div>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled>
+    <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
+  </div>
+<% end %>

data/app/views/bootstrap_styleguide/forms/floating_labels.html.erb

@@ -0,0 +1,60 @@
+<h1 id="content">Floating labels</h1>
+<p class="bd-lead">Create beautifully simple form labels that float over your input fields.</p>
+
+<h2>Example</h2>
+<p>Wrap a pair of <code>&lt;input class="form-control"&gt;</code> and <code>&lt;label&gt;</code> elements in <code>.form-floating</code> to enable floating labels with Bootstrap’s textual form fields. A <code>placeholder</code> is required on each <code>&lt;input&gt;</code> as our method of CSS-only floating labels uses the <code>:placeholder-shown</code> pseudo-element. Also note that the <code>&lt;input&gt;</code> must come first so we can utilize a sibling selector (e.g., <code>~</code>).</p>
+
+<%= example_with_code do %>
+  <div class="form-floating mb-3">
+    <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
+    <label for="floatingInput">Email address</label>
+  </div>
+  <div class="form-floating">
+    <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
+    <label for="floatingPassword">Password</label>
+  </div>
+<% end %>
+
+<p>When there’s a <code>value</code> already defined, <code>&lt;label&gt;</code>s will automatically adjust to their floated position.</p>
+
+<%= example_with_code do %>
+  <form class="form-floating">
+    <input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com">
+    <label for="floatingInputValue">Input with value</label>
+  </form>
+<% end %>
+
+<p>Form validation styles also work as expected.</p>
+
+<%= example_with_code do %>
+  <form class="form-floating">
+    <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="name@example.com" value="test@example.com">
+    <label for="floatingInputInvalid">Invalid input</label>
+  </form>
+<% end %>
+
+<h2>Textareas</h2>
+<p>By default, <code>&lt;textarea&gt;</code>s with <code>.form-control</code> will be the same height as <code>&lt;input&gt;</code>s.</p>
+
+<%= example_with_code do %>
+  <div class="form-floating">
+    <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
+    <label for="floatingTextarea">Comments</label>
+  </div>
+<% end %>
+
+<h2>Textareas</h2>
+
+<p>Other than <code>.form-control</code>, floating labels are only available on <code>.form-select</code>s. They work in the same way, but unlike <code>&lt;input&gt;</code>s, they’ll always show the <code>&lt;label&gt;</code> in its floated state. <strong>Selects with <code>size</code> and <code>multiple</code> are not supported.</strong></p>
+
+<%= example_with_code do %>
+  <div class="form-floating">
+    <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
+      <option selected>Open this select menu</option>
+      <option value="1">One</option>
+      <option value="2">Two</option>
+      <option value="3">Three</option>
+    </select>
+    <label for="floatingSelect">Works with selects</label>
+  </div>
+<% end %>

data/app/views/bootstrap_styleguide/forms/input_group.html.erb

@@ -0,0 +1,30 @@
+<h1 id="content">Input group</h1>
+<p class="bd-lead">Give textual form controls like <code>&lt;input&gt;</code>s and <code>&lt;textarea&gt;</code>s an upgrade with custom styles, sizing, focus states, and more.</p>
+
+<h2>Examples</h2>
+
+<%= example_with_code do %>
+  <div class="mb-3">
+    <label for="exampleFormControlInput1" class="form-label">Email address</label>
+    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
+  </div>
+  <div class="mb-3">
+    <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
+    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
+  </div>
+<% end %>
+
+<h2>Sizing</h2>
+<p>Set heights using classes like <code>.form-control-lg</code> and <code>.form-control-sm</code>.</p>
+
+<%= example_with_code do %>
+  <div class="mb-3">
+    <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
+  </div>
+  <div class="mb-3">
+    <input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
+  </div>
+  <div class="mb-3">
+    <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
+  </div>
+<% end %>

data/app/views/bootstrap_styleguide/forms/range.html.erb

@@ -0,0 +1,11 @@
+<h1 id="content">Range</h1>
+<p class="bd-lead">Use our custom range inputs for consistent cross-browser styling and built-in customization.</p>
+
+<h2>Overview</h2>
+
+<p>Create custom <code>&lt;input type="range"&gt;</code> controls with <code>.form-range</code>. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.</p>
+
+<%= example_with_code do %>
+  <label for="customRange1" class="form-label">Example range</label>
+  <input type="range" class="form-range" id="customRange1">
+<% end %>

data/app/views/bootstrap_styleguide/forms/select.html.erb

@@ -0,0 +1,34 @@
+<h1 id="content">Select</h1>
+<p>Customize the native <code>&lt;select&gt;</code>s with custom CSS that changes the element’s initial appearance.</p>
+
+<h2>Default</h2>
+
+<p>Custom <code>&lt;select&gt;</code> menus need only a custom class, <code>.form-select</code> to trigger the custom styles. Custom styles are limited to the <code>&lt;select&gt;</code>’s initial appearance and cannot modify the <code>&lt;option&gt;</code>s due to browser limitations.</p>
+
+<% example_with_code do %>
+  <select class="form-select" aria-label="Default select example">
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+<% end %>
+
+<h2>Sizing</h2>
+<p>You may also choose from small and large custom selects to match our similarly sized text inputs.</p>
+
+<% example_with_code do %>
+  <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+
+  <select class="form-select form-select-sm" aria-label=".form-select-sm example">
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+<% end %>

data/app/views/bootstrap_styleguide/layout/breakpoints.html.erb

@@ -0,0 +1,49 @@
+<h1 id="content">Breakpoints</h1>
+<p>Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.</p>
+
+<h2>Available breakpoints</h2>
+<p>Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you’re using our source Sass files.</p>
+
+<table class="table">
+  <thead>
+    <tr>
+      <th>Breakpoint</th>
+      <th>Class infix</th>
+      <th>Dimensions</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>X-Small</td>
+      <td><em>None</em></td>
+      <td>&lt;576px</td>
+    </tr>
+    <tr>
+      <td>Small</td>
+      <td><code>sm</code></td>
+      <td>≥576px</td>
+    </tr>
+    <tr>
+      <td>Medium</td>
+      <td><code>md</code></td>
+      <td>≥768px</td>
+    </tr>
+    <tr>
+      <td>Large</td>
+      <td><code>lg</code></td>
+      <td>≥992px</td>
+    </tr>
+    <tr>
+      <td>Extra large</td>
+      <td><code>xl</code></td>
+      <td>≥1200px</td>
+    </tr>
+    <tr>
+      <td>Extra extra large</td>
+      <td><code>xxl</code></td>
+      <td>≥1400px</td>
+    </tr>
+  </tbody>
+</table>
+
+<p>These breakpoints are customizable via Sass—you’ll find them in a Sass map in our _variables.scss stylesheet.</p>

data/app/views/bootstrap_styleguide/layout/containers.html.erb

@@ -0,0 +1,111 @@
+<h1 id="content">Containers</h1>
+<p>Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport.</p>
+
+<h2>How they work</h2>
+<p>Containers are the most basic layout element in Bootstrap and are <strong>required when using our default grid system</strong>. Containers are used to contain, pad, and (sometimes) center the content within them. While containers <em>can</em> be nested, most layouts do not require a nested container.</p>
+<p>Bootstrap comes with three different containers:</p>
+
+<ul>
+  <li><code>.container</code>, which sets a <code>max-width</code> at each responsive breakpoint</li>
+  <li><code>.container-fluid</code>, which is <code>width: 100%</code> at all breakpoints</li>
+  <li><code>.container-{breakpoint}</code>, which is <code>width: 100%</code> until the specified breakpoint</li>
+</ul>
+
+<p>The table below illustrates how each container’s <code>max-width</code> compares to the original <code>.container</code> and <code>.container-fluid</code> across each breakpoint.</p>
+
+<table class="table">
+  <thead>
+    <tr>
+      <td class="border-dark"></td>
+      <th scope="col">
+        Extra small<br>
+        <span class="fw-normal">&lt;576px</span>
+      </th>
+      <th scope="col">
+        Small<br>
+        <span class="fw-normal">≥576px</span>
+      </th>
+      <th scope="col">
+        Medium<br>
+        <span class="fw-normal">≥768px</span>
+      </th>
+      <th scope="col">
+        Large<br>
+        <span class="fw-normal">≥992px</span>
+      </th>
+      <th scope="col">
+        X-Large<br>
+        <span class="fw-normal">≥1200px</span>
+      </th>
+      <th scope="col">
+        XX-Large<br>
+        <span class="fw-normal">≥1400px</span>
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row" class="fw-normal"><code>.container</code></th>
+      <td class="text-muted">100%</td>
+      <td>540px</td>
+      <td>720px</td>
+      <td>960px</td>
+      <td>1140px</td>
+      <td>1320px</td>
+    </tr>
+    <tr>
+      <th scope="row" class="fw-normal"><code>.container-sm</code></th>
+      <td class="text-muted">100%</td>
+      <td>540px</td>
+      <td>720px</td>
+      <td>960px</td>
+      <td>1140px</td>
+      <td>1320px</td>
+    </tr>
+    <tr>
+      <th scope="row" class="fw-normal"><code>.container-md</code></th>
+      <td class="text-muted">100%</td>
+      <td class="text-muted">100%</td>
+      <td>720px</td>
+      <td>960px</td>
+      <td>1140px</td>
+      <td>1320px</td>
+    </tr>
+    <tr>
+      <th scope="row" class="fw-normal"><code>.container-lg</code></th>
+      <td class="text-muted">100%</td>
+      <td class="text-muted">100%</td>
+      <td class="text-muted">100%</td>
+      <td>960px</td>
+      <td>1140px</td>
+      <td>1320px</td>
+    </tr>
+    <tr>
+      <th scope="row" class="fw-normal"><code>.container-xl</code></th>
+      <td class="text-muted">100%</td>
+      <td class="text-muted">100%</td>
+      <td class="text-muted">100%</td>
+      <td class="text-muted">100%</td>
+      <td>1140px</td>
+      <td>1320px</td>
+    </tr>
+    <tr>
+      <th scope="row" class="fw-normal"><code>.container-xxl</code></th>
+      <td class="text-muted">100%</td>
+      <td class="text-muted">100%</td>
+      <td class="text-muted">100%</td>
+      <td class="text-muted">100%</td>
+      <td class="text-muted">100%</td>
+      <td>1320px</td>
+    </tr>
+    <tr>
+      <th scope="row" class="fw-normal"><code>.container-fluid</code></th>
+      <td class="text-muted">100%</td>
+      <td class="text-muted">100%</td>
+      <td class="text-muted">100%</td>
+      <td class="text-muted">100%</td>
+      <td class="text-muted">100%</td>
+      <td class="text-muted">100%</td>
+    </tr>
+  </tbody>
+</table>

data/app/views/bootstrap_styleguide/layout/grid.html.erb

@@ -0,0 +1,51 @@
+<h1 id="content">Grid system</h1>
+<p>Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.</p>
+
+<h2>Example</h2>
+<p>Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together.</p>
+
+<%= example_with_code do %>
+  <div class="container bg-light">
+    <div class="row">
+      <div class="col py-3 border">
+        Column
+      </div>
+      <div class="col py-3 border">
+        Column
+      </div>
+      <div class="col py-3 border">
+        Column
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<h2>Variable width content</h2>
+<p>Use <code>col-{breakpoint}-auto</code> classes to size columns based on the natural width of their content.</p>
+
+<%= example_with_code do %>
+  <div class="container p-2">
+    <div class="row justify-content-md-center">
+      <div class="col col-lg-2 bg-light py-3 border">
+        1 of 3
+      </div>
+      <div class="col-md-auto bg-light py-3 border">
+        Variable width content
+      </div>
+      <div class="col col-lg-2 bg-light py-3 border">
+        3 of 3
+      </div>
+    </div>
+    <div class="row mt-3">
+      <div class="col bg-light py-3 border">
+        1 of 3
+      </div>
+      <div class="col-md-auto bg-light py-3 border">
+        Variable width content
+      </div>
+      <div class="col col-lg-2 bg-light py-3 border">
+        3 of 3
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/bootstrap_styleguide/styleguide/index.html.erb

@@ -0,0 +1,24 @@
+<h2>Layout</h2>
+<% layout_items.each do |item| %>
+  <%= link_to item.to_s.humanize, send("layout_#{item}_path"), class: 'btn btn-primary mb-2' %>
+<% end %>
+
+<h2 class="mt-3">Content</h2>
+<% content_items.each do |item| %>
+  <%= link_to item.to_s.humanize, send("content_#{item}_path"), class: 'btn btn-primary mb-2' %>
+<% end %>
+
+<h2 class="mt-3">Forms</h2>
+<% forms_items.each do |item| %>
+  <%= link_to item.to_s.humanize, send("forms_#{item}_path"), class: 'btn btn-primary mb-2' %>
+<% end %>
+
+<h2 class="mt-3">Components</h2>
+<% components_items.each do |item| %>
+  <%= link_to item.to_s.humanize, send("components_#{item}_path"), class: 'btn btn-primary mb-2' %>
+<% end %>
+
+<h2 class="mt-3">Utilities</h2>
+<% utilities_items.each do |item| %>
+  <%= link_to item.to_s.humanize, send("utilities_#{item}_path"), class: 'btn btn-primary mb-2' %>
+<% end %>

data/app/views/bootstrap_styleguide/utilities/background.html.erb

@@ -0,0 +1,38 @@
+<h1 id="content">Background</h1>
+<p class="bd-lead">Convey meaning through <code>background-color</code> and add decoration with gradients.</p>
+
+<h2>Background color</h2>
+
+<p>Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities <strong>do not set <code>color</code></strong>, so in some cases you’ll want to use <code>.text-*</code>.</p>
+
+<%= example_with_code do %>
+  <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
+  <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
+  <div class="p-3 mb-2 bg-success text-white">.bg-success</div>
+  <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
+  <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
+  <div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
+  <div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
+  <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
+  <div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
+  <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
+  <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
+<% end %>
+
+<h2>Background gradient</h2>
+
+<p>By adding a <code>.bg-gradient</code> class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.</p>
+
+<%= example_with_code do %>
+  <div class="p-3 mb-2 bg-primary bg-gradient text-white">.bg-primary</div>
+  <div class="p-3 mb-2 bg-secondary bg-gradient text-white">.bg-secondary</div>
+  <div class="p-3 mb-2 bg-success bg-gradient text-white">.bg-success</div>
+  <div class="p-3 mb-2 bg-danger bg-gradient text-white">.bg-danger</div>
+  <div class="p-3 mb-2 bg-warning bg-gradient text-dark">.bg-warning</div>
+  <div class="p-3 mb-2 bg-info bg-gradient text-dark">.bg-info</div>
+  <div class="p-3 mb-2 bg-light bg-gradient text-dark">.bg-light</div>
+  <div class="p-3 mb-2 bg-dark bg-gradient text-white">.bg-dark</div>
+  <div class="p-3 mb-2 bg-body bg-gradient text-dark">.bg-body</div>
+  <div class="p-3 mb-2 bg-white bg-gradient text-dark">.bg-white</div>
+  <div class="p-3 mb-2 bg-transparent bg-gradient text-dark">.bg-transparent</div>
+<% end %>