Changing the size of bootstrap cards in a Django project?

I’m working on a simple Django project with bootstrap. I have a set of cards being displayed on a page, and the cards are showing just fine (Don’t mind the place holder images).()

I’ve been reading the bootstrap docs about cards, but since I have less knowledge of CSS than I’d like, I can’t figure out how to simply change the size of the cards so they are larger and stacked in rows instead of one column.

This is my HTML template for this page. It just uses a for-loop to go through my projects and make a card for each. You can see I have the title and text worked out, and the URL to ‘See Details’.

{% extends "base.html" %}
{% load static %}
{% block page_content %}
<h1>Projects</h1>
<div class="row">
{% for project in projects %}
    <div class="col-md-4">
        <div class="card mb-2">
            <img class="card-img-top" src="{% static project.image %}">
            <div class="card-body">
                <h5 class="card-title">{{ project.title }}</h5>
                <p class="card-text">{{ project.description }}</p>
                <a href="{% url 'project_detail' project.pk %}"
                   class="btn btn-primary">
                    See Details
                </a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}

The Base.html is just linking to the bootstrap and all the html for the top of the page. Hopefully the fix is a really simple addition to the template, but I haven’t had much luck finding info.

Answer

You can use row to create grid row for each card object, and remove the col div.

{% extends "base.html" %}
{% load static %}
{% block page_content %}
<h1>Projects</h1>
{% for project in projects %}
    <div class="row">
        <div class="card mb-2">
            <img class="card-img-top" src="{% static project.image %}">
            <div class="card-body">
                <h5 class="card-title">{{ project.title }}</h5>
                <p class="card-text">{{ project.description }}</p>
                <a href="{% url 'project_detail' project.pk %}"
                   class="btn btn-primary">
                    See Details
                </a>
            </div>
        </div>
    </div>
{% endfor %}
{% endblock %}