Set padding on all columns in grid

Question

I am making a grid with bootstrap 3 there is looking like the below image. It is not possible for me to use Bootstrap 4, since it is a webshop with over 100.000 products, so the backend developers did not change it yet.

My problem is regarding the padding. All around the columns I would like to have a padding:15px;. At the moment I am giving each column the class="top-pad-d". But I am getting problems when I look at a mobile:

So to make my padding work, I now have to make a padding inside a media query, fx with the class="top-pad-m". But it is getting very complicated to control and weird.

For a single column the code will be:

Is there a way I can write some code there is saying - around all columns should there be 15px padding?

Please notice that I cannot set padding:15px; on all small columns, since they then will have a padding:30px;, because there is 2 rows on top of each other.

.row [class*="col-"] {
    padding-right: 7.5px;
    padding-left: 7.5px;
}
.padding-y {
    padding: 15px;
    background-color: #fff;
    margin-bottom:30px;
    border: 1px solid #ebecf0;
}
.top-pad-d {
    padding-top: 15px;
}

user_8902440 · Answer

I have come up with a full css solution: you will not have to alter the DOM anymore. To get to the result you want I've added padding: 7.5px to every column. Now in-between every column there is a distance of 7.5px + 7.5px = 15px. However, the outer edges still have a padding of 7.5px. That is why I've added a padding of 7.5px to the .row class. So now, there's a distance of 15px around every column.

.row [class*="col-"] {
  padding: 7.5px;
}

.row {
  background-color: #fff;
  padding: 7.5px !important;
}

.padding-y {
  margin-left: 15px !important;
  background-color: #fff;
  margin-bottom: 30px;
}

Hope this helps!

Set padding on all columns in grid

1 Answers