Bootstrap item page

store/templates/items.html

 {%extends 'base.html' %}
-
-
-
-{% block content %}
 {% block title %} Items | Antiques Online {% endblock %}
-<style>
-  .grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    grid-gap: 10px;
-    grid-auto-rows: minmax(100px, auto);
-  }
-
-  .grid-item {
-    grid-row: span 1;
-    grid-column: span 1;
-    padding: 10px;
-  }
-
-  .grid-item img {
-    max-width: 100%;
-    height: auto;
-  }
-
-  .grid-item h2 {
-    margin: 10px 0;
-    font-size: 18px;
-
-  }
-
-  .grid-item p {
-    margin: 5px 0;
-    font-size: 14px;
-  }
-</style>
-
-<div class="grid">
+{% block content %}
+<!-- https://getbootstrap.com/docs/4.0/layout/grid/ -->
+<div class="container">
+  <div class="row">
     {% if items %}
     {% for item in items %}
-  <div class="grid-item">
-
-    <img src="static\image_placeholder.png" alt="{{ item.description }}">
+    <div class="col text-center">
+      <div class="align-items-center">
+        <img class="align-self-center" src="static\image_placeholder.png" alt="{{ item.description }}"
+          style="width: 200px; height: 200px;"> <!-- Set image size to ensure content is always fitting. -->
         <h2>{{ item.description }}</h2>
         <p>£{{ item.price }}</p>
-    <a href="{{url_for('item_page', item_id = item.id)}}">View
-      Details</a>
-
+        <a href="{{url_for('item_page', item_id = item.id)}}">View Details</a>
+      </div>
     </div>
     {% endfor %}
     {% else %}
     <p>No items available</p>
     {% endif %}
   </div>
+</div>
 {% endblock %}
\ No newline at end of file