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.

<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:

<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>

<div outputclass="alert alert-light shadow-sm">Alert with small shadow</div>