I am developing a web site that will show news articles. On the front page each new article will be presented in a panel/card/box. I am using Bootstraps grid system to make my panels. Unfortunately the panels get stacked very strange if they have different height.
This image shows the issue more clearly:
Live demo: http://www.runarb.com/div/bootstack.html
How do I get the panels to stack nice like the first part in my image and not with all the wasted space like in the bottom part?
The quickest fix for your issue would be to actually use more rows.
Right now, you have the following structure :
<div class="row">
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
</div>
It might behave like a grid, but all you have here is only a single row.
Try just to modify it like so :
<div class="row">
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
</div>
<div class="row">
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
</div>
That should solve your issue.
Your preferred layout can be implemented by wrapping a container for every four div elements. Not relevant to the answer but there is no class col-xs-18 by default for Twitter Bootstrap.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="row">
<div class="container">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/500x250/EEE">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <a role="button" class="btn btn-default btn-xs pull-right"
href="#"><i class="glyphicon glyphicon-edit"></i></a> <a role="button" class="btn btn-info btn-xs" href="#">Button</a> <a role="button" class="btn btn-default btn-xs" href="#">Button</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/500x250/EEE">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <a role="button" class="btn btn-default btn-xs pull-right"
href="#"><i class="glyphicon glyphicon-edit"></i></a> <a role="button" class="btn btn-info btn-xs" href="#">Button</a> <a role="button" class="btn btn-default btn-xs" href="#">Button</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/500x250/EEE">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere,
soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <a role="button" class="btn btn-default btn-xs pull-right" href="#"><i class="glyphicon glyphicon-edit"></i></a> <a role="button"
class="btn btn-info btn-xs" href="#">Button</a> <a role="button" class="btn btn-default btn-xs" href="#">Button</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/500x250/EEE">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <a role="button" class="btn btn-default btn-xs pull-right"
href="#"><i class="glyphicon glyphicon-edit"></i></a> <a role="button" class="btn btn-info btn-xs" href="#">Button</a> <a role="button" class="btn btn-default btn-xs" href="#">Button</a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/500x250/EEE">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <a role="button" class="btn btn-default btn-xs pull-right"
href="#"><i class="glyphicon glyphicon-edit"></i></a> <a role="button" class="btn btn-info btn-xs" href="#">Button</a> <a role="button" class="btn btn-default btn-xs" href="#">Button</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/500x250/EEE">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <a role="button" class="btn btn-default btn-xs pull-right"
href="#"><i class="glyphicon glyphicon-edit"></i></a> <a role="button" class="btn btn-info btn-xs" href="#">Button</a> <a role="button" class="btn btn-default btn-xs" href="#">Button</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/500x250/EEE">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <a role="button" class="btn btn-default btn-xs pull-right"
href="#"><i class="glyphicon glyphicon-edit"></i></a> <a role="button" class="btn btn-info btn-xs" href="#">Button</a> <a role="button" class="btn btn-default btn-xs" href="#">Button</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/500x250/EEE">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <a role="button" class="btn btn-default btn-xs pull-right"
href="#"><i class="glyphicon glyphicon-edit"></i></a> <a role="button" class="btn btn-info btn-xs" href="#">Button</a> <a role="button" class="btn btn-default btn-xs" href="#">Button</a>
</div>
</div>
</div>
</div>
</div>
<!--/row-->