Bootstrap 5 column spacing

I have a problem with spacing using latest bootstrap , when i give vertical spacing on the XS thats has a screen range from 0 to 576px but the effect does apply for the XL one for bigger screens how do i fix it , this sould not happen given the screen range.
Here the image : test — ImgBB

Hi @HerrscherOfReason,
Bootstrap is typically mobile-first, meaning you design for the smallest screen, and then make changes as the screen gets larger. In this case, that means that when you set a top margin of 5, the class mt-5 is added, meaning a margin of 5 on screens from XS up - basically from a width of 0px and up. There isn’t an automatic way to set a class to only happen on XS screens. Instead, what you want to do is set a margin top of 0 on a larger screen. So if you set a margin of 0 using the class mt-sm-0 then any screen from 576px up will have a margin top of 0.
Hope this helps,
Bob

1 Like

Thank you for the answer , but i can create my own media queriy and use the class inside it?

Hi @HerrscherOfReason,
You can create a media query and add a custom class inside, but I wouldn’t recommend using an existing Bootstrap class. It might give unexpected results.
Cheers,
Bob

1 Like