Is it possible to showcase Movies and TV shows side by side using django_bootstrap? Specifically, I want the Movies on the left side and the TVs on the right side. However, I'm unsure of how to achieve this layout.
I currently have code that displays the Movies and TVs using Django's for loop. The HTML code is provided below, but I am still in the process of working on the CSS styling.
<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>