<h2 class="toc">Hover styles</h2>

<p>Add <code>.hover-bg-&lt;theme-color&gt;</code> to add a background color on hover.
  Add <code>.hover-fg-&lt;theme-color&gt;</code> to add a foreground color on hover.
  <strong>Hover over the links</strong> below to test them.</p>
{% apply view_source %}
<div><a href="#na" class="hover-bg-primary hover-fg-light p-1">.hover-bg-primary .hover-fg-light</a></div>
<div><a href="#na" class="hover-bg-dark hover-fg-light p-1">.hover-bg-dark .hover-fg-light</a></div>
<div><a href="#na" class="hover-bg-success hover-fg-light p-1">.hover-bg-success.hover-fg-light</a></div>
{% end %}
{% apply view_source %}
<div><a href="#na" class="hover-bg-secondary hover-fg-dark p-1">.hover-bg-secondary .hover-fg-dark</a></div>
<div><a href="#na" class="hover-bg-warning hover-fg-dark p-1">.hover-bg-warning .hover-fg-dark</a></div>
<div><a href="#na" class="hover-bg-warning hover-fg-danger p-1">.hover-bg-warning .hover-fg-danger</a></div>
{% end %}

<h2 class="toc">Focus styles</h2>
<p>Add <code>.focus-bg-&lt;theme-color&gt;</code> to add a background color on focus.
  Add <code>.focus-fg-&lt;theme-color&gt;</code> to add a foreground color on focus.
  <strong>Click the links</strong> below to test them.</p>
{% apply view_source %}
<div><a href="#na" class="focus-bg-primary focus-fg-light p-1">.focus-bg-primary .focus-fg-light</a></div>
<div><a href="#na" class="focus-bg-dark focus-fg-light p-1">.focus-bg-dark .focus-fg-light</a></div>
<div><a href="#na" class="focus-bg-success focus-fg-light p-1">.focus-bg-success.focus-fg-light</a></div>
{% end %}
{% apply view_source %}
<div><a href="#na" class="focus-bg-secondary focus-fg-dark p-1">.focus-bg-secondary .focus-fg-dark</a></div>
<div><a href="#na" class="focus-bg-warning focus-fg-dark p-1">.focus-bg-warning .focus-fg-dark</a></div>
<div><a href="#na" class="focus-bg-warning focus-fg-danger p-1">.focus-bg-warning .focus-fg-danger</a></div>
{% end %}

<h2 class="toc">Active styles</h2>
<p>Add <code>.active-bg-&lt;theme-color&gt;</code> to add a background color on active.
  Add <code>.active-fg-&lt;theme-color&gt;</code> to add a foreground color on active.
  <strong>Click the links</strong> below to test them.</p>
{% apply view_source %}
<div><a href="#na" class="active-bg-primary active-fg-light p-1">.active-bg-primary .active-fg-light</a></div>
<div><a href="#na" class="active-bg-dark active-fg-light p-1">.active-bg-dark .active-fg-light</a></div>
<div><a href="#na" class="active-bg-success active-fg-light p-1">.active-bg-success.active-fg-light</a></div>
{% end %}
{% apply view_source %}
<div><a href="#na" class="active-bg-secondary active-fg-dark p-1">.active-bg-secondary .active-fg-dark</a></div>
<div><a href="#na" class="active-bg-warning active-fg-dark p-1">.active-bg-warning .active-fg-dark</a></div>
<div><a href="#na" class="active-bg-warning active-fg-danger p-1">.active-bg-warning .active-fg-danger</a></div>
{% end %}
