nested row padding overflows into parent row in bootstrap 5

user_7801303 0
Viewed 316

I have this example in bootstrap 5 where I nest a row in a column that is nested in an outer row where the inner row has a padding of 5 and the column has a padding of 1. I added the colors and borders for clarity.

<div class="row p-5" style="background-color: #0F4C99; border: 3px solid black">
    <div class="col-12 p-1" style="background-color: #E6005F; border: 3px solid black">
        <div class="row p-5" style="background-color: #E6B625; border: 3px solid black">
            
        </div>
    </div>
</div>

pic1

you can clearly see from the image that the inner row overflows into the outer row on the sides because it's covering its parent column, but it isn't overflowing on top or below.

My question is why does this happen and what can I do to solve it?

bootstrap-5 padding css html
1 Answers

My question is why does this happen

Because .row applies negative margin-left and -right. (And it needs that, for the whole grid to work.)

and what can I do to solve it?

You need to always work with columns in rows.

You tried to style the inner row directly here, so that the overlap due to the negative margins becomes visible.

You should put a column element into that row first (col-12, for just one column over the whole width), and then style the column element.

user_14278780
Related