Bootstrap Row With Columns of Different Height

Bootstrap row with columns of different height

This is a popular Bootstrap question, so I've updated and expanded the answer for Bootstrap 3, Bootstrap 4 and Bootstrap 5...

Bootstrap 5 (update 2021)

Bootstrap columns still use flexbox, but the card-columns previously used to create a Masonry like layout have been removed. For Bootstrap 5 the recommended method is to use the Masonry JS plugin:
Bootstrap 5 Masonry Example

Bootstrap 4 (update 2018)

All columns are equal height in Bootstrap 4 because it uses flexbox by default, so the "height issue" is not a problem. Additionally, Bootstrap 4 includes this type of multi-columns solution:
Bootstrap 4 Masonry cards Demo.

Bootstrap 3 (original answer -- pre flexbox)

The Bootstrap 3 "height problem" occurs because the columns use float:left. When a column is “floated” it’s taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box. So, when you have uneven column heights, the correct behavior is to stack them to the closest side.

Bootstrap uneven wrapping columns

Note: The options below are applicable for column wrapping scenarios where there are more than 12 col units in a single .row. For readers that don't understand why there would ever be more than 12 cols in a row, or think the solution is to "use separate rows" should read this first


There are a few ways to fix this.. (updated for 2018)

1 - The 'clearfix' approach (recommended by Bootstrap) like this (requires iteration every X columns). This will force a wrap every X number of columns...

Sample Image

<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="clearfix"></div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="clearfix"></div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>

Clearfix Demo (single tier)

Clearfix Demo (responsive tiers) - eg. col-sm-6 col-md-4 col-lg-3

There is also a CSS-only variation of the 'clearfix'

CSS-only clearfix with tables


**2 - Make the columns the same height (using flexbox):**

Since the issue is caused by the difference in height, you can make columns equal height across each row. Flexbox is the best way to do this, and is natively supported in Bootstrap 4...

Sample Image

.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}

Flexbox equal height Demo


**3 - Un-float the columns an use inline-block instead..**

Again, the height problem only occurs because the columns are floated. Another option is to set the columns to display:inline-block and float:none. This also provides more flexibility for vertical-alignment. However, with this solution there must be no HTML whitespace between columns, otherwise the inline-block elements have additional space and will wrap prematurely.

Demo of inline block fix


4 - CSS3 columns approach (Masonry/Pinterest like solution)..

This is not native to Bootstrap 3, but another approach using CSS multi-columns. One downside to this approach is the column order is top-to-bottom instead of left-to-right. Bootstrap 4 includes this type of
solution
:
Bootstrap 4 Masonry cards Demo.

Bootstrap 3 multi-columns Demo

5 - Masonry JavaScript/jQuery approach

Finally, you may want to use a plugin such as Isotope/Masonry:
Sample Image

Bootstrap Masonry Demo

Masonry Demo 2


More on Bootstrap Variable Height Columns


Columns of Different Height in Bootstrap

Bootstrap works based on columns inside of rows. That means it always works horizontally, then vertically. To achieve the desired layout, what you'll want to do is consider the page to be comprised of two columns; left and right. The left-most column contains three elements that all take up all of the remaining with (col-12), while the right-most column contains a single element with three times as much height.

Note that you'll also have to account for any margin / padding on the right-hand column; in the following, I use a margin of 5px (mostly just to show the background for each element), which means that I need to add 20px of height for the right-hand-column (covering the outer 10px plus the two inner 5px gaps):

.element {  height: 100px;  background: red;  margin: 5px;  padding: 10px;}
.right .element { height: 320px;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="row"> <div class="col-6"> <div class="row"> <div class="col-12"> <div class="element">Top-left</div> </div> </div> <div class="row"> <div class="col-12"> <div class="element">Mid-left</div> </div> </div> <div class="row"> <div class="col-12"> <div class="element">Bottom-left</div> </div> </div> </div> <div class="col-6 right"> <div class="element">Right</div> </div></div>

Bootstrap - I don't want columns to have the same height

Bootstrap 5 (update 2021)

Bootstrap 5 is still flexbox based so columns in a row are equal height. Therefore d-block can still be used to "disable" flexbox and use float-start to float columns.

Bootstrap 4 (original answer)

Yes, you can use d-block on the row, and float-left on the columns to make it work the Bootstrap 3.x way with floated columns instead of flexbox..

<div class="row d-block">
<div class="col-lg-3 float-left">
..
</div>
<div class="col-lg-9 float-left">
..
</div>
</div>

https://codeply.com/go/Ghhq1NbMDG


Related:

Bootstrap 4 Columns float style like Bootstrap 3 is it possible?

Empty vertical space between columns in Bootstrap 4

How can I make Bootstrap columns all the same height?

LATEST SOLUTION (2022)

Solution 4 using Bootstrap 4 or 5

Bootstrap 4 and 5 use Flexbox by default, so there is no need for extra CSS.

Demo

<div class="container">
<div class="row ">
<div class="col-md-4" style="background-color: red">
some content
</div>
<div class="col-md-4" style="background-color: yellow">
catz
<img width="100" height="100" src="https://placekitten.com/100/100/">
</div>
<div class="col-md-4" style="background-color: green">
some more content
</div>
</div>
</div>

Solution 1 using negative margins (doesn't break responsiveness)

Demo

.row{
overflow: hidden;
}

[class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}

Solution 2 using table

Demo

.row {
display: table;
}

[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}

Solution 3 using flex added August 2015. Comments posted before this don't apply to this solution.

Demo

.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}

Bootstrap fluid row columns with different height

The problem

The problem is that all bootstrap columns try to float left.

From MDN on floats:

when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box or another floated element.

So when you have uneven heighted elements, the correct behavior is to stack them to the side.

Luckily, there are a lot of way to correct this to the anticipated behavior:

screenshot



Using CSS Clear property

From MDN on Clear:

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them

For this exact structure, you can apply clear to every other row using the nth-child selector:

.col-xs-6:nth-child(odd) {
clear: both;
}

Note: The nth-child selector won't work in IE8

Demo in jsFiddle / Stack Snippets:

.col-xs-6:nth-child(odd) {
clear: left;
}
.col-xs-6 {
border: 1px solid grey;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container">
<div class="row">
<div class="col-xs-6">
Two<br/>
Lines
</div>
<div class="col-xs-6">
Two<br/>
Lines
</div>
<div class="col-xs-6 label-warning">
Three<br/>
Lines<br/>
Jump
</div>
<div class="col-xs-6">
Two<br/>
Lines
</div>
<div class="col-xs-6">
Two<br/>
Lines
</div>
<div class="col-xs-6">
Two<br/>
Lines
</div>
</div>
</div>

bootstrap different height ratio expect 1:1 for columns when small devices view

col-sm-8 and col-sm-4 specifies the width of the columns, not their heights. If you want the columns' heights to be in a specific ratio, you will need to adjust that by explicity defining their heights in a css @media query like this:

#my-container {
height: 100vh;
}

@media(max-width: 600px) {
#my-container .col-sm-8 {
height: 66.66%;
}
#my-container .col-sm-4 {
height: 33.33%;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<div id="my-container" class="container-fluid p-0 m-0">
<div class="row p-0 m-0 h-100 text-white">
<div class="col-sm-8 bg-success">COL 1</div>
<div class="col-sm-4 bg-danger">COL 2</div>
</div>
</div>

Bootstrap Fluid grid system with different height

The only way to do this with Bootstrap "out-of-the-box" would be to use 4 columns and stack the items in each. This isn't ideal for dynamic content when you don't know how many items you'll have in each column. Also the items order top-to-bottom, and not left-to-right.

<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<!--item1-->
<!--item2-->
<!--item3-->
<!--item4-->
</div>
<div class="col-md-3">
<!--item5-->
<!--item6-->
<!--item7-->
<!--item8-->
</div>
<div class="col-md-3">
<!--item-->
<!--item-->
<!--item-->
</div>
<div class="col-md-3">
<!--item-->
<!--item-->
<!--item-->
<!--item-->
<!--item-->
</div>
</div>
</div>


Otherwise, you have to use a jQuery plugin like Masonry or Isotope, or using CSS3 multi-columns.

Jquery plugin method

Bootstrap Masonry Demo

Bootstrap Masonry Demo 2

CSS3 columns method (Masonry-like CSS solution)..

This is not native to Bootstrap 3, but another approach using CSS multi-columns. One downside to this approach is the column order is top-to-bottom instead of left-to-right.

CSS3 multi-columns Demo

There is also more detailed info in this answer to a similar question.

Update 2018

Bootstrap 4 includes a Masonry-like solution using CSS3 multi-columns:
Masonry cards Demo

Different height and position for col in bootstrap

You are placing 3 images per div.row, which results in this layout:

As you can see, the div.row elements are stacked, and each div.row is as high as its highest image, creating gaps for the remaining space in each row.

In summary, you have divided the grid first by rows, and then by columns.

What you need is a masonry grid. As opposite to your approach, this grid is divided first by columns, and then by rows or images.

The main concept behind a masonry grid resides in an approach like this:


<!-- Left column -->
<div class="col-md-4">
<img src="" alt="Top image">
<img src="" alt="Middle image">
<img src="" alt="Bottom image">
</div>

<!-- Center column -->
<div class="col-md-4">
<img src="" alt="Top image">
<img src="" alt="Middle image">
<img src="" alt="Bottom image">
</div>

<!-- Right column -->
<div class="col-md-4">
<img src="" alt="Top image">
<img src="" alt="Middle image">
<img src="" alt="Bottom image">
</div>


Related Topics



Leave a reply



Submit