Matrix entry causing last bootstrap column to be shunted down

Question

I have a Matrix field which has one block type (1 asset field - I'm using a Matrix field as I'll be adding text fields later on to the same block). On the front end I am using Bootstrap's grid system to output the images in columns.

{% for block in entry.blockName %}
    <div class="col-md-3">
    {% set image = block.image.first() %}
    {% if image %}
        <img src="{{ image.getUrl }}">
    {% endif %}
    </div>
 {% endblock %}

For some reason when I test it the last column on the first row gets shunted down as shown in the image.

This only happens on the first row of items and if I test it out of the matrix field with placeholder images and static HTML it works fine. The CSS isn't changed for the last item so I can't seem to see what's causing this.

Anyone have any ideas?

Answer 1

This issue won't be related to the Matrix field or the twig tags outputting it - check the CSS thats being applied. Are you wrapping your columns in a div with a class of .row?

UPDATE: test by creating a new template and set it up with the following (replace the first line with the entry you're using:

{% set entry = craft.entries.section( 'homepage' ).first() %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" media="screen">

<div class="container">
    <div class="grid">
        {% for block in entry.blockName %}
          <div class="col-md-3">
            {% set image = block.image.first() %}
            {% if image %}
              <img src="{{ image.getUrl }}">
            {% endif %}
          </div>
        </div>
        {% endfor %}
    </div>
</div>

Answer 2

White space issue? Seen something similar happening with lists.