Bootstrap basket

store/templates/basket.html

-
-
 {% extends "base.html" %}
 
 {% block content %}
+<div class="container">
     <h1>Basket</h1>
-    <style>        
-        table {
-            border-collapse: collapse;
-            width: 100%;
-        }
-        
-        th, td {
-            text-align: left;
-            padding: 8px;
-            border-bottom: 1px solid #ddd;
-        }
-        
-        th {
-            background-color: #000000;
-            color: white;
-        }
-        
-        .remove-button {
-            background-color: #f44336;
-            color: white;
-            border: none;
-            padding: 8px 16px;
-            text-align: center;
-            text-decoration: none;
-            display: inline-block;
-            font-size: 16px;
-            margin: 4px 2px;
-            cursor: pointer;
-        }
-    </style>
-    
     {% if items %}
-        <table>
-            <thead>
+    <table class="table">
+        <thead class="text-light" style="background-color: #000000">
             <tr>
                 <th>Item description</th>
                 <th>Item price</th>
@@ -58,7 +26,7 @@
             </tr>
             {% endfor %}
         </tbody>
-            <tfoot>
+        <tfoot style="background-color: #f2f2f2">
             <tr>
                 <td>Total price:</td>
                 <td>£{{ total_price }}</td>
@@ -69,5 +37,5 @@
     {% else %}
     <p>Your basket is empty.</p>
     {% endif %}
-    
+</div>
 {% endblock %}
\ No newline at end of file

store/templates/item_page.html

@@ -33,8 +33,6 @@
             {% endfor %}
         </tbody>
     </table>
-    {% else %}
-    <p>Item set is empty.</p>
     {% endif %}
 </div>
 {% endblock %}
\ No newline at end of file