0

I'm trying to display a list of cards in a Bootstrap grid using this code : 

<div class="container">
    <div class="row hidden-md-up">
        {% for shop in shops %}
            <div class="col-md-3">
                <div class="card">
                    {% if shop.image %}
                        <img src="{{shop.image.url}}" style="height:150px;" alt="Card image cap">
                    {% endif %}
                    <div class="card-body">
                        <p>
                            <b>{{shop.title}}</b><br>
                            <i class="material-icons">location_on</i> <b>{{shop.distance }} km away</b><br>
                            <a href="/like/{{shop.id}}"><i class="material-icons">thumb_up</i> Like</a><br>
                            <a href="/unlike/{{shop.id}}"><i class="material-icons">thumb_down</i> Unlike</a>
                         </p>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

I am using col-md-3 to display 4 cards per row ( 12 / 3 = 4)

This is what I get :

enter image description here

As you can see, there is space between each card, however, there is no space between each row.

Amine Messaoudi
  • 2,141
  • 2
  • 20
  • 37
  • 1
    You can use default bootstrap 4 class ```mt-5``` to your row like ```
    ```.. Here ```mt``` is ```margin-top``` and you can use the percentage as per you need ```mt-*``` here i have given it as ```5```..
     – Maniraj Murugan Dec 29 '18 at 15:56

1 Answers1

1

Maybe try do add style to your row container and make it margin-bottom="5px". Something like:

<div style="margin-bottom:5px">;
MrFisherman
  • 720
  • 1
  • 7
  • 27