Bootstrap container. Col & row overflowing container?

Question

Why is my container not containing the row/columns here when I introduce padding? Container has a black border and the row / col have yellow / white respectively.

<div class="container border border-dark">
    <div class="row">
        <div class="col" style="border: dotted 1px blue">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit aliquid asperiores cumque ducimus quae facilis sit molestiae ullam nam voluptates odit accusantium fugiat corrupti non quaerat voluptatem qui,
        </div>
    </div>
    <div class="row">
        <div class="col border border-info" style="border: dotted 1px blue"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, debitis dignissimos nostrum commodi iure optio nulla sapiente, modi voluptatibus nam, sed maxime doloribus hic quaerat perferendis ex </div>
        <div class="col border border-info" style="border: dotted 1px blue"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, debitis dignissimos nostrum commodi iure optio nulla sapiente, modi voluptatibus nam, sed maxime doloribus hic quaerat perferendis ex </div>
        <div class="col border border-info" style="border: dotted 1px blue"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis at ea facere magni similique eveniet corrupti commodi amet id ad asperiores minus laborum necessitatibus, iusto incidunt vero deserunt qui </div>
    </div>
</div>

Carol Skelly · Answer 1 · 2021-04-30T11:26:37.137

As explained in the Bootstrap docs...

"Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side."

"In a grid layout, content must be placed within columns and only columns may be immediate children of rows."

Following this guidance...

<div class="container border border-dark p-1"> 
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit aliquid asperiores cumque ducimus quae facilis sit molestiae ullam nam voluptates odit accusantium fugiat corrupti non quaerat voluptatem qui,
    <div class="row border border-warning">
        <div class="col border border-info"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, debitis dignissimos nostrum commodi iure optio nulla sapiente, modi voluptatibus nam, sed maxime doloribus hic quaerat perferendis ex </div>
        <div class="col border border-info"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, debitis dignissimos nostrum commodi iure optio nulla sapiente, modi voluptatibus nam, sed maxime doloribus hic quaerat perferendis ex </div>
        <div class="col border border-info"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis at ea facere magni similique eveniet corrupti commodi amet id ad asperiores minus laborum necessitatibus, iusto incidunt vero deserunt qui </div>
    </div>
</div>

Demo

Content can be placed directly in a container or col, but NOT directly in a row since "Rows are wrappers for columns" and "only columns may be immediate children of rows".

All you've done is quote what I've already read but frankly I don't understand. If you think you can explain it with an example please do, as to me it sounds counter-intuitive. — user6746919, Apr 29 '21 at 21:47
Please **READ** the answer and the Bootstrap docs. Specifcally read the part in **BOLD** that says **"content must be placed within columns"** and "**only columns may be immediate children of rows"**. Then LOOK what your markup, and the "Lorem ipsum dolor " content directly inside the row (and outside the columns). — Carol Skelly, Apr 30 '21 at 01:06
I should have said that I subsequently realised I'd put content inside a row rather than where it should be i.e. inside the column thanks to your initial post. I don't have a problem with this. — user6746919, Apr 30 '21 at 17:02
I didn't downvote your question but I can understand why others would. **"In other words using a negative margin as stated in the docs to keep content justified makes no sense?"** Again, the docs explains negative margins are to counteract padding. Of course this only applies to the outermost columns. You should really read the answers on the duplicate questions as I've already gone into great detail to explain this. [See this demo](https://codeply.com/p/zAJWMvT9R4) — Carol Skelly, May 01 '21 at 12:11

Bootstrap container. Col & row overflowing container?

1 Answers1