Bootstrap Clearfix

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-4 metro-post" style="background: red;">
        Here is some text.Here is some text.Here is some text.Here is some text.Here is some text.Here is some text.Here is some text.Here is some text.Here is some text.Here is some text.
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 metro-post" style="background: yellow;">
        Here is some text.
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 metro-post" style="background: blue;">
        Here is some text.
    </div>
    <div class="clearfix"></div>
    <div class="col-xs-12 col-sm-12 col-md-4 metro-post" style="background: green;">
        Here is some text.
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 metro-post" style="background: gray;">
        Here is some text.
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 metro-post" style="background: magenta;">
        Here is some text.
    </div>
</div>

CSS

.metro-post {
        padding-bottom: 30px;
        overflow:hidden; 
        float: none;
        display: inline-block;
}