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.