21

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.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
nonopolarity
  • 146,324
  • 131
  • 460
  • 740

4 Answers4

30

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.
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 1
    I think your answer is more accurate... if I add a wrapper `div` with class `row` and then put `col-md-12` on the `table`, then the table's border is too wide... touching the edge of the page... if i remove the `row` and `col-md-12` stuff then it is perfect – nonopolarity Apr 02 '17 at 22:56
4

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

Graham
  • 7,431
  • 18
  • 59
  • 84
neophyte
  • 6,540
  • 2
  • 28
  • 43
2

You should use the .container-fluid class if you want your content to span the full width of the document. Without this class the negative margins of .row will cause horizontal scrolling.

You could possibly omit the container-fluid and row but this may cause unexpected results when using other Bootstrap components.

.col-md-4 {
  background: red;
}

.col-md-8 {
  background: green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4"> ... </div>
    <div class="col-md-8"> ... </div>
  </div>
</div>
Turnip
  • 35,836
  • 15
  • 89
  • 111
  • so just use `.container-fluid` on the `table` or `div` or `form`? Do you need any `row`? – nonopolarity Apr 02 '17 at 17:49
  • To do this the Bootstrap way, you would use `.container-fluid > .row > .col-XX-XX`. I don't think you will find anything in the documentation about doing it any other way. – Turnip Apr 02 '17 at 17:53
  • So even for a div, table, or form to span the whole width, use `.container-fluid > .row > .col-md-12`, that is, always have these 3 layers. So if you put the class `col-md-12` on the `form` or `table`, then you need 2 extra wrappers around it? – nonopolarity Apr 02 '17 at 18:02
  • Yes that's right. You can't use columns without rows. You cant use rows without containers. You should use all three together. – Turnip Apr 02 '17 at 18:08
-2

Use fluid-container to span entire width of parent.

DawgOnKing
  • 31
  • 10