Bootstrap columns float issue. DIVS need to be same height
You can also try using display:flex;
to add a uniform height to divs in a row as shown in this bootply: http://www.bootply.com/126437
HTML:
<div class="container">
<div class="row row-flex row-flex-wrap">
<div class="col-md-4">
<div class="article flex-col">
content goes here
</div>
</div>
<div class="col-md-4">
<div class="article flex-col">
content goes here
</div>
</div>
<div class="col-md-4">
<div class="article flex-col">
content goes here
</div>
</div>
</div>
</div>
CSS:
.row-flex, .row-flex > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 1 auto;
}
.row-flex-wrap {
-webkit-flex-flow: row wrap;
align-content: flex-start;
flex:0;
}
.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
margin:-.2px; /* hack adjust for wrapping */
}
.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
width:100%;
}
.flex-col {
display: flex;
display: -webkit-flex;
flex: 1 100%;
flex-flow: column nowrap;
}
Just add a min-height
to your column divs to maintain a uniformed layout like this:
HTML:
<div class="row">
<div class="col-md-4">
<div class="article">
content goes here
</div>
</div>
<div class="col-md-4">
<div class="article">
content goes here
</div>
</div>
<div class="col-md-4">
<div class="article">
content goes here
</div>
</div>
</div>
CSS:
.col-md-4 {
min-height: 200px; /* change to the height value of the longest column in the row */
}
Using grid nesting:
<div class='row'>
<div class='col-md-4'>
</div>
<div class='col-md-4'>
<div class='col-md-4'>
<div class='row'>
<div class='col-md-12'>
</div>
</div>
<div class='row'>
<div class='col-md-12'>
</div>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-4'>
</div>
<div class='col-md-4'>
</div>
<div class='col-md-4'>
</div>
</div
How can I force a clear row to be started after every 3 items to avoid this
Add a class and try .your-class:nth-child(3n) {clear: left;}