<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <h1>Boostrap Grids Demo</h1>
      <div class="row">
        <div class="col-sm-6 other">
          <h2>Nested</h2>
        </div>
        <div class="col-sm-6 other2">
          <h2>Columns</h2>
        </div>
      </div>
    </div>
    <div class="col-sm-6 other">
      <h1>Column 2</h1>
    </div>
  </div>
</div>

<p class="p">Demo by Syed Fazle Rahman. <a href="understanding-bootstrap-grid-system">See article</a>.</p>
body {
  padding-top: 40px;
}

.col-sm-6 {
  background: #999;
}

.other {
  background: #88B040;
}

.other2 {
  background: #777;
}

.p {
  text-align: center;
  padding-top: 120px;
}

.p a {
  text-decoration: underline;
  color: blue;
}
Run Pen

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.