Shadow utilities add or remove box shadows: shadow-sm for subtle depth, shadow for regular elevation and shadow-lg for floating elements, while shadow-none removes a component's default shadow. Use stronger shadows for elements that sit above others, such as menus, dialogs and floating buttons.
1Shadow sizes
shadow-none, shadow-sm, shadow and shadow-lg.
shadow-noneshadow-smshadowshadow-lg<div class="row g-4 p-2">
<div class="col-6 col-md-3">
<div class="bg-page rounded-lg p-4 text-center shadow-none border">
<code class="small">shadow-none</code>
</div>
</div>
<div class="col-6 col-md-3">
<div class="bg-page rounded-lg p-4 text-center shadow-sm">
<code class="small">shadow-sm</code>
</div>
</div>
<div class="col-6 col-md-3">
<div class="bg-page rounded-lg p-4 text-center shadow-md">
<code class="small">shadow</code>
</div>
</div>
<div class="col-6 col-md-3">
<div class="bg-page rounded-lg p-4 text-center shadow-xl">
<code class="small">shadow-lg</code>
</div>
</div>
</div>2Floating card
shadow-lg and rounded-4 lift a profile card off the page.
Zoe Novak
Content Writer
<div class="bg-page rounded-xl shadow-xl p-6 text-center mx-auto" style="max-width:18rem">
<img src="../assets/img/avatar-6.svg" alt="Leo Kowalski" width="72" height="72" class="rounded-full mb-2">
<div class="font-semibold">
Zoe Novak
</div>
<div class="small text-muted mb-4">
Content Writer
</div>
<button type="button" class="btn btn-sm btn-primary">Follow</button>
</div>3Subtle input shadow
shadow-sm on a search field gives it a little depth.
<div style="max-width:22rem">
<label class="sr-only" for="ut-find-1255">Search</label>
<input id="ut-find-1255" type="search" class="form-control form-control-lg shadow-sm rounded-full" placeholder="Search Adventure">
</div>4Remove a component shadow
shadow-none removes the default focus or component shadow when you need a flat look.
<div class="flex flex-wrap gap-2">
<button type="button" class="btn btn-primary shadow-md">With shadow</button>
<button type="button" class="btn btn-primary shadow-none">shadow-none</button>
</div>5Sticky header shadow
A header bar with shadow-sm separates itself from scrolling content.
Orbiora
Our team has done this many times, so you never have to guess. From city breaks to safaris, we plan trips around how you like to travel.
<div class="border rounded-lg overflow-hidden">
<div class="bg-page shadow-sm px-4 py-2 flex justify-between items-center relative">
<span class="font-semibold">Orbiora</span><span><i class="bi bi-list" aria-hidden="true"></i></span>
</div>
<div class="bg-surface-3 p-4 small">
Our team has done this many times, so you never have to guess. From city breaks to safaris, we plan trips around how you like to travel.
</div>
</div>6Pricing card emphasis
The featured plan has shadow-lg, its neighbours shadow-sm.
Starter
$12.81
Popular
$32.13
Business
$54.31
<div class="row g-3 items-center p-2">
<div class="col-sm-4">
<div class="bg-page rounded-xl shadow-sm p-4 text-center">
<div class="small">
Starter
</div>
<div class="text-xl font-bold">
$12.81
</div>
</div>
</div>
<div class="col-sm-4">
<div class="bg-page rounded-xl shadow-xl p-6 text-center border border-primary">
<div class="small text-primary-ink font-semibold">
Popular
</div>
<div class="text-2xl font-bold">
$32.13
</div>
</div>
</div>
<div class="col-sm-4">
<div class="bg-page rounded-xl shadow-sm p-4 text-center">
<div class="small">
Business
</div>
<div class="text-xl font-bold">
$54.31
</div>
</div>
</div>
</div>7Dropdown-like panel
A static menu with shadow and rounded-3, as a dropdown would look when open.
<div class="bg-page border rounded-lg shadow-md py-2" style="max-width:14rem">
<a href="#" class="block px-4 py-1 link-body-emphasis no-underline"><i class="bi bi-person-fill" aria-hidden="true"></i> Profile</a> <a href="#" class="block px-4 py-1 link-body-emphasis no-underline"><i class="bi bi-gear-fill" aria-hidden="true"></i> Settings</a>
<hr class="my-2">
<a href="#" class="block px-4 py-1 link-danger no-underline"><i class="bi bi-box-arrow-right" aria-hidden="true"></i> Sign out</a>
</div>8Toast-like notification
A small notice with shadow-lg and a coloured side border.
Saved
Every detail is handled by people who care about getting it right.
<div class="bg-page rounded-lg shadow-xl border-s border-4 border-success p-4 flex gap-2" style="max-width:22rem" role="status">
<span class="text-success-emphasis text-lg"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>
<div>
<div class="font-semibold">
Saved
</div>
<div class="small text-muted">
Every detail is handled by people who care about getting it right.
</div>
</div>
</div>9Image with shadow
Photos with rounded-4 and shadow look like printed cards.
<div class="flex flex-wrap gap-6 p-2">
<img src="https://images.unsplash.com/photo-1554366347-897a5113f6ab?auto=format&fit=crop&w=1200&h=800&q=70" alt="Our favourite small hotels this year" width="160" class="rounded-xl shadow-md"> <img src="https://images.unsplash.com/photo-1584467541268-b040f83be3fd?auto=format&fit=crop&w=1200&h=800&q=70" alt="A first-timer's guide to safari" width="160" class="rounded-xl shadow-xl">
</div>10Floating action button
A round button with shadow-lg in a corner of a panel.
Travel insurance and car rental can be added in a single click.
<div class="relative bg-surface-3 border rounded-xl" style="height:160px">
<p class="small text-muted p-4 mb-0">Travel insurance and car rental can be added in a single click.</p>
<button type="button" class="btn btn-primary rounded-full shadow-xl absolute bottom-0 end-0 m-4 flex items-center justify-center" style="width:52px;height:52px" aria-label="Add"><i class="bi bi-plus-lg" aria-hidden="true"></i></button>
</div>11Elevation levels
Stacked layers with increasing shadows show elevation order.
Level 1 - shadow-sm
Level 2 - shadow
Level 3 - shadow-lg
<div class="bg-surface-3 rounded-xl p-6">
<div class="bg-page rounded-lg shadow-sm p-4">
<div class="small mb-2">
Level 1 - shadow-sm
</div>
<div class="bg-page rounded-lg shadow-md p-4">
<div class="small mb-2">
Level 2 - shadow
</div>
<div class="bg-page rounded-lg shadow-xl p-4 small">
Level 3 - shadow-lg
</div>
</div>
</div>
</div>12Stat cards
shadow-sm with no border for soft dashboard tiles.
Orders
214
Revenue
$9,147.21
<div class="row g-3 p-1">
<div class="col-6">
<div class="bg-page rounded-xl shadow-sm p-4">
<div class="small text-muted">
Orders
</div>
<div class="text-xl font-bold">
214
</div>
</div>
</div>
<div class="col-6">
<div class="bg-page rounded-xl shadow-sm p-4">
<div class="small text-muted">
Revenue
</div>
<div class="text-xl font-bold">
$9,147.21
</div>
</div>
</div>
</div>13Modal-like dialog
A static dialog box with shadow-lg over a dimmed area.
Delete experience?
This cannot be undone.
<div class="bg-dark/25 rounded-xl p-6 flex justify-center">
<div class="bg-page rounded-xl shadow-xl p-6" style="max-width:20rem" role="dialog" aria-label="Confirm">
<h3 class="h6 font-semibold">Delete experience?</h3>
<p class="small text-muted">This cannot be undone.</p>
<div class="flex gap-2 justify-end">
<button type="button" class="btn btn-sm btn-light">Cancel</button>
<button type="button" class="btn btn-sm btn-danger">Delete</button>
</div>
</div>
</div>14Product tile
shadow-sm on the product card and shadow on the price chip.
$83.38
Safari adventure
Adventure
<div class="bg-page rounded-xl shadow-sm overflow-hidden relative" style="max-width:16rem">
<img src="../assets/img/product-5.svg" alt="Safari adventure" class="w-full block"> <span class="absolute top-0 end-0 m-2 bg-page rounded-full px-2 py-1 small font-bold shadow-md">$83.38</span>
<div class="p-4">
<div class="font-medium">
Safari adventure
</div>
<div class="small text-muted">
Adventure
</div>
</div>
</div>15Callout box
A tip box with shadow-sm and a tinted background.
Free cancellation on most stays means you can book now and decide later.
<div class="bg-info-subtle text-info-emphasis rounded-xl shadow-sm p-4 flex gap-4">
<span class="text-xl"><i class="bi bi-lightbulb-fill" aria-hidden="true"></i></span>
<p class="mb-0 small">Free cancellation on most stays means you can book now and decide later.</p>
</div>16Tooltip-like label
A tiny dark label with shadow pointing at a chart value.
215
<div class="flex items-end gap-2" style="height:120px">
<div class="bg-primary-subtle rounded-t-md w-1/4 h-1/2">
</div>
<div class="bg-primary rounded-t-md w-1/4 h-full relative">
<span class="absolute top-0 start-1/2 -translate-x-1/2 -translate-y-1/2 text-bg-dark rounded-md px-2 py-1 small shadow-md whitespace-nowrap">215</span>
</div>
<div class="bg-primary-subtle rounded-t-md w-1/4 h-3/4">
</div>
<div class="bg-primary-subtle rounded-t-md w-1/4 h-1/4">
</div>
</div>17Navigation bar shadow
A light navbar with shadow instead of a border.
<nav class="bg-page rounded-lg shadow-md px-4 py-2 flex flex-wrap items-center gap-4" aria-label="Main">
<span class="font-bold me-auto">Orbiora</span> <a href="#" class="link-body-emphasis no-underline small">Home</a> <a href="#" class="link-body-emphasis no-underline small">Shop</a> <a href="#" class="btn btn-sm btn-primary">Sign up</a>
</nav>18Upload drop area
A large area with shadow-sm and rounded-4, waiting for files.
Drop files here
PNG, JPG or PDF up to 41 MB
<div class="bg-page rounded-xl shadow-sm p-6 text-center border">
<div class="text-3xl text-primary-ink">
<i class="bi bi-cloud-arrow-up-fill" aria-hidden="true"></i>
</div>
<div class="font-semibold">
Drop files here
</div>
<div class="small text-muted">
PNG, JPG or PDF up to 41 MB
</div>
</div>19Shadow on dark
Shadows are stronger on light surfaces; on dark ones add a border-opacity border for definition.
shadow-lg + border-opacity-10
shadow only
<div class="bg-dark rounded-xl p-6 flex flex-wrap gap-4">
<div class="bg-dark text-white rounded-lg shadow-xl p-4 border border-white/10 small">
shadow-lg + border-opacity-10
</div>
<div class="bg-dark text-white rounded-lg shadow-md p-4 small">
shadow only
</div>
</div>20Testimonial card
A quote card with shadow and a large quote icon.
Every hotel on our list is visited and reviewed by our own travel team.
<figure class="bg-page rounded-xl shadow-md p-6 mb-0" style="max-width:28rem">
<div class="text-3xl text-primary-ink leading-none">
<i class="bi bi-quote" aria-hidden="true"></i>
</div>
<blockquote class="mb-4"><p class="mb-0">Every hotel on our list is visited and reviewed by our own travel team.</p></blockquote>
<figcaption class="small text-muted">Tariq Tanaka, Lisbon</figcaption>
</figure>