I am currently in the process of developing a store website using bootstrap. One issue I am facing involves creating a grid for my product display. The problem is that the number of grid cells remains constant even when the screen size is reduced. I would like it to have 1 row when the screen is very small and 2 rows otherwise. Another challenge I am encountering is that the grid does not align centrally on the screen. Does anyone know how to resolve these issues? Thank you!
The content in each column refers to the figures.
Below is the code I am working with:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ryan's Cookies</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2d0ddddc6c1c6c0d3c2f2879c829c83">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/styles.css" rel="stylesheet">
</head>
<body class="bg-light">
<!--Shopping cart-->
<img src="/static/images/cart.png" class="top-right" alt="cart">
<!--Main Title-->
<div class="container text-center title-container">
<h1 class="display-1">Ryan's Cookie Store</h1>
<h1 class="display-6"><em>Fresh. Delicious. Delivered</em></h1>
</div>
<!--Cookie Grid-->
<div class="container">
<div class="row justify-content-center">
<div class="col-4">
<figure class="figure">
<img src="/static/images/chocolate-chip.jpg" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption text-right display-8 mt-1">$7.50 <button class="btn btn-dark btn-sm sub-margin">Add To Cart</button></figcaption>
</figure>
</div>
<div class="col-4">
<figure class="figure">
<img src="/static/images/peanut-butter.jpg" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption text-right display-8 mt-1">$7.50 <button class="btn btn-dark btn-sm sub-margin">Add To Cart</button></figcaption>
</figure>
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
<figure class="figure text-center">
<img src="/static/images/nieman-marcus.jpg" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption text-right display-8 mt-1">$7.50$ <button class="btn btn-dark btn-sm sub-margin">Add To Cart</button></figcaption>
</figure>
</div>
<div class="col-4">
<figure class="figure text-center">
<img src="/static/images/snickerdoodle.jpg" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption text-right display-8 mt-1">$7.50 <button class="btn btn-dark btn-sm sub-margin">Add To Cart</button></figcaption>
</figure>
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
<figure class="figure text-center">
<img src="/static/images/tiger.jpg" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption text-right display-8 mt-1">$7.50 <button class="btn btn-dark btn-sm sub-margin">Add To Cart</button></figcaption>
</figure>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="14767b7b60676066756454213a243a25">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>