Shadows

Add or remove shadows to elements with box-shadow utilities. The @shadow attribute enables standard Bootstrap shadow effects on a wide variety of DITA components.

Shadow Utilities

Bootstrap provides utilities for adding depth with text-bg colors and box-shadows. The @shadow attribute can be set to yes, sm, lg or none.

Note that when a shadow is applied without an explicit margin, a default margin of 3 is automatically added to prevent the shadow from being clipped by the parent container.

No shadow

Small shadow

Regular shadow

Larger shadow

<div shadow="none" margin="3" padding="3" color="light">No shadow</div>
<div shadow="sm" margin="3" padding="3" color="light">Small shadow</div>
<div shadow="yes" margin="3" padding="3" color="light">Regular shadow</div>
<div shadow="lg" margin="3" padding="3" color="light">Larger shadow</div>

<div outputclass="shadow-none m-3 p-3 text-bg-light">No shadow</div>
<div outputclass="shadow-sm m-3 p-3 text-bg-light">Small shadow</div>
<div outputclass="shadow m-3 p-3 text-bg-light">Regular shadow</div>
<div outputclass="shadow-lg m-3 p-3 text-bg-light">Larger shadow</div>

Applied Shadow

Shadows can be applied to complex elements as follow:

Shadowed Card

This card has a large shadow.

<card shadow="lg" margin="3" color="light">
  <title>Shadowed Card</title>
  <p>This card has a large shadow.</p>
</card>

<section outputclass="card shadow-lg m-3 text-bg-light">
  <div outputclass="card-body">
    <div outputclass="card-title h5">Shadowed Card</div>
    <p outputclass="card-text">This card has a large shadow.</p>
  </div>
</section>