Nested Rows in Bootstrap 3 Fail to Respect The Grid

Nested rows in Bootstrap 3 fail to respect the grid?

1) Pick the proportions

Nested row also uses a 12-columns grid. So you asked Bootstrap to take 5/12 from 10 parent columns. But this is a fractional number. Because of this column boundaries do not coincide with each other.

Pick the proportions between the columns. For example:

4/12 from 9 parent columns is exactly 3 parent columns
3/12 from 8 parent columns is exactly 2 parent columns

div {  outline: 1px solid gray;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="container">  <div class="row">    <div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div>  </div>  <div class="row">    <div class="col-xs-1">col</div>    <div class="col-xs-1">col</div>    <div class="col-xs-1">col</div>    <div class="col-xs-8">      <div class="row">        <div class="col-xs-3">nested 4</div>        <div class="col-xs-9">nested 8</div>      </div>    </div>    <div class="col-xs-1">col</div>  </div>  <div class="row">    <div class="col-xs-1">col</div>    <div class="col-xs-1">col</div>    <div class="col-xs-9">      <div class="row">        <div class="col-xs-4">nested 3</div>        <div class="col-xs-8">nested 9</div>      </div>    </div>    <div class="col-xs-1">col</div>  </div></div>

Bootstrap nested rows and columns not stacking correctly

I did the following:

#dashboardContainer a {
    background: red;
    display: block;
    border: 1px solid blue;
    color: white;
    position: relative; /* Add Position */
    z-index: 1; /* Add Stack Order */
}

When using nested items I often use z-index to help manage the stack order of the elements.

Additional review:

I recommend updating your bootstrap CSS file to a more recent version as it appears it may be a bug on certain browsers when using v3.0.0

I changed this to v3.1.0 and higher and the row issue was no longer a problem.

How can I make tables respect the grid in Bootstrap 3?

Your bootstrap CSS adds padding-right: 15px and padding-left: 15px to all of the col-xx-xx elements.

Remove or override the padding and things should become aligned properly. The below image shows what happens in your Bootply when the padding is removed.

Sample Image

One way to override this is to create a class called no-padding like so:

.no-padding {
     padding-left: 0;
     padding-right: 0;
}

and apply it to any elements where you do not want padding applied. Here's an updated demo showing this:

.col-xs-1 {
  background-color: #eee;
  border: 1px solid #999;
}

th {
  background-color: #fee;
  border: 1px solid red;
}
.no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div>
  </div>
  <div class="row">
    <div class="col-xs-12 no-padding"> <!-- Add it Here -->
      <div class="table-responsive">
        <table class="table">
          <tr>
             <th class="col-xs-5">
               5-col header
             </th>
             <th class="col-xs-3">
               3-col header
             </th>
             <th class="col-xs-4">
               4-col header
             </th>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

Bootstrap: Nested column disappears after breaking point is reached

you used a lot of rows that were intertwined. That's unnecessary. You can solve your problem by using columns in a single row.

I also recommend removing the "padding:40px" feature and re-examining it for the example you share here. Because the Padding is too much, the items cannot fit into the 12-column grid system.

.row {  background: #f8f9fa;  text-align: center;}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container-fluid">  <div class="row d-flex align-items-center">    <!-- d-flex added-->
    <!-- First Column -->    <div class=" padding col-sm-12 col-lg-1">      <img class="img-fluid" width="200" src="https://cdn2.iconfinder.com/data/icons/investment-26/64/investment-16-512.png" alt="Sample Image">    </div>    <div class=" padding col-sm-12 col-lg-3">      <h2>Usability</h2>      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium sed vitae corrupti modi quam tempore, aut, reprehenderit praesentium odio sint recusandae eos voluptatibus ut beatae assumenda dignissimos explicabo hic voluptatum.</p>    </div>
    <!-- Second Column -->    <div class="padding col-sm-12 col-lg-1">      <img class="img-fluid" width="200" src="https://cdn2.iconfinder.com/data/icons/investment-26/64/investment-16-512.png" alt="Sample Image">    </div>    <div class="padding col-sm-12 col-lg-3">      <h2>Parallax effect</h2>      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium sed vitae corrupti modi quam tempore, aut, reprehenderit praesentium odio sint recusandae eos voluptatibus ut beatae assumenda dignissimos explicabo hic voluptatum.</p>    </div>
    <!-- Third Column -->    <div class="padding col-sm-12 col-lg-1">      <img class="img-fluid" width="200" src="https://cdn2.iconfinder.com/data/icons/investment-26/64/investment-16-512.png" alt="Sample Image">    </div>    <div class="padding col-sm-12 col-lg-3">      <h2>Unlimites colors</h2>      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium sed vitae corrupti modi quam tempore, aut, reprehenderit praesentium odio sint recusandae eos voluptatibus ut beatae assumenda dignissimos explicabo hic voluptatum.</p>    </div>  </div></div>

Bootstrap Rows and Columns - Do I need to use row?

Bootstrap 5 (update 2022)

Technically row isn't required in Bootstrap 5 since columns can be used standalone to set width, However, row is still needed for the flexbox grid system which is primary how columns are used.

Bootstrap 3, Bootstrap 4 (original answer)

Bootstrap Rows and Columns - Do I need to use row?

Yes, you need to use row.

Update 2018

The row>col relationship is the same in both Bootstrap 3 and 4 in that..

"only columns may be immediate children of rows"

So, the nested columns (.col-*) must also be inside a .row:

<div class="row">
  <div class="col-xs-12">
    <div class="row">
       <div class="col-xs-4">some content</div>
       <div class="col-xs-8">some other content</div>
    </div>
  </div>
</div>

As you can see here you should always use the row. This is very important in Bootstrap 4 because the columns will simply stack (wrap) vertically if not placed inside a .row. The .row has a negative margin of 15px on either side, so the benefit is that..

100% width content inside container
separate content into rows (force cols to be on line)
nest the grid row>col and maintain alignment on outer sides

From the Bootstrap 3 Docs...

Content should be placed within columns, and only columns may be
immediate children of rows.

From the Bootstrap 4 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... content must be placed within columns and only columns may be immediate children of
rows.

https://medium.com/wdstack/how-the-bootstrap-grid-really-works-471d7a089cfc

Bootstrap 3 - Why is row class is wider than its container?

In all grid systems, there are gutters between each column. Bootstrap's system sets a 15px padding on both the left and the right of each column to create this gutter.

The issue is that the first column should not have half a gutter on the left, and the last should not have half a gutter on the right. Rather than use some sort of .first or .last class on those columns as some grid systems do, they instead set the .row class to have negative margins that match the padding of the columns. This "pulls" the gutters off of the first and last columns, while at the same time making it wider.

The .row div should never really be used to hold anything other than grid columns. If it is, you will see the content shifted relative to any columns, as is evident in your fiddle.

UPDATE:

You modified your question after I answered, so here is the answer to the question you are now asking: Add the .container class to the first <div>. See working example.

Bootstrap Grid layout good practice

First is the better option for practice because in this you don't have to repeat your part of code several time like:
* starting the class="row".

 <div class="row">            <div class="col-xx-12">something</div>            <div class="col-xx-12">something</div>            <div class="col-xx-12">something</div> </div>

Bootstrap 4 row extends outside of container

The .row in bootstrap is giving a margin right and left of -15px, override it with a in-line style="margin: auto" and you should be fine.

The aside has a default padding left and right of 15, so in your case you should set the padding-left to 0 making the content fit the grid properly.

<section id="page-content">
  <div class="row" style="margin: auto">
    <aside class="col-md-3" style="padding-left: 0">
      <div class="card mt-3">
        <a href="#">
          <img class="card-img-top" src="http://via.placeholder.com/200x200" alt="Card image cap">
          <div class="card-body">
            <p class="card-text">Service</p>
          </div>
        </a>
      </div>

      <div class="card mt-3">
        <a href="#">
          <img class="card-img-top" src="http://via.placeholder.com/200x200" alt="Card image cap">
          <div class="card-body">
            <p class="card-text">Products</p>
          </div>
        </a>
      </div>

      <div class="card mt-3">
        <a href="#">
          <img class="card-img-top" src="http://via.placeholder.com/200x200" alt="Card image cap">
          <div class="card-body">
            <p class="card-text">Parts & accessories</p>
          </div>
        </a>
      </div>
    </aside>

    <article class="main col-md-9 col-sm-12 px-3 mt-3">
      <p>This is the main content area</p>
    </article>
  </div><!--END ROW-->
</section><!--END PAGE CONTENT-->

Bootstrap negative margin on rows

It's because the containers are meant to be used to contain any content, not just the grid rows and columns. Without padding on the container, content is forced up against the edge of the layout and doesn't align with the other content...

<div class="container px-0">
  <p>This content is aligned with the outer left edge and doesn't align with grid content.</p>
  <div class="row m-0">
      <div class="col-sm-4">
          grid content
      </div>
      <div class="col-sm-4">
          grid content
      </div>
      <div class="col-sm-4">
         grid content
      </div>
  </div>
</div>

https://codeply.com/go/23PqWB19ol

You can see several examples of container used for other than grid content the Bootstrap examples

Negative margins also work better for Responsive Design. Many people ask "why not just adjust the padding on the first and last columns?". This demo shows why

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

Nested Rows in Bootstrap 3 Fail to Respect The Grid