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

This is a primary alert—check it out!

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

Card

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 class="card-img-top" src="holder.js/100px180/" alt="Card image cap">
  <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>