Spacing utilities (margin, padding) in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the Bootstrap class m-3 do?

It adds margin on all sides of an element with a size of 3 (which equals 1rem by default).

beginner

How do you add padding only to the left side of an element in Bootstrap?

Use the class ps-* where * is the size number (0 to 5). For example, ps-2 adds padding-left with size 2.

beginner

What is the difference between m-0 and p-0 in Bootstrap?

m-0 removes all margin from the element, while p-0 removes all padding.

intermediate

Explain what mx-auto does in Bootstrap.

It sets the left and right margins to auto, centering the element horizontally within its container.

intermediate

How do you apply different spacing on different screen sizes using Bootstrap spacing utilities?

Use responsive classes like m-sm-2 or p-lg-4 to apply margin or padding starting from the specified breakpoint (small, large, etc.).

Which Bootstrap class adds padding on all sides with size 4?

A p-4

B m-4

C px-4

D py-4

p-4 adds padding on all sides. m-4 adds margin, px-4 adds padding left and right, py-4 adds padding top and bottom.

What does the class mt-0 do?

A Adds top padding size 0

B Removes top margin

C Adds top margin size 0.5

D Removes all margin

mt-0 removes the top margin by setting it to zero.

How do you center a block element horizontally using Bootstrap spacing utilities?

A Add <code>my-auto</code>

B Add <code>m-auto</code>

C Add <code>p-auto</code>

D Add <code>mx-auto</code>

mx-auto sets left and right margins to auto, centering the element horizontally.

Which class adds margin only on the bottom with size 3?

A ml-3

B mt-3

C mb-3

D mr-3

mb-3 adds margin-bottom with size 3.

How do you add padding-left size 2 only on medium and larger screens?

A ps-md-2

B pl-md-2

C ps-2-md

D p-md-l-2

Bootstrap uses ps-md-2 for padding start (left) on medium and larger screens.

Describe how Bootstrap spacing utilities help control margin and padding on elements.

Think about how you add space around or inside boxes in a webpage.

Explain how to center an element horizontally using Bootstrap spacing utilities.

Remember how auto margins can center blocks in CSS.