Shadow utilities in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What shadow effect is applied by shadow-lg in Bootstrap?

Bootstrap provides different shadow utilities like shadow-sm, shadow, and shadow-lg. Which of these best describes the visual effect of shadow-lg?

Bootsrap

<div class="shadow-lg p-3 mb-5 bg-white rounded">Shadow Large Example</div>

A A colored shadow with a red tint around the element.

B A large, prominent shadow with more blur and spread around the element.

C No shadow effect; it removes any shadow from the element.

D A small, subtle shadow with minimal blur and offset.

💡 Hint

Think about how shadows grow from small to large in Bootstrap utilities.

The shadow-lg class applies a larger, more noticeable shadow with greater blur and spread compared to shadow-sm or shadow. It makes the element stand out more visually.

🧠 Conceptual

intermediate

Which Bootstrap shadow utility removes all shadows?

Bootstrap has several shadow utility classes. Which class will remove any shadow effect from an element?

A no-shadow

B shadow-remove

C shadow-none

D shadow-zero

💡 Hint

Look for the class that explicitly says 'none'.

The shadow-none class removes any shadow from the element, overriding other shadow utilities.

❓ selector

advanced

Which CSS property does Bootstrap's shadow utilities primarily modify?

Bootstrap shadow utilities like shadow, shadow-sm, and shadow-lg change which CSS property to create shadow effects?

A box-shadow

B text-shadow

C filter: drop-shadow

D background-shadow

💡 Hint

Think about shadows around boxes, not text.

Bootstrap shadow utilities use the box-shadow CSS property to add shadows around elements' boxes.

❓ accessibility

advanced

How can shadows affect accessibility and what should you consider?

When using shadow utilities in Bootstrap, what accessibility consideration is important?

A Shadows can reduce text contrast, so ensure sufficient contrast for readability.

B Shadows have no impact on accessibility and can be ignored.

C Shadows always improve accessibility by making elements more visible.

D Shadows should be removed on all interactive elements for accessibility.

💡 Hint

Think about how shadows might affect text clarity.

Shadows can sometimes reduce contrast or create visual noise, making text harder to read. It's important to check contrast ratios and ensure shadows do not interfere with readability.

📝 Syntax

expert

What is the output of this HTML snippet using Bootstrap shadow utilities?

Given the following HTML, what will be the visible shadow effect on the box?

Bootsrap

<div class="shadow-sm shadow-lg shadow-none p-4">Test Box</div>

A Large shadow from shadow-lg is visible.

B Small shadow from shadow-sm is visible.

C Both small and large shadows are visible layered.

D No shadow visible because shadow-none overrides others.

💡 Hint

Consider CSS class order and which shadow utility takes precedence.

In Bootstrap, the shadow-none class removes shadows and overrides other shadow classes when applied together.

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