Twig help - looping through all page images

Hi
I’ve got 4 images attached to my page and I would like to loop over these in twig. However I have 4 rows of content and would like to display 1 image in each row. So something like

{% for image in page.media.images %}
<div class="col-md-3" style="background-image:url('{{ image[0].url }}');">
blah blah
<div class="col-md-3" style="background-image:url('{{ image[1].url }}');">
blah blah
<div class="col-md-3" style="background-image:url('{{ image[2].url }}');">
blah blah
<div class="col-md-3" style="background-image:url('{{ image[3].url }}');">
blah blah

however I can’t seem to see any way of iterating over each image like that.

The only way I can find to loop over images is in a list type scenario

    {% for key, user in users %}
        <li>{{ key }}: {{ user.username|e }}</li>
{% endfor %}

Is this possible?

You can certainly get at the first, second, third item etc with the |slice filter (https://twig.sensiolabs.org/doc/2.x/filters/slice.html):

For example:

<div class="col-md-3" style="background-image:url('{{ page.media.images|slice(0,1) }}');">
First paragraph
</div>
<div class="col-md-3" style="background-image:url('{{ page.media.images|slice(1,1) }}');">
Second paragraph
</div>
<div class="col-md-3" style="background-image:url('{{ page.media.images|slice(2,1) }}');">
Third paragraph
</div>
<div class="col-md-3" style="background-image:url('{{ page.media.images|slice(3,1) }}');">
Fourth paragraph
</div>