<h2 class="toc">Ripples</h2>
<p>Add the <code>.ripple</code> class to add a ripple to an element.</p>

{% apply view_source %}
<div class="mb-3">
  <button type="button" class="btn btn-primary ripple">Button</button>
  <button type="button" class="btn btn-dark ripple">Button</button>
  <button type="button" class="btn btn-success ripple">Button</button>
  <button type="button" class="btn btn-warning ripple">Button</button>
  <button type="button" class="btn btn-danger ripple">Button</button>
  <button type="button" class="btn btn-info ripple">Button</button>
  <button type="button" class="btn btn-success ripple">
    Badge <span class="badge badge-light">9</span>
  </button>
  <div class="dropdown d-inline">
    <button class="btn btn-dark dropdown-toggle ripple" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Ripple dropdown
    </button>
    <div class="dropdown-menu ripple" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
</div>
{% end %}

{% apply view_source %}
<form>
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-secondary ripple active">
      <input type="checkbox" checked autocomplete="off"> Ripple
    </label>
    <label class="btn btn-secondary ripple">
      <input type="checkbox" autocomplete="off"> Checkbox 1
    </label>
    <label class="btn btn-secondary ripple">
      <input type="checkbox" autocomplete="off"> Checkbox 2
    </label>
    <label class="btn btn-secondary ripple">
      <input type="checkbox" autocomplete="off" disabled> Checkbox 3
    </label>
  </div>
</form>
<ul class="nav nav-pills mb-3">
  <li class="nav-item">
    <a class="nav-link ripple active" href="#">Ripple</a>
  </li>
  <li class="nav-item">
    <a class="nav-link ripple" href="#">Pills</a>
  </li>
</ul>
{% end %}
