[SOLVED] The bootstrap cards could not grid properly

The bootstrap cards could not grid properly

shop.html

{% extends 'base.html' %} 

{% block content %} 
<div class="container">
  <!-- Product List -->
  <br>
  <h2 align="center">List of Products</h2>
  <br>
  <div class="row">
  {% for product in products %} 
  <div class="col-3 col-md-3 col-sm-3">
    
    <div class="card">
      <form method="POST" action="{% url 'add_to_cart' product.id %}">
        {% csrf_token %} 
        <img src="{{ product.image.url }}" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 name="item" class="card-title">{{product.name}}</h5>
            <div class="card-text">
                <p>Category: {{ product.category }}</p>
                <p>Price:</p>
                <p style="text-decoration: line-through;color:red;">{{ product.price }}</p>
                <p style="color:blue;">{{ product.discount_price }}</p>
            </div>
            <hr>
            <input name="quantity" type="number" value="1">
            <input type="submit" class="btn btn-primary" value="Add to Cart">
      </form>
      
    </div>
    
  </div>
  {% endfor %}
</div> 
</div>
  
{% endblock %}

base.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Shopping System</title>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<body>
    {% include 'navbar.html' %} 
    {% block content %} {% endblock %} 
    <!-- JavaScript Bundle with Popper -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <!--  -->
</body>
</html>

For this code I have used the class col-3 and the second product still being put under the first product. Instead I would like to put the second product card next to the first one. I grabbed the code from Bootstrap Card Grid System but it still does not work even though I have put the required bootstrap css and javascript links into the base.html. May I ask what I need to change in order to have the cards 3 in a row?

Solution

Ideally, you'd have a container div, then a a row, inside the row you declare your columns(in this case we are using size 3 for colum). Let me know if it's helpful.

<div class="container">
    <!-- Product List -->
    <div class="row justify-content-center">
    {% for product in products %} 
    <div class="col-3 col-md-3 col-sm-3">
      
      <div class="card">
        <form method="POST" action="{% url 'add_to_cart' product.id %}">
          {% csrf_token %} 
          <img src="{{ product.image.url }}">
          <div class="card-body">
            <h5 name="item" class="card-title">{{product.name}}</h5>
              <div class="card-text">
                  <p>Category: {{ product.category }}</p>
                  <p>Price:</p>
                  <p style="text-decoration: line-through;color:red;">{{ product.price }}</p>
                  <p style="color:blue;">{{ product.discount_price }}</p>
              </div>
              <hr>
              <input name="quantity" type="number" value="1">
              <input type="submit" class="btn btn-primary" value="Add to Cart">
        </form>
        
      </div>
      
    </div>
    {% endfor %}
</div> 
  </div>