Как можно показывать фильмы и телевизоры рядом друг с другом?

Я хочу отображать фильмы и ТВ бок о бок с помощью django_bootsrap. Фильмы слева, телевизоры справа. Но я не знаю, как отображать фильмы слева от телевизоров справа.

Я отображаю фильмы и телевизоры с помощью django's for. Ниже html код. Я не все еще CSS.

<h1>TV Score_by</h1>
<div class="row">

    {% for m in movie %}
        <div class="card" style="width: 18rem;">
            <img src="https://image.tmdb.org/t/p/w200{{ m.poster_path }}" class="card-img-top" alt="...">
            <div class="card-body">
            {% if not m.name %}
                <h5 class="card-title">{{ m.title }}</h5>
            {% else %}
                <h5 class="card-title">{{ m.name }}</h5>
            {% endif %}
            <p class="card-text">{{ m.overview }}</p>
            <a href="/movie/{{ m.id }}/" class="btn btn-primary">View Details</a>
            </div>
        </div>
    {% endfor %}
</div>
<h1>TV Score_by</h1>
<div class="row">
    {% for m in tv %}
        <div class="card" style="width: 18rem;">
            <img src="https://image.tmdb.org/t/p/w200{{ m.poster_path }}" class="card-img-top" alt="...">
            <div class="card-body">
            {% if not m.name %}
                <h5 class="card-title">{{ m.title }}</h5>
            {% else %}
                <h5 class="card-title">{{ m.name }}</h5>
            {% endif %}
            <p class="card-text">{{ m.overview }}</p>
            <a href="/tv/{{ m.id }}/" class="btn btn-primary">View Details</a>
            </div>
        </div>
    {% endfor %}
</div>

Используйте колонки.

<h1>TV Score_by</h1>
<div class="row">
<div class="col">
    {% for m in movie %}
        <div class="card" style="width: 18rem;">
            <img src="https://image.tmdb.org/t/p/w200{{ m.poster_path }}" class="card-img-top" alt="...">
            <div class="card-body">
            {% if not m.name %}
                <h5 class="card-title">{{ m.title }}</h5>
            {% else %}
                <h5 class="card-title">{{ m.name }}</h5>
            {% endif %}
            <p class="card-text">{{ m.overview }}</p>
            <a href="/movie/{{ m.id }}/" class="btn btn-primary">View Details</a>
            </div>
        </div>
    {% endfor %}
</div>
<h1>TV Score_by</h1>
<div class="col">
    {% for m in tv %}
        <div class="card" style="width: 18rem;">
            <img src="https://image.tmdb.org/t/p/w200{{ m.poster_path }}" class="card-img-top" alt="...">
            <div class="card-body">
            {% if not m.name %}
                <h5 class="card-title">{{ m.title }}</h5>
            {% else %}
                <h5 class="card-title">{{ m.name }}</h5>
            {% endif %}
            <p class="card-text">{{ m.overview }}</p>
            <a href="/tv/{{ m.id }}/" class="btn btn-primary">View Details</a>
            </div>
        </div>
    {% endfor %}
</div>
</div>
Вернуться на верх