Bootstrap Grid System

Question

The project I'm working on has a blog, makes use of bootstrap grid system. 3 blog posts in a row, Code :

<div class="container">

    <div class="row">

    <a href="/blog"><h4>News</h4></a>

      <% blog.forEach(function(blog) { %> // Creates a blog and adds a title, image and body to it
      <div class="col-md-4 col-sm-6">

        <div class="thumbnail">
            <img src="<%= blog.image %>">  //Adds image
        </div>

        <div class="caption">
            <a href="#"><h4><%= blog.title %></h4></a>  //Adds image
        </div>

        <span><%= blog.created %></span>

        <div class="relative">
          <p><%- blog.body %></p>  //Adds body content
          <div class="absolute"></div>
        </div>
        <a href="/blog/<%= blog._id %>">Read More</a>

        </div>

        <% }) %>

    </div>

This is how it currently looks :

As described in the image, the 4th item gets created and takes the middle space (which should not happen). It should take the previous (available) space. I've tried "float" property, but shouldn't it automatically be done that way(by Bootstrap)? Any work-around?

Answer 1

This might be due to you row not having only columns underneath it. You have an tag before you columns which may interfere. Try moving it outside the div.row.

<div class="container">
    <a href="/blog"><h4>News</h4></a>

    <div class="row">
      <% blog.forEach(function(blog) { %> // Creates a blog and adds a title, image and body to it
      <div class="col-md-4 col-sm-6">

        <!-- Rest of the column -->

        </div>

    <% }) %>

    </div>
</div>

Also if the first column is higher than the rest, it moves the fourth column to the middle, so make sure your div.col-* are the same height