Bootstrap 3 fluid grid layout issues? - css

Question

Im using Bootstrap 3 to layout my website with fluid grid, but the boxes in the grid don't line up in a row.
You can see:
When a box is taller than another, the grid is not left aligned.
How can I fix it with some hack ? Thank for help !
Note : the height of box is auto wrap contents.
My html code
<div class="row">
<?php foreach($contens as $content){?>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="contents-block">
<div class="image"><img href="<?php echo $content['image'];?>" />
</div>
................ some code .............
</div>
</div>
<?php } ?>
</div>

Answer 1

I'm not sure exactly what you're trying to accomplish, but the issue is caused because the content of the columns varies in height. There are 3 overall approaches to fix grid alignment / height issues..
1. A CSS only approach (using CSS3 column width) like this..
http://bootply.com/85737
2. A 'clearfix' approach like this (requires iteration every x columns). This is the approach recommended by Bootstrap known as "responsive resets"..
http://bootply.com/89910 (there is also a CSS-only variation to this approach)
3. Finally you may want to use the Isotope/Masonry plugin. Here is a working example that uses Isotope + Bootstrap..
http://bootply.com/61482
Update 2017
Another option is to 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
Bootstrap 4 uses flexbox so columns in each row are the same height by default (without the extra CSS).
More on Bootstrap Variable Height Columns

Answer 2

Enforce a height for each <div> column.
I would give your columns a class name:
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 outer">
...
</div>
And then do something like this:
.outer {
height: 200px /* Or whatever the height really is */
}
Your columns are being laid out weird because of the varying heights of the boxes. Enforcing a height of the container element will fix that.
The best part is, this doesn't require you to add random <div>'s that don't have anything to do with the content.
EDIT:
You could also enforce the height only when you're using the 'sm' breakpoints and above.
This would ensure that everything lines up when columns are being used, and that there won't be large gaps in between each one when they're full width (i.e. col-xs-12).
#media (min-width: 768px) {
.outer {
height: 200px /* Or whatever */
}
}

Answer 3

I had a similar problem. I fixed with this script pretty quickly and pain free:
<script>
$.getScript('//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js',function(){
$('#container').isotope({
itemSelector : '.items',
layoutMode : 'fitRows'
});
});
</script>
in your case, you will need to add a container ID e.g. '#container' and add the class to each item e.g. '.item'

Answer 4

Here's a super simple jQuery solution to get all elements still aligned.
I solved this issue by getting the column with highest height and setting this height to every other columns. Try the snippet below.
setTimeout(function(){
var maxHeight = 0;
$('.item').each(function() {if ($(this).height() > maxHeight){maxHeight = $(this).height()}});
$('.item').each(function() {$(this).height(maxHeight)});
}, 1000);
.item {
border: 1px solid black;
}
.big {
height:50px;
background-color:fuchsia;
}
.normal {
height:40px;
background-color:aqua;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4 item big">I am big</div>
<div class="col-xs-4 item normal">I am normal</div>
<div class="col-xs-4 item normal">I am normal</div>
<div class="col-xs-4 item normal">I am normal</div>
<div class="col-xs-4 item normal">I am normal</div>
<div class="col-xs-4 item normal">I am normal</div>
</div>

Answer 5

I think you need to use clearfix. just put the classclearfix on your parent element (in your case, row, I think) and put this in your css:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

Answer 6

I agree with Skelly in that a masonry plugin is probably the way to go, but for a quick easy fix you can just make a new row every time you want something left aligned - its a quick and dirty hack and can have some issues on smaller viewports.

Answer 7

My solution:
I worked with the visible- classes of bootstrap 3
<div class="row">
<?php
$indexLg = 1;
$indexSm = 1;
foreach($contens as $content) {?>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="contents-block">
<div class="image"><img href="<?php echo $content['image'];?>" />
</div>
</div>
</div>
<?php
if($indexLg%4 == 0) {
$indexLg = 1;
?>
<div class="clearfix visible-lg visible-md"></div>
<?php
}
if($indexSm%2 == 0) {
$indexSm = 1;
?>
<div class="clearfix visible-sm"></div>
<?php
}
?>
<div class="clearfix visible-xs"></div>
<?php
}
} ?>