Shadow utilities in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a small shadow to a div using Bootstrap.

Bootsrap

<div class="[1] p-3 mb-2 bg-body rounded">Small shadow box</div>

Drag options to blanks, or click blank then click option'

Ashadow-none

Bshadow-lg

Cshadow-sm

Dshadow

Attempts:

3 left

💡 Hint

Common Mistakes

Using shadow-lg instead of shadow-sm for a small shadow.

Forgetting to add the shadow class entirely.

The class shadow-sm adds a small shadow effect to the element.

2fill in blank

medium

Complete the code to add a large shadow to a button using Bootstrap.

Bootsrap

<button type="button" class="btn btn-primary [1]">Click me</button>

Drag options to blanks, or click blank then click option'

Ashadow-lg

Bshadow

Cshadow-none

Dshadow-sm

Attempts:

3 left

💡 Hint

Common Mistakes

Using shadow-sm or shadow instead of shadow-lg for a large shadow.

Not including any shadow class.

The class shadow-lg adds a large shadow effect to the button.

3fill in blank

hard

Fix the error in the code to remove the shadow from the card.

Bootsrap

<div class="card [1] p-3">No shadow card</div>

Drag options to blanks, or click blank then click option'

Ashadow-sm

Bshadow-none

Cshadow

Dshadow-lg

Attempts:

3 left

💡 Hint

Common Mistakes

Using shadow or shadow-sm which add shadows instead of removing them.

Leaving out the shadow class entirely.

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

4fill in blank

hard

Fill both blanks to create a div with medium shadow and rounded corners.

Bootsrap

<div class="[1] [2] p-4">Medium shadow with rounded corners</div>

Drag options to blanks, or click blank then click option'

Ashadow

Bshadow-lg

Crounded

Dshadow-none

Attempts:

3 left

💡 Hint

Common Mistakes

Using shadow-lg for medium shadow.

Forgetting to add the rounded class.

The class shadow adds a medium shadow, and rounded adds rounded corners.

5fill in blank

hard

Fill all three blanks to create a button with no shadow, rounded corners, and padding.

Bootsrap

<button class="btn btn-secondary [1] [2] [3]">No shadow button</button>

Drag options to blanks, or click blank then click option'

Ashadow-none

Brounded

Cp-3

Dshadow

Attempts:

3 left

💡 Hint

Common Mistakes

Using shadow instead of shadow-none.

Forgetting to add padding or rounded corners.

The class shadow-none removes shadow, rounded adds rounded corners, and p-3 adds padding.

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