Remove space between divs vertically [Bootsrap 3] - php

Question

I need to remove space between some div and div below that div. Space created if some div is higer then other in column.
Here is example:
http://www.bootply.com/Hc2aO5o4bG
basicly I need to remove space between 1. and 4. post and 2. and 5. and for each other posts that have space below them.
Also post should be in this order:
1. 2. 3.
4. 5. 6.
7. .....
Here is what I trying to accomplish:

Answer 1

Give a clear before 4:
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4>IQ test [PHP & MySQL]</h4>
<p>
</p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4>IQ test [PHP & MySQL]</h4>
<p>
</p><p>We have 4 cssssssssssssssssssssssssssssssssssss
ssssssssssssssssssssssssssssssssssssssssolumns: iq_id, iq_pit
anje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4>IQ test [PHP & MySQL]</h4>
<p>
</p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
<div class="clear"></div>
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4>IQ test [PHP & MySQL]</h4>
<p>
</p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4>IQ test [PHP & MySQL]</h4>
<p>
</p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4>IQ test [PHP & MySQL]</h4>
<p>
</p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
And give this CSS
.clear {
clear: both;
}
Technically, you must give the .clear every three rows, in your case!
Preview: http://www.bootply.com/uC3qzah3f9
For a dynamic solution:
/* Start Praveen's Reset for Fiddle ;) */
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/* End Praveen's Reset for Fiddle ;) */
.posts {overflow: hidden;}
.posts .post {border: 1px solid #999; padding: 10px; text-align: center; width: 32%; margin: 0.5%; float: left;}
.posts .post:nth-child(3n+4):before {clear: both; display: block; content: " ";}
<div class="posts">
<div class="post">Post #1</div>
<div class="post">Post #2</div>
<div class="post">Post #3</div>
<div class="post">Post #4</div>
<div class="post">Post #5</div>
<div class="post">Post #6</div>
<div class="post">Post #7</div>
<div class="post">Post #8</div>
<div class="post">Post #9</div>
<div class="post">Post #10</div>
<div class="post">Post #11</div>
<div class="post">Post #12</div>
<div class="post">Post #13</div>
<div class="post">Post #14</div>
<div class="post">Post #15</div>
</div>
In the above case, you need to manually change the CSS: (3n + 4). I gave + 4 to not include the 1st child.

Answer 2

You should be wrapping your rows with <div class="row"></div>: http://getbootstrap.com/css/#grid
You can also set a min-height property to something like 141px so that the borders line up.