<h2 class="toc">Shadows</h2>
<p>Add the <code>.shadow</code> class to add a shadow to an element.</p>
<p>Add the <code>.shadow-none</code> class to remove a shadow from an element.</p>
{% apply view_source %}
<div class="mb-3">
  <button type="button" class="btn btn-primary shadow">
    <i class="fa fa-plus"></i>
  </button>
  <button type="button" class="btn btn-dark shadow">
    <i class="fa fa-home"></i> Button
  </button>
  <button type="button" class="btn btn-success shadow">
    Badge <span class="badge badge-light shadow">9</span>
  </button>
  <div class="dropdown d-inline">
    <button class="btn btn-outline-light text-dark dropdown-toggle shadow" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Shadow dropdown
    </button>
    <div class="dropdown-menu shadow" 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>
  <span class="badge badge-pill badge-primary shadow">Shadow pill</span>
  <a href="#" class="badge badge-primary shadow">Shadow pill link</a>
</div>
{% end %}

{% apply view_source %}
<p class="alert alert-warning shadow" role="alert">
  <strong>Shadow alert</strong> with an <a class="alert-link" href="#">alert link</a>.
</p>
<p>
  <ol class="breadcrumb shadow">
    <li class="breadcrumb-item"><a href="#">Shadow</a></li>
    <li class="breadcrumb-item active" aria-current="page">Breadcrumb</li>
  </ol>
</p>
{% end %}

{% apply view_source %}
<form>
  <div class="form-group">
    <input type="search" class="form-control shadow" placeholder="Shadow form-control">
  </div>
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-secondary shadow active">
      <input type="checkbox" checked autocomplete="off"> Shadow checkbox
    </label>
    <label class="btn btn-secondary shadow">
      <input type="checkbox" autocomplete="off"> Checkbox 2
    </label>
    <label class="btn btn-secondary shadow">
      <input type="checkbox" autocomplete="off"> Checkbox 3
    </label>
    <label class="btn btn-secondary shadow">
      <input type="checkbox" autocomplete="off" disabled> Checkbox 4
    </label>
  </div>
</form>
<ul class="nav nav-pills mb-3">
  <li class="nav-item">
    <a class="nav-link shadow active" href="#">Shadow</a>
  </li>
  <li class="nav-item">
    <a class="nav-link shadow" href="#">Pills</a>
  </li>
</ul>
{% end %}
{% apply view_source %}
<p class="navbar navbar-dark bg-dark shadow">
  <a class="navbar-brand" href="#">Shadow navbar</a>
</p>
{% end %}
<div class="row mb-3">
  <div class="col">
    <div class="card shadow">
      <div class="card-body">
        <h4 class="card-title">Shadow card</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card shadow">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">Shadow list group</li>
        <li class="list-group-item">List item</li>
        <li class="list-group-item">List item</li>
      </ul>
    </div>
  </div>
</div>
{% apply view_source %}
<div class="progress shadow mb-3">
  <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
{% end %}

{% apply view_source %}
<div class="mb-3">
  <img class="img w-25 shadow" src="hdinsight.png" alt="Sample image">
</div>
{% end %}
