Do you need to use Bootstrap's "container" and "row" if your content is to span the whole width?

Question

I think the standard of Bootstrap 3 and 4 is

<div class="container">
    <div class="row">
        <div class="col-md-4"> ... </div>
        <div class="col-md-8"> ... </div>   <!-- just add up to 12 -->
    </div>
</div>

But what if you have a div, table, form, or any element, that you plan to just let it span the whole width? Then do you need the container or row or col-md-12 at all, for the whole page to display well under the styling rules of Bootstrap 3 and 4?

P.S. if possible, please point to or quote the official Bootstrap docs related to this.

Answer 1

Short answer: you do need to use container, but you don't need to use row.

You can put elements directly in the container or container-fluid. You aren't required to use the grid (.row and .col-*), and the container alone can be used as a container of content. Only use the grid when you need the responsive 12-unit structure.

For example, this is valid Bootstrap...

<div class="container">
   <h2>Hello World</h2>
   <p class="lead">Some other content...</p>
</div>

From the Bootstrap docs...

"Bootstrap requires a containing element to wrap site contents and house our grid system."

So, the purpose of container is two-fold: 1) to "house the grid system", and 2) to "wrap site contents". However, when you do use the grid (.row and .col-*), a container is required to wrap the .row.

Even the basic starter template utilizes container without the grid.

In summary...

• You can use .container or .container-fluid alone to contain elements and page content.
• If you use the grid (.row and .col-*), .row must be inside a .container or .container-fluid, and .col-* must be inside a .row.

Answer 2

You should add .container-fluid to your wrapping div. You should wrap the table, div, or form within a div add the class .container-fluid to it.

The official bootstrap documentation on grid system