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.
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...
<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...
.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:
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:
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
How to Put Two Button in the Same Line Using Only HTML and CSS
How to Disable Viewport Zooming on Mobile Safari
Html/Javascript One Click Print (No Dialogs)
Parent Div Don't Wrap Child Div
Angular 4 Img Src Is Not Found
How to Remove the Default Arrow Icon from a Dropdown List (Select Element)
Inserting Form Data into MySQL Database When Using Nodejs Express
How to Make Sure This Stays Centered, Even When Zoomed Out or In
Center One and Right/Left Align Other Flexbox Element
Why Is There an Unexplainable Gap Between These Inline-Block Div Elements
How to Make a Div Fill a Remaining Horizontal Space
How to Select the Last Element With a Specific Class, Not Last Child Inside of Parent