<p>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 <code>.row</code>?</p>

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

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

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

CC BY-SA 3.0
2016-05-19T13:14:07.560Z
Yep, they're wrapped. I have to agree that I couldn't see any reason for the Matrix to cause this but it is odd that when I remove it from the twig tags and copy them in manually they work. Meaning the CSS and HTML markup that's being outputted is the same in both ways but when it's via the tags I get the spacing.
JRW
CC BY-SA 3.0
2016-05-19T13:32:27.657Z
See suggestion to test in the edit to my answer - if you don't see the same behaviour then you know it's something else on your page or CSS that's affecting it.
Luke Pearce
CC BY-SA 3.0
2016-05-19T13:44:38.723Z
Thanks for your help, I've gave it a go and it was the same result. I'm going to try and replicate it in a different scenario and see if I can find the cause
JRW
CC BY-SA 3.0
2016-05-19T13:11:00.403Z
2016-05-19T13:31:33.240Z
2016-05-19T13:31:33.240Z
Luke Pearce
<p>White space issue? Seen something similar happening with lists.</p>

CC BY-SA 3.0
2016-05-19T12:53:57.587Z
2016-05-19T12:53:57.587Z
John Macpherson
<p>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.</p>

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

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

<p><a href="https://i.sstatic.net/v9YKX.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/v9YKX.png" alt="enter image description here"></a></p>

<p>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.</p>

<p>Anyone have any ideas?</p>

<matrix><blocks><bootstrap-craft>
Matrix entry causing last bootstrap column to be shunted down
# Matrix entry causing last bootstrap column to be shunted down

(Asked by: username_0 on 2016-05-19)

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 %}
    
    {% set image = block.image.first() %}
    {% if image %}
        
    {% endif %}
    
 {% 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?

**Tags:** matrix, blocks, bootstrap-craft

---

## 2 answers

### Answer by username_1 on 2016-05-19. Score: 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() %}



    
        {% for block in entry.blockName %}
          
            {% set image = block.image.first() %}
            {% if image %}
              
            {% endif %}
          
        
        {% endfor %}

> **Comments:**
> **username_0**: Yep, they're wrapped. I have to agree that I couldn't see any reason for the Matrix to cause this but it is odd that when I remove it from the twig tags and copy them in manually they work. Meaning the CSS and HTML markup that's being outputted is the same in both ways but when it's via the tags I get the spacing.  
> **username_1**: See suggestion to test in the edit to my answer - if you don't see the same behaviour then you know it's something else on your page or CSS that's affecting it.  
> **username_0**: Thanks for your help, I've gave it a go and it was the same result. I'm going to try and replicate it in a different scenario and see if I can find the cause  

---

### Answer by username_2 on 2016-05-19. Score: 0

White space issue? Seen something similar happening with lists.


---

