How to remove the space between one line and another of cards in Bootstrap4?

Question

How to remove the space between one line and another of cards in Bootstrap4?

Navigation

#1 by (1 votes)

0

Good evening.

I'm using Bootstrap4 in my Django project, but as in the following print, there's a space between the cards (marked with an x) because of its different size. I would like the images below to fit naturally (as in Pinterest, for example).

I'vebeentakingalookatthebasicBootstrapdocumentationbutIcouldnotfindasuitablesolutiontoeliminatethatspace.TocreatethispageI'mleadingmyselfbyexample Album . Here is the code I have now, which generates those printscreen:

{% for l in lores %}
                    <div class="col-md-3">
                    <div class="card mb-4 shadow-sm">
                          <div>
                            <a href="{% url 'lore_detail' pk=l.pk %}"><img class="card-img-top" src="{{l.image.url}}"></a>
                                    <div class="card-body">
                                        <p class="card-text">{{ l.title }}</p>
                                  </div>
                            </div>
                        </div>
                    </div>
                  {% endfor %}

This is from my Django, and it's working properly (sorry for the indentation, the copy here was weird.)

css twitter-bootstrap

asked by anonymous 12.10.2018 / 02:17

1 answer

How to fix this and other errors: Failed to convert from type [java.lang.String] to type [java.lang.Long] for value 'list'? What is the correct way to run a web application in eclipse?

score 1 · Accepted Answer

I found out by myself, I'm going to register. I hope it's useful.

The answer is in the documentation, in the section that talks about the Cards. It works much like the masonry they recommended in the comments. However, it is a solution using the bootstrap itself.

Just put my for between a div card columns :

<div class="card-columns">
    {% for l in lores %}
        ...
    {% endfor %}
</div>