Shadow utilities in Bootsrap - Mini Project: Build & Apply

Using Bootstrap Shadow Utilities

📖 Scenario: You are creating a simple webpage to showcase different shadow effects on boxes using Bootstrap's shadow utilities. Shadows help elements stand out by adding depth, like how a picture frame casts a shadow on a wall.

🎯 Goal: Build a webpage with four colored boxes, each demonstrating a different Bootstrap shadow utility class: shadow-none, shadow-sm, shadow, and shadow-lg. This will help you see how shadows change the look of elements.

📋 What You'll Learn

Use Bootstrap 5 CSS via CDN

Create four div elements with background colors and fixed size

Apply the shadow utility classes shadow-none, shadow-sm, shadow, and shadow-lg respectively

Arrange the boxes vertically with spacing

Include semantic HTML structure and responsive viewport meta tag

💡 Why This Matters

🌍 Real World

Shadows are used in web design to create depth and highlight important elements, making interfaces more visually appealing and easier to understand.

💼 Career

Knowing how to use Bootstrap utilities like shadows helps you quickly style web components in professional projects, improving UI design and user experience.

1

Set up the basic HTML structure with Bootstrap CSS

Create a basic HTML5 page with lang="en", charset="UTF-8", and a viewport meta tag for responsiveness. Include the Bootstrap 5 CSS CDN link inside the <head>. Add a <main> section with a container <div> that will hold the shadow boxes.

Bootsrap

Hint

Remember to include the Bootstrap CSS link from the official CDN inside the <head> section.

2

Create four colored boxes inside the container

Inside the div with class container, create four div elements. Each should have a fixed width and height of 5rem, a margin bottom of 3rem, and a background color: bg-primary, bg-success, bg-warning, and bg-danger respectively. Do not add shadow classes yet.

Bootsrap

    
    
    Bootstrap Shadow Utilities
    


    
        
            
        
    

Hint

Use inline styles for width and height. Use Bootstrap margin bottom class mb-3 for spacing.

3

Add Bootstrap shadow utility classes to each box

Add the shadow utility classes to each colored box div in this order: first box gets shadow-none, second box gets shadow-sm, third box gets shadow, and fourth box gets shadow-lg. Keep the existing classes and styles.

Bootsrap

    
    
    Bootstrap Shadow Utilities
    


    
        
            
        
    

Hint

Keep the existing classes and add the shadow classes separated by spaces.

4

Add a heading and improve accessibility

Above the container div, add a <h1> heading with the text Bootstrap Shadow Utilities Demo. Add an aria-label attribute with the value Shadow boxes demonstration to the main element for accessibility.

Bootsrap

    
    
    Bootstrap Shadow Utilities
    


    
        
        
            
            
            
            
        
    

Hint

Place the heading inside main but before the container. Add the aria-label attribute to the main tag.

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