Shadow utilities in Bootsrap

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>

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.

Practice

1. What does the Bootstrap class shadow-lg do to an element?

easy

A. Changes the element's background color

B. Removes any shadow from the element

C. Adds a small shadow around the element

D. Adds a large shadow around the element to create depth

Solution

1. Step 1: Understand shadow utility classes

   Bootstrap provides shadow classes to add shadows of different sizes to elements.

2. Step 2: Identify the effect of shadow-lg

   The shadow-lg class adds a large shadow, making the element appear raised and deeper.

3. Final Answer:

   Adds a large shadow around the element to create depth -> Option D

4. Quick Check:

   shadow-lg means large shadow [OK]

Hint: Remember: lg means large shadow size [OK]

Common Mistakes:

• Confusing shadow-lg with shadow-none
• Thinking shadow-lg changes background color
• Mixing shadow-lg with shadow-sm

2. Which of the following is the correct way to remove a shadow from a Bootstrap element?

easy

A. Add class shadow-remove

B. Add class shadow-none

C. Add class no-shadow

D. Add class shadow-zero

Solution

1. Step 1: Recall Bootstrap shadow removal class

   Bootstrap uses shadow-none to remove shadows from elements.

2. Step 2: Check the options for the correct class

   Only shadow-none is a valid Bootstrap class to remove shadows.

3. Final Answer:

   Add class shadow-none -> Option B

4. Quick Check:

   shadow-none removes shadows [OK]

Hint: Use shadow-none to remove shadows, not shadow-remove [OK]

Common Mistakes:

• Using non-existent classes like shadow-remove
• Confusing shadow-none with shadow-zero
• Trying to remove shadow by removing other classes

3. What shadow effect will the following HTML produce?

<div class="shadow-sm p-3 mb-5 bg-white rounded">Small Shadow Box</div>

medium

A. A box with a large shadow around it

B. A box with no shadow

C. A box with a small shadow around it

D. A box with a medium shadow around it

Solution

1. Step 1: Identify the shadow class used

   The class shadow-sm is applied, which means a small shadow.

2. Step 2: Understand the visual effect

   The box will have a subtle, small shadow giving slight depth.

3. Final Answer:

   A box with a small shadow around it -> Option C

4. Quick Check:

   shadow-sm means small shadow [OK]

Hint: shadow-sm means small shadow, shadow-lg means large [OK]

Common Mistakes:

• Thinking shadow-sm means no shadow
• Confusing shadow-sm with shadow-lg
• Ignoring other classes like p-3 or rounded

4. You want to add a medium shadow to a button but accidentally use shadow-none. What will happen?

medium

A. The button will have no shadow

B. The button will have a large shadow

C. The button will have a medium shadow

D. The button will have a small shadow

Solution

1. Step 1: Understand the effect of shadow-none

   The class shadow-none removes any shadow from the element.

2. Step 2: Predict the button's shadow

   Even if you wanted a medium shadow, shadow-none overrides and removes it.

3. Final Answer:

   The button will have no shadow -> Option A

4. Quick Check:

   shadow-none removes shadows [OK]

Hint: shadow-none always removes shadows, no matter other classes [OK]

Common Mistakes:

• Assuming shadow-none adds a shadow
• Mixing shadow-none with shadow classes
• Not realizing class order matters

5. You want to create a card with a large shadow but no shadow on the header inside it. Which classes should you use?

<div class="?">
  <header class="?">Card Header</header>
  <main>Card content</main>
</div>

hard

A. div: shadow-lg, header: shadow-none

B. div: shadow-none, header: shadow-lg

C. div: shadow-sm, header: shadow-lg

D. div: shadow, header: shadow

Solution

1. Step 1: Apply large shadow to the card container

   Use shadow-lg on the div to add a large shadow around the card.

2. Step 2: Remove shadow from the header

   Use shadow-none on the header to ensure it has no shadow inside the card.

3. Final Answer:

   div: shadow-lg, header: shadow-none -> Option A

4. Quick Check:

   Large shadow on container, none on header [OK]

Hint: Use shadow-none on child to remove parent's shadow effect [OK]

Common Mistakes:

• Adding shadow to both div and header causing double shadows
• Using shadow-none on div removes all shadows
• Confusing shadow and shadow-lg classes