Bootsrapmarkup~30 mins

Shadow utilities in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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