Bootstrap 4 How to remove these margin/padding in the row class

Question

I love Bootstrap, but I'm no expert nor a front-end developer, and there is a problem I always have with it. See the image below.

For the row and columns of this layout, I use this:

<div class="row">
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
</div>

Is there any utility class to remove this space in the start and in the end of the row? I would like to make the first and last column to match the red box below.

score 1 · Accepted Answer · edited Sep 10 '19 at 08:39

1

In Bootstrap 4 you can use this:

<div class="row">
    <div class="col-md-4 px-0">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4 px-0">...</div>
</div>

https://getbootstrap.com/docs/4.3/utilities/spacing/

https://getbootstrap.com/docs/4.3/layout/grid/#gutters

edited Sep 10 '19 at 08:39

Jakub Muda

6,008
10
37
56

answered Sep 09 '19 at 20:13

Simon

44
4

score 0 · Answer 2 · answered Sep 09 '19 at 21:21

The utilities classes work but they leave the side elements bigger.

I found a solution for the issue. I embraced everything with a div.items-list and set this styling to it (it's sass)

.items-list{
    [class^="col"]{
        padding-right: 30px;
        padding-left: 0;

        &:nth-child(2n){
            padding-right: 15px;
            padding-left: 15px;
        }

        &:nth-child(3n){
            padding-right: 0;
            padding-left: 30px;
        }
    }
}

Bootstrap 4 How to remove these margin/padding in the row class

2 Answers2