Add or remove shadows to elements with box-shadow utilities.

Shadows on Bootstrap


While shadows on components are disabled by default in Bootstrap and can be enabled via $enable-shadows, you can also quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-none and three default sizes (which have associated variables to match).

<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-light rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-light rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-light rounded">Larger shadow</div>
No shadow
Small shadow
Regular shadow
Larger shadow
On this page

Theme Customizer

Explore different styles according to your preferences

Color Scheme

Change text direction

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template