I want to show products as a table but they show up in a vertical line-CodePudding

I have copied the bootstrap card code from the offical site and tried many changes to my code but the output always comes in a vertical line.

How to make these product cards appear as table with 3 columns?

{% extends 'base.html' %}
{% block content %}
<h1>Products</h1>
<div >
  {% for product in products %}
  <div >
    <div  style="width: 18rem;">
      <img src="{{ product.image_url }}"  alt="..." width="300" height="300">
      <div >
        <h5 >{{ product.name }}</h5>
        <p >${{ product.price }}</p>
        <a href="#" >Add to Cart</a>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% endblock %}

This is the output I am getting

CodePudding user response：

If you missed adding the CSS and JS files of bootstrap 4 in your base.html, add the below file to your code.

<!-- bootstrap.min.css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<!-- jquery and bootstrap.bundle.min.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>