Bootstrap -4 Padding

user_1377979 0
Viewed 2009

I am using the bootstrap 4 padding feature. By default, col or col-12 classes in bootstrap4 applies 15px padding on left and right. I want to set the left and right padding 0 for mobile devices, so I use the following code

<div class="col col-12 p-0"></div>

As Bootstrap-4 is mobile-first, I assumed, p-0 will only be applied to extra small screens, but unfortunately, this p-0 seems to be applied to all screen sizing for me. Is there a way I can only use p-0 for extra small mobile devices or sm device. For mobile desktop, default padding of 15px on left and right should be applied.

Thanks.

bootstrap-4 css
1 Answers

The way the bootstrap grid works is if you put a .col inside a .row, the row has negative left and right margin that absorbs the column's margin.

But if you still want to have 0 padding on small screens and some padding on medium, you can do this:

<div class="col-12 px-0 px-md-3"></div>

The "x" means just left and right padding, because columns only have padding on the left and right. The "3" by default gets you 1rem, which is 16px, the closest to 15px.

user_5914870
Related