The Dilemma
There exists a fundamental issue with the default left floating behavior of bootstrap columns.
Per MDN's documentation on floats:
Once an element is floated, it no longer adheres to the regular document flow. Instead, it shifts either to the left or right border until it encounters its containing box or another floated element.
Hence, when confronted with elements of varying heights, the anticipated outcome would involve aligning them next to each other.
Fortunately, multiple solutions are available to correct this discrepancy and attain the intended layout:
Employing CSS Clear Property
As outlined in MDN's detailed explanation of Clear:
The clear CSS property dictates whether an element can be positioned adjacent to preceding floated elements or should shift below them (clearing).
To specifically tackle this structural concern, you can utilize the clear property for every alternate row by leveraging the nth-child selector:
.col-xs-6:nth-child(odd) {
clear: both;
}
Note: The nth-child selector lacks IE8 support
Check out the Demo on 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>
Utilizing .clearfix
The recommended approach within Bootstrap involves utilizing the clearfix class which applies specific styles as indicated in Bootstrap's official guidelines:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
Note: By combining this with responsive utility classes such as .visible-*-*, .hidden-*, you can selectively target different screen sizes
View Demo in jsFiddle / Stack Snippets:
.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="clearfix"></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="clearfix"></div>
<div class="col-xs-6">
Two<br/>
Lines
</div>
<div class="col-xs-6">
Two<br/>
Lines
</div>
</div>
</div>
Using .row
An alternative solution involves enclosing each pair of columns in a new row. While less adaptable, this method yields semantically meaningful markup if each set of items constitutes a logical group.
Demo in jsFiddle / Stack Snippets:
.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>
<div class="row">
<div class="col-xs-6 label-warning">
Three<br/>
Lines<br/>
Jump
</div>
<div class="col-xs-6">
Two<br/>
Lines
</div>
</div>
<div class="row">
<div class="col-xs-6">
Two<br/>
Lines
</div>
<div class="col-xs-6">
Two<br/>
Lines
</div>
</div>
</div>
Rectifying Height Discrepancy
In some scenarios, maintaining uniform height across all elements could aid in upholding visual consistency. This strategy works effectively with similar content in each column, fostering a cohesive grid layout.
.col-xs-6 {
height: 7rem;
}
View Demo in jsFiddle / Stack Snippets:
.col-xs-6 {
height: 7rem;
}
.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/>
line
</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>