# Bootstrap 5 column spacing

**URL:** <https://forum.pinegrow.com/t/bootstrap-5-column-spacing/5451>\
**Category:** Questions\
**Tags:** css, bootstrap5\
**Created:** [July 10, 2021, 11:37pm UTC](https://forum.pinegrow.com/t/bootstrap-5-column-spacing/5451 "2021-07-10T23:37:12Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![HerrscherOfReason](https://avatars.discourse-cdn.com/v4/letter/h/a8b319/32.png) [@HerrscherOfReason](https://forum.pinegrow.com/u/HerrscherOfReason)\
**Post date:** [July 10, 2021, 11:37pm UTC](https://forum.pinegrow.com/t/bootstrap-5-column-spacing/5451/1 "2021-07-10T23:37:12Z")

</div>

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](https://ibb.co/zGgqLd3)

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [July 11, 2021, 9:16am UTC](https://forum.pinegrow.com/t/bootstrap-5-column-spacing/5451/2 "2021-07-11T09:16:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![HerrscherOfReason](https://avatars.discourse-cdn.com/v4/letter/h/a8b319/32.png) [@HerrscherOfReason](https://forum.pinegrow.com/u/HerrscherOfReason)\
**Post date:** [July 11, 2021, 11:21am UTC](https://forum.pinegrow.com/t/bootstrap-5-column-spacing/5451/3 "2021-07-11T11:21:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [July 11, 2021, 11:35am UTC](https://forum.pinegrow.com/t/bootstrap-5-column-spacing/5451/4 "2021-07-11T11:35:15Z")

</div>

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