Bootstrap 3 two columns full height

Building mobile-ready layouts

Ensuring the responsiveness of your columns is a vital consideration for users experiencing your layout in all its device glory. And with Bootstrap 3, you have an ally in the form of the grid system. Consider integrating media queries to manage the behavior of these full-height columns at varying breakpoints, like so:

@media (max-width: 991px) {
  .full-height {
    height: auto; /* Freedom for the mobile! */
  }
}


This keeps smaller screens happy by allowing columns to revert to their natural height and preserve the content layout experience.

Using the table display method

Bootstrap 3 may not come with flex, but fear not. If older browsers, like IE8+, are a concern, you could always turn to the trusty old display: table; method.

.container-table { display: table; width: 100%; height: 100%; /* Foundation for our table-structure kingdom */ }
.row-table { display: table-row; /* Royal rows of the kingdom */ }
.col-table { display: table-cell; vertical-align: top; /* Elite column cells of the kingdom */ }


This is how you call forth these classes in your HTML:

<div class="container-fluid container-table">
  <div class="row row-table full-height">
    <div class="col-md-6 col-table" style="background-color: #f8f9fa;">
      <!-- Left column table cell content (the spoon to your fork) -->
    </div>
    <div class="col-md-6 col-table" style="background-color: #e9ecef;">
      <!-- Right column table cell content (the fork to your spoon) -->
    </div>
  </div>
</div>


Flexbox as an alternate road

If you're not cemented into Bootstrap 3, you might find joy in Bootstrap 4's flexbox model for a smoother drive on the full-height columns road. But fear not, we could still leverage the "Flexbox Freeway" in Bootstrap 3 with a sprinkling of modern CSS:

.row-flex { 
  display: flex; /* Show me the flex, baby! */
  flex-wrap: wrap; /* Be flexible in a wrap, you're not a tortilla */
}
.col-flex { 
  flex: 1; /* "One Flex To Rule Them All" - Lord of the Flexes */
}


And here's how you breathe life into these classes:

<div class="container-fluid">
  <div class="row row-flex">
    <div class="col-md-6 col-flex" style="background-color: #f8f9fa;">
      <!-- Flex column content: flexible yet sturdy -->
    </div>
    <div class="col-md-6 col-flex" style="background-color: #e9ecef;">
      <!-- Flex column content: flexible yet sturdy -->
    </div>
  </div>
</div>


Customizing column proportions

Need to adjust the proportion of the columns? No problem! Implement a 1:3 ratio for medium screens and higher. HTML and CSS to the rescue:

@media (min-width: 992px) {
  .col-md-4 { height: 100%; /* This one decided to take up 1/3 of the room */ }
  .col-md-12 { height: 100%; /* And this one's a hog, grabbing all the rest! */ }
}


Markup magic to follow up:

<div class="container-fluid">
  <div class="row full-height">
    <div class="col-md-4" style="background-color: #f8f9fa;">
      <!-- Smaller column content: meeting your demands of precisely a third! -->
    </div>
    <div class="col-md-8" style="background-color: #e9ecef;">
      <!-- Larger column content: filling up those leftover spaces. -->
    </div>
  </div>
</div>


Unveiling the demos

Theory is good, but practice is the key. To better understand these magical tricks in Bootstrap 3, take a stroll through interactive demos on CodePen or Bootply. Witness how these columns behave and adapt to different screen sizes.