Shadows

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

Shadows on Bootstrap

Examples

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-body-highlight rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-body-highlight rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-body-highlight rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body-highlight rounded">Larger shadow</div>
No shadow
Small shadow
Regular shadow
Larger shadow
On this page

Thank you for creating with Phoenix|
2023 ©Themewagon

v1.14.0

Demo widget
Request a callbackSearch in chatShow historyReport to AdminClose Support

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

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