Как отобразить данные django в несколько рядов

Итак, я делаю сайт, используя Django, HTML/CSS и Bootstrap 5, для отображения книг, которые есть у пользователя. В настоящее время все книги отображаются в одном ряду, но я бы хотел, чтобы они были разделены на несколько рядов по три в каждом. Как мне это сделать?

Вот модель, которую я использую для книги:

lass Book(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE, blank=True, null=True)

    isbn = models.CharField('ISBN', max_length=16, unique=True,
                            help_text='10 Character <a href="https://www.isbn-international.org/content/what-isbn">ISBN number</a>')
    
    title = models.CharField(max_length=10, null=True, blank=True)

    image_src = models.CharField(max_length=400, null=True, blank=True)

    author = models.CharField(max_length=50, null=True, blank=True)

    desc = models.CharField(max_length=1000, null=True, blank=True)

    LOAN_STATUS = (
        ('AVAILABLE', 'Available'),
        ('ON LOAN', 'On Loan'),
        ('ON HOLD', 'On Hold'),
    )

    GENRES = {
        ('REALISTIC FICTION', 'Realistic Fiction'),
        ('HISTORICAL FICTION', 'Historical Fiction'),
        ('SCIENCE FICTION', 'Science Fiction'),
        ('ADVENTURE', 'Adventure'),
        ('FANTASY', 'Fantasy'),
        ('HORROR', 'Horror'),
        ('MYSTERY', 'Mystery'),
        ('NON-FICTION', 'Nonfiction'),
    }

    genre = models.CharField(
        max_length=30,
        choices=GENRES,
        blank=True,
        help_text='Book Genre',
    )

    status = models.CharField(
        max_length=30,
        choices=LOAN_STATUS,
        blank=True,
        default='Available',
        help_text='Book Availabiliy',
    )

    def __str__(self):
        #String representing model object
        return self.title

А это HTML для страницы списка книг:

{% extends "base_generic.html" %}

{% block content %}
<div class="d-flex justify-content-around pt-4">
{% for book in object_list %}
    <div><a href="{% url 'book_detail' book.pk %}">
        <img src={{book.image_src}}>
        <p class="text-center"><strong>{{ book.title }}</strong></p>
    </div></a>
{% empty %}
    <p>No books in your catalog.</p>
{% endfor %}
</div>

{% endblock %}

Большое спасибо! Я новичок в веб-разработке, так что извините, если это простое исправление :)

Вы должны отредактировать свой шаблон следующим образом, если вы используете bootstrap для стилизации.

{% extends "base_generic.html" %}
{% block content %}
<div class="container row pt-4">
{% for book in object_list %}
   <div class='col-12 col-md-3 col-lg-3' >
    <a href="{% url 'book_detail' book.pk %}">
       <img src={{book.image_src}}>
       <p class="text-center"><strong>{{ book.title }}</strong></p>
   </a>
   </div>
{% empty %}
<p>No books in your catalog.</p>
{% endfor %}
</div>
{% endblock %}
Вернуться на верх