Shadow utilities in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are shadow utilities in Bootstrap?

Shadow utilities in Bootstrap are predefined classes that add shadow effects to elements, making them look raised or lifted from the page.

beginner

How do you add a small shadow to an element using Bootstrap?

Use the class shadow-sm on the element to add a small shadow.

beginner

What class would you use to remove shadow from an element in Bootstrap?

Use the class shadow-none to remove any shadow from an element.

beginner

List the four main shadow utility classes in Bootstrap.

The four main shadow utility classes are: shadow-none, shadow-sm, shadow, and shadow-lg.

intermediate

Why use shadow utilities instead of custom CSS for shadows?

Shadow utilities are quick to use, consistent across the site, and responsive. They save time and keep design uniform without writing custom CSS.

Which Bootstrap class adds a large shadow to an element?

A shadow-lg

B shadow-sm

C shadow-none

D shadow-xl

The class shadow-lg adds a large shadow. There is no shadow-xl class in Bootstrap.

What does the class shadow-none do?

A Adds a small shadow

B Removes any shadow

C Adds a large shadow

D Adds a medium shadow

shadow-none removes any shadow effect from the element.

Which class would you use for a default shadow in Bootstrap?

A shadow-lg

B shadow-sm

C shadow

D shadow-none

The class shadow adds the default shadow size.

Shadow utilities in Bootstrap are used to:

A Add shadow effects to elements

B Add borders

C Change font size

D Add color to text

Shadow utilities add shadow effects to elements to create depth.

Which shadow utility class would you use for the smallest shadow?

A shadow-lg

B shadow-none

C shadow

D shadow-sm

shadow-sm adds the smallest shadow size.

Explain how to use Bootstrap shadow utilities to add different shadow sizes to elements.

Think about the class names and what each does.

Describe why using Bootstrap shadow utilities is helpful compared to writing custom CSS shadows.

Consider benefits of ready-made classes.