Shadows

Shadows

Shadow utilities create depth using Bootstrap\'s predefined shadow levels and are commonly used for cards, menus, and floating surfaces.

Core concept

Explain shadow-sm, shadow, and shadow-lg as visual depth choices. Discuss why a shadow should indicate elevation or separation rather than simply decorate every box.

Using it in a real interface

Use a raised dropdown, a card on a flat page, and a modal-like surface to compare appropriate depth. Explain how background color and border can reduce the amount of shadow needed.

Implementation notes

Avoid combining heavy shadows, thick borders, and strong backgrounds on the same element unless the design intentionally calls for high emphasis.