Bootstrap Shadows
Shadow utility classes add depth to elements using box-shadow, making cards, buttons or containers feel like they're lifted off the page. Bootstrap offers small, regular, and large shadow sizes.
Shadows are purely visual utilities and can be combined with other classes like borders and rounded corners to create polished-looking UI elements.
<div class="shadow p-3">...</div>Shadow sizes
.shadow-sm adds a subtle shadow, .shadow adds a standard shadow, and .shadow-lg adds a large, more dramatic shadow. .shadow-none removes any shadow.
Using shadows effectively
Shadows work best on white or light-colored cards and boxes sitting on a plain background, helping them visually separate from the page.
<div class="p-4 mb-3 bg-white shadow-sm">Small shadow</div>
<div class="p-4 bg-white shadow-lg">Large shadow</div>Two white boxes, the first with a subtle shadow and the second with a much stronger shadowshadow-sm and shadow-lg apply different box-shadow intensities to create varying levels of depth.
<div class="card shadow-none">This card has no shadow, unlike the default card style.</div>A flat card with no drop shadow at allshadow-none removes any shadow, useful when you want a flatter design.
Key points
- .shadow-sm, .shadow, and .shadow-lg provide increasing shadow intensity.
- .shadow-none removes any shadow.
- Shadows help elements visually stand out from the background.
- Shadows are commonly combined with cards and rounded corners.