How to Add Shadow in Bootstrap

There are four utility classes to add or remove shadows to elements. You can quickly add or remove a shadow with box-shadow utility classes.

images/coding/coding03.webp

Shadow Utility Classes

  1. No shadow: shadow-none
  2. Small shadow: shadow-sm
  3. Regular shadow: shadow
  4. Larger shadow: shadow-lg

For example,

<div class="shadow-none">No shadow</div>
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Regular shadow</div>
<div class="shadow-lg">Larger shadow</div>