Aligned Nested Grids Bootstrap 3

by Chris Caulfield

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-8">
      <div class="row">
        <div class="col-xs-12 dark image">
          <img src="https://s20.postimg.io/kdweqmuzx/postimage.gif" width="100%" />
        </div>
        <div class="col-xs-12 col-md-6 dark content">
          <h2>LEFT BOX</h2>
          <p>Some Text</p>
          <p>Some Text</p>
          <p>Some Text</p>
          <p>Some Text</p>
        </div>
        <div class="col-xs-12 col-md-6 light content">
          <h2>RIGHT BOX</h2>
          <p>Some Text</p>
          <p>Some Text</p>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-md-4 dark">
      <div class="row">
        <div class="col-xs-8 col-md-12 dark content">
          <h2>RIGHT PANEL</h2>
          <p>Some Text</p>
          <p>Some Text</p>
          <p>Some Text</p>
          <p>Some Text</p>
          <p>Some Text</p>
          <p>Some Text</p>
          <p>Some Text</p>
          <p>Some Text</p>
        </div>
        <div class="col-xs-4 col-md-12 dark image">
          <img src="https://s20.postimg.io/5cu49dca5/postimage.gif" width="100%" class="bottom" />
        </div>
      </div>
    </div>
  </div>
  <div class="row dark">
    <div class="col-sm-12 dark content">
      <h2>Bottom Bar</h2>
    </div>
  </div>
</div>

CSS

.container {
  overflow: hidden;
}

.dark {
  background: #444;
  color: #DDD;
}

.light {
  background: #DDD;
  color: #222;
}

.content {
  padding: 30px;
  margin: 0;
  margin-bottom: -999px;
  padding-bottom: 999px;
  overflow: hidden;
}

.image {
  padding: 0;
  margin: 0;
}