Bootsrapmarkup~15 mins

Spacing utilities (margin, padding) in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Bootstrap Spacing Utilities Practice

📖 Scenario: You are creating a simple webpage layout using Bootstrap. You want to practice adding space around elements using Bootstrap's spacing utilities for margin and padding.

🎯 Goal: Build a webpage with three colored boxes stacked vertically. Use Bootstrap spacing classes to add margin and padding exactly as instructed so the boxes have clear space around and inside them.

📋 What You'll Learn

Use Bootstrap 5 spacing utility classes for margin and padding

Add margin and padding only by adding Bootstrap classes to the boxes

Use semantic HTML with a main container

Make sure the spacing matches the instructions exactly

💡 Why This Matters

🌍 Real World

Spacing utilities are used in real websites to quickly add consistent space around elements without writing custom CSS.

💼 Career

Knowing Bootstrap spacing classes helps you build clean, responsive layouts faster, a common task in front-end web development jobs.

Progress0 / 4 steps

Create the HTML structure with three boxes

Create a main container with three div elements inside it. Each div should have the classes box and a background color class: bg-primary for the first, bg-success for the second, and bg-danger for the third. Do not add any spacing classes yet.

Bootsrap

Need a hint?

Use three div elements inside main. Assign the classes exactly as shown.

Add margin to separate the boxes vertically

Add the Bootstrap class mb-3 (margin bottom 1rem) to the first and second div boxes only. Do not add margin to the third box.

Bootsrap

Need a hint?

Add mb-3 to the first two boxes only to create vertical spacing.

Add padding inside each box

Add the Bootstrap class p-4 (padding 1.5rem) to all three div boxes to add space inside them.

Bootsrap

Need a hint?

Add p-4 to all boxes to add padding inside them.

Add CSS to style the boxes with height and border radius

Add a <style> block inside the <head> section with CSS that sets the .box class to have a height of 6rem and a border radius of 0.5rem.

Bootsrap

Need a hint?

Use a <style> tag inside <head> to add CSS for the .box class.