Shadows

Use TODC Bootstrap’s shadows to provide important visual cues about an objects’ depth and directional movement. Shadows are the only visual cue indicating the amount of separation between surfaces.

In need of a shadow? Add one of the .shadow-*dp modifier classes.

.shadow-0dp
.shadow-1dp
.shadow-2dp
.shadow-3dp
.shadow-4dp
.shadow-6dp
.shadow-8dp
.shadow-12dp
.shadow-16dp
.shadow-24dp

Examples

Alert

<div class="alert alert-primary shadow-6dp" role="alert">
  This is a primary alert—check it out!
</div>

Card

PlaceholderImage cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere 
<div class="card shadow-8dp" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <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>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>