Search code examples
htmlcssbootstrap-4layoutbootstrap-5

How do I fix the row, col layout in bootstrap

I was making a layout to view all of the bootstrap cards in a nice clean layout, but this is quite bugging me, I dont know why this is happening. It looks all fine with all of the column filled, and even if the column only has 1 card it looks all fine but if it reaches 2 cards, its starts to look weird like this: (Notice the diffrence between the 3rd and 2nd image)

enter image description here

enter image description here

enter image description here

I don't like how the layout looks when there are two cards in the column, any idea on how to fix it? Heres my current code: (It is in Jinja2 but it doesn't matter too much, I am just looping over all the posts, and displaying content from the backend to the frontend)

<div class="container" style="margin-top: 100px;">
    <div class="row">
        {% for clip in clips %}
        <div class="col">
            <div class="card" style="width: 32rem;">
                <div class="card-body">
                    <h5 class="card-title">{{ clip.title }}</h5>
                    <h6 class="card-subtitle mb-2 text-muted">
                        <img src="{{ url_for('static', filename='images/profile-pictures/' ~ clip.user.picture) }}", height="32" width="32" style="border-radius: 50%;">
                        {{ clip.user.username }}
                    </h6>
                    <p class="card-text" style="margin-top: 15px;">
                        {{ clip.description }}
                    </p>

                    {% if clip.clip_id % 2 == 0 %}
                    <a href="#"><button class="btn-hover color-2">PLAY</button></a>
                    {% else %}
                    <a href="#"><button class="btn-hover color-1">PLAY</button></a>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

& The CSS:

.card-body {
  padding: 25px;
}

.card {
  margin-bottom: 50px;
}
Solution

  • I guess you want a maxmium of 3 cards in a row? Try use col-4 instead of col.

    Source: https://getbootstrap.com/docs/4.6/layout/grid/#auto-layout-columns