How can I display movies and TVs side by side?-CodePudding

I　want to display Movies and TV side by side with django_bootsrap. Movies left side TVs right side. But I don't know how display Movies left side TVs right side.

I display Movies and TVs by django's for. Below html code. I'm not still CSS.

<h1>TV Score_by</h1>
<div >

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

CodePudding user response：

Use the columns.

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