0
0
Bootsrapmarkup~5 mins

Shadow utilities in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Shadow utilities add depth and focus to elements by creating shadows around them. They help make parts of a webpage stand out visually.

To highlight buttons or cards so they look clickable.
To create a sense of layering between elements on a page.
To add subtle decoration that improves the look without extra images.
To show focus or active states on interactive elements.
To separate content sections visually.
Syntax
Bootsrap
class="shadow"
class="shadow-sm"
class="shadow-lg"
class="shadow-none"

shadow adds a regular shadow around the element.

shadow-sm adds a smaller, lighter shadow.

shadow-lg adds a larger, stronger shadow.

shadow-none removes any shadow.

Examples
This adds a normal shadow with padding and rounded corners.
Bootsrap
<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
A button with a small shadow to make it stand out gently.
Bootsrap
<button class="btn btn-primary shadow-sm">Small shadow button</button>
A box with a large shadow for stronger emphasis.
Bootsrap
<div class="shadow-lg p-3 mb-5 bg-light rounded">Large shadow box</div>
This removes any shadow, useful to override shadows.
Bootsrap
<div class="shadow-none p-3 mb-5 bg-white rounded">No shadow here</div>
Sample Program

This page shows four elements with different shadow utilities from Bootstrap. You see how shadows change the look and feel of boxes and buttons.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Shadow Utilities Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container py-5">
    <h1 class="mb-4">Shadow Utilities Demo</h1>
    <div class="shadow p-3 mb-4 bg-white rounded">Regular shadow box</div>
    <button class="btn btn-primary shadow-sm mb-4">Small shadow button</button><br />
    <div class="shadow-lg p-3 mb-4 bg-light rounded">Large shadow box</div>
    <div class="shadow-none p-3 mb-4 bg-white rounded border">No shadow box with border</div>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Shadow utilities only affect the box shadow CSS property.

Use shadow-none to remove shadows if you want a clean look.

Shadows can improve accessibility by helping users see focus or active states.

Summary

Shadow utilities add shadows to elements to create depth.

Use shadow-sm, shadow, and shadow-lg for different shadow sizes.

Use shadow-none to remove shadows.