How Have Bootstrap\'s Spacing Utility Classes Changed in Bootstrap 4 and 5?

How do I Use the Spacing Utility Classes in Bootstrap?

In an article you encountered the Bootstrap 4 Spacing Utility Classes such as m-b-lg, which you attempted to implement in a React MeteorJS application without success. To clarify, let's explore the usage and updates of Bootstrap's spacing utilities.

Bootstrap 5 (beta 2021)

Since Bootstrap 5 introduced RTL support, the left and right concepts have been replaced with start and end, leading to changes in l- and r- spacing utilities:

• pl-* = ps-*
• pr-* = pe-*
• ml-* = ms-*
• mr-* = me-*

Bootstrap 4 (Update 2020)

Bootstrap 4's spacing utilities have evolved since its alpha release. The updated syntax is:

• Margins: m{sides}-{size}
• Padding: p{sides}-{size}

For example:

• mb-2 = margin bottom 2 spacing units
• m-0 = no margins
• pt-3 = padding top 3 spacing units
• p-1 = padding all sides 1 spacing unit

Bootstrap 4 provides 6 sizes (0-5) that represent a portion of the default .5rem spacer unit. Additionally, you can now specify x-axis (left/right) and y-axis (top/bottom) utilities:

• my-2 = margin top & bottom 2 spacing units
• mx-0 = no margins left & right
• px-3 = padding left & right 3 spacing units

Furthermore, these spacing utilities are responsive, with the smallest breakpoint (xs) implied if no breakpoint is specified:

• mt-md-2 = margin top 2 spacing units, on md (and up)
• py-sm-0 = no padding top & bottom, on sm (and up)

The above is the detailed content of How Have Bootstrap\'s Spacing Utility Classes Changed in Bootstrap 4 and 5?. For more information, please follow other related articles on the PHP Chinese website!