Setting spacing per breakpoint in Bootstrap 5

Question

I thought it was possible to set spacing (margin/padding) per breakpoint in Bootstrap 5?

Something like mb-sm-2 doesn't seem to work... Should it...?

I have checked the docs but don't really understand what it's saying - it sounds like breakpoints are supported... 🤷‍♂️

Answer 1

Yes. Break points are supported in Bootstrap 5. From the docs if you want to set margin or padding for extra small dimensions(<576px) .You use

<div class="mb-2"></div>

That though will affect all dimensions as it is not under any specified media query. If you want to specify margin on small dimensions(≥576px) . You use

<div class="mb-sm-2"></div>

That will affect dimensions that are equal and greater than 576px. In case you want that to take place only on small dimensions. You use

<div class="mb-sm-2 mb-md-0"></div>

Dimensions that are equal to and greater than 768px and those less 576px will not have the specified margin.

Answer 2

Bootstrap 5 uses for breakpoints a different syntax comparing with previous versions. The available breakpoints are as follows

| Breakpoint        | Class infix | Dimensions |
|-------------------|-------------|------------|
| X-Small           | None        | <576px  |
| Small             | sm          | ≥576px     |
| Medium            | md          | ≥768px     |
| Large             | lg          | ≥992px     |
| Extra large       | xl          | ≥1200px    |
| Extra extra large | xxl         | ≥1400px    |

Here is a particular example: in order to get 0 margin and 0 padding ONLY for screens with lower resolution as X-Small(<576px) use something like this:

class="m-0 p-0 m-sm-4 p-sm-4"

where m-0 and p-0 will be applied only for resolution <576px and m-sm-4 and p-sm-4 for ≥576px resolution.