Shadows
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-body rounded-3 p-3 text-center shadow-none border">
<code class="small">shadow-none</code>
</div>
</div>
<div class="col-6 col-md-3">
<div class="bg-body rounded-3 p-3 text-center shadow-sm">
<code class="small">shadow-sm</code>
</div>
</div>
<div class="col-6 col-md-3">
<div class="bg-body rounded-3 p-3 text-center shadow">
<code class="small">shadow</code>
</div>
</div>
<div class="col-6 col-md-3">
<div class="bg-body rounded-3 p-3 text-center shadow-lg">
<code class="small">shadow-lg</code>
</div>
</div>
</div>2Floating card
shadow-lg and rounded-4 lift a profile card off the page.
Kai Quinn
Marketing Lead
<div class="bg-body rounded-4 shadow-lg p-4 text-center mx-auto" style="max-width:18rem">
<img src="../assets/img/avatar-2.svg" alt="Chloe Larsen" width="72" height="72" class="rounded-circle mb-2">
<div class="fw-semibold">
Kai Quinn
</div>
<div class="small text-body-secondary mb-3">
Marketing Lead
</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="visually-hidden" for="ut-find-1255">Search</label>
<input id="ut-find-1255" type="search" class="form-control form-control-lg shadow-sm rounded-pill" placeholder="Search Mains">
</div>4Remove a component shadow
shadow-none removes the default focus or component shadow when you need a flat look.
<div class="d-flex flex-wrap gap-2">
<button type="button" class="btn btn-primary shadow">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.
Koraara Deck
Our team has done this many times, so you never have to guess. Our sommelier has paired each dish with wines from small family vineyards.
<div class="border rounded-3 overflow-hidden">
<div class="bg-body shadow-sm px-3 py-2 d-flex justify-content-between align-items-center position-relative">
<span class="fw-semibold">Koraara Deck</span><span><i class="bi bi-list" aria-hidden="true"></i></span>
</div>
<div class="bg-body-tertiary p-3 small">
Our team has done this many times, so you never have to guess. Our sommelier has paired each dish with wines from small family vineyards.
</div>
</div>6Pricing card emphasis
The featured plan has shadow-lg, its neighbours shadow-sm.
Starter
$7.78
Popular
$27.68
Business
$90.05
<div class="row g-3 align-items-center p-2">
<div class="col-sm-4">
<div class="bg-body rounded-4 shadow-sm p-3 text-center">
<div class="small">
Starter
</div>
<div class="fs-4 fw-bold">
$7.78
</div>
</div>
</div>
<div class="col-sm-4">
<div class="bg-body rounded-4 shadow-lg p-4 text-center border border-primary">
<div class="small text-primary fw-semibold">
Popular
</div>
<div class="fs-3 fw-bold">
$27.68
</div>
</div>
</div>
<div class="col-sm-4">
<div class="bg-body rounded-4 shadow-sm p-3 text-center">
<div class="small">
Business
</div>
<div class="fs-4 fw-bold">
$90.05
</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-body border rounded-3 shadow py-2" style="max-width:14rem">
<a href="#" class="d-block px-3 py-1 link-body-emphasis text-decoration-none"><i class="bi bi-person-fill" aria-hidden="true"></i> Profile</a> <a href="#" class="d-block px-3 py-1 link-body-emphasis text-decoration-none"><i class="bi bi-gear-fill" aria-hidden="true"></i> Settings</a>
<hr class="my-2">
<a href="#" class="d-block px-3 py-1 link-danger text-decoration-none"><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
Bread is baked every morning and pasta is rolled by hand in our kitchen.
<div class="bg-body rounded-3 shadow-lg border-start border-4 border-success p-3 d-flex gap-2" style="max-width:22rem" role="status">
<span class="text-success fs-5"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>
<div>
<div class="fw-semibold">
Saved
</div>
<div class="small text-body-secondary">
Bread is baked every morning and pasta is rolled by hand in our kitchen.
</div>
</div>
</div>9Image with shadow
Photos with rounded-4 and shadow look like printed cards.
<div class="d-flex flex-wrap gap-4 p-2">
<img src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&w=1200&h=800&q=70" alt="Our favourite tips for busy weeks" width="160" class="rounded-4 shadow"> <img src="https://images.unsplash.com/photo-1625862692743-3f57873bb37c?auto=format&fit=crop&w=1200&h=800&q=70" alt="Our chocolate tart, step by step" width="160" class="rounded-4 shadow-lg">
</div>10Floating action button
A round button with shadow-lg in a corner of a panel.
Order for pickup or delivery and enjoy the same dishes at home.
<div class="position-relative bg-body-tertiary border rounded-4" style="height:160px">
<p class="small text-body-secondary p-3 mb-0">Order for pickup or delivery and enjoy the same dishes at home.</p>
<button type="button" class="btn btn-primary rounded-circle shadow-lg position-absolute bottom-0 end-0 m-3 d-flex align-items-center justify-content-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-body-tertiary rounded-4 p-4">
<div class="bg-body rounded-3 shadow-sm p-3">
<div class="small mb-2">
Level 1 - shadow-sm
</div>
<div class="bg-body rounded-3 shadow p-3">
<div class="small mb-2">
Level 2 - shadow
</div>
<div class="bg-body rounded-3 shadow-lg p-3 small">
Level 3 - shadow-lg
</div>
</div>
</div>
</div>12Stat cards
shadow-sm with no border for soft dashboard tiles.
Orders
249
Revenue
$10,731.84
<div class="row g-3 p-1">
<div class="col-6">
<div class="bg-body rounded-4 shadow-sm p-3">
<div class="small text-body-secondary">
Orders
</div>
<div class="fs-4 fw-bold">
249
</div>
</div>
</div>
<div class="col-6">
<div class="bg-body rounded-4 shadow-sm p-3">
<div class="small text-body-secondary">
Revenue
</div>
<div class="fs-4 fw-bold">
$10,731.84
</div>
</div>
</div>
</div>13Modal-like dialog
A static dialog box with shadow-lg over a dimmed area.
Delete workflow?
This cannot be undone.
<div class="bg-dark bg-opacity-25 rounded-4 p-4 d-flex justify-content-center">
<div class="bg-body rounded-4 shadow-lg p-4" style="max-width:20rem" role="dialog" aria-label="Confirm">
<h3 class="h6 fw-semibold">Delete workflow?</h3>
<p class="small text-body-secondary">This cannot be undone.</p>
<div class="d-flex gap-2 justify-content-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.
$86.07
Chocolate tart
Desserts
<div class="bg-body rounded-4 shadow-sm overflow-hidden position-relative" style="max-width:16rem">
<img src="../assets/img/product-5.svg" alt="Chocolate tart" class="w-100 d-block"> <span class="position-absolute top-0 end-0 m-2 bg-body rounded-pill px-2 py-1 small fw-bold shadow">$86.07</span>
<div class="p-3">
<div class="fw-medium">
Chocolate tart
</div>
<div class="small text-body-secondary">
Desserts
</div>
</div>
</div>15Callout box
A tip box with shadow-sm and a tinted background.
Start in minutes and get help from a real person whenever you need it.
<div class="bg-info-subtle text-info-emphasis rounded-4 shadow-sm p-3 d-flex gap-3">
<span class="fs-4"><i class="bi bi-lightbulb-fill" aria-hidden="true"></i></span>
<p class="mb-0 small">Start in minutes and get help from a real person whenever you need it.</p>
</div>16Tooltip-like label
A tiny dark label with shadow pointing at a chart value.
581
<div class="d-flex align-items-end gap-2" style="height:120px">
<div class="bg-primary-subtle rounded-top w-25 h-50">
</div>
<div class="bg-primary rounded-top w-25 h-100 position-relative">
<span class="position-absolute top-0 start-50 translate-middle text-bg-dark rounded-2 px-2 py-1 small shadow text-nowrap">581</span>
</div>
<div class="bg-primary-subtle rounded-top w-25 h-75">
</div>
<div class="bg-primary-subtle rounded-top w-25 h-25">
</div>
</div>17Navigation bar shadow
A light navbar with shadow instead of a border.
<nav class="bg-body rounded-3 shadow px-3 py-2 d-flex flex-wrap align-items-center gap-3" aria-label="Main">
<span class="fw-bold me-auto">Koraara Deck</span> <a href="#" class="link-body-emphasis text-decoration-none small">Home</a> <a href="#" class="link-body-emphasis text-decoration-none 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 15 MB
<div class="bg-body rounded-4 shadow-sm p-4 text-center border">
<div class="fs-2 text-primary">
<i class="bi bi-cloud-arrow-up-fill" aria-hidden="true"></i>
</div>
<div class="fw-semibold">
Drop files here
</div>
<div class="small text-body-secondary">
PNG, JPG or PDF up to 15 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-4 p-4 d-flex flex-wrap gap-3">
<div class="bg-dark text-white rounded-3 shadow-lg p-3 border border-white border-opacity-10 small">
shadow-lg + border-opacity-10
</div>
<div class="bg-dark text-white rounded-3 shadow p-3 small">
shadow only
</div>
</div>20Testimonial card
A quote card with shadow and a large quote icon.
Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.
<figure class="bg-body rounded-4 shadow p-4 mb-0" style="max-width:28rem">
<div class="fs-2 text-primary lh-1">
<i class="bi bi-quote" aria-hidden="true"></i>
</div>
<blockquote class="mb-3"><p class="mb-0">Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</p></blockquote>
<figcaption class="small text-body-secondary">Mia Sato, Denver</figcaption>
</figure>