While following a Django tutorial, I encountered an issue with Bootstrap cards and CSS styling. Using the latest version (Bootstrap 4.5.0), I noticed that my responsive grid was causing the cards to overlap as I increased the screen size. Comparing it to the tutorial which used Bootstrap 4.1, changing the href link in the base.html file resolved the problem (even though the code in index.html remained the same).
I then compared both versions on the browser and discovered that disabling the min-width: 0 for the class="col" fixed the issue in the 4.5.0 version of the link. By downloading the 4.5 CSS, adding it to the project files, and removing the min-width style, everything worked perfectly.
Now, the question arises: Was I using it incorrectly in the index.html or is this some sort of bug? (This problem occurred on both Opera 68.0.3618.125 and Chrome 83.0.4103.97)
The version that worked without any issues:
index.html:
{% extends 'base.html' %}
{% block content %}
<h1>Products</h1>
<div class="row">
{% for product in products %}
<div class="col">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="{{ product.image_url }}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">{{ product.name }}</h5>
<p class="card-text">${{ product.price }}</p>
<a href="#" class="btn btn-primary">Add to Cart</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
base.html
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-
9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>