Add bootstrap frontend

templates/lettings_index.html

@@ -1,17 +1,45 @@
-<title>Lettings</title>
-<h1>Lettings</h1>
-{% if lettings_list %}
-    <ul>
-    {% for letting in lettings_list %}
-        <li>
-            <a href="{% url 'letting' letting_id=letting.id %}">
-                {{ letting.title }}
-            </a>
-        </li>
-    {% endfor %}
-    </ul>
-{% else %}
-    <p>No lettings are available.</p>
-{% endif %}
-<div><a href="{% url 'index' %}">Home</a></div>
-<div><a href="{% url 'profiles_index' %}">Profiles</a></div>
+{% extends "base.html" %}
+{% block title %}Lettings{% endblock title %}
+
+{% block content %}
+
+
+<div class="container px-5 py-5 text-center">
+    <div class="row justify-content-center">
+        <div class="col-lg-8">
+            <h1 class="page-header-ui-title mb-3 display-6">Lettings</h1>
+        </div>
+    </div>
+</div>
+
+<div class="container px-5">
+    <div class="row gx-5 justify-content-center">
+        <div class="col-lg-10">
+            <hr class="mb-0" />
+            {% if lettings_list %}
+                <ul class="list-group list-group-flush list-group-careers">
+                    {% for letting in lettings_list %}
+                        <li class="list-group-item">
+                            <a href="{% url 'letting' letting_id=letting.id %}">{{ letting.title }}</a>
+                        </li>
+                    {% endfor %}
+                </ul>
+            {% else %}
+                <p>No lettings are available.</p>
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+<div class="container px-5 py-5 text-center">
+    <div class="justify-content-center">
+        <a class="btn fw-500 ms-lg-4 btn-primary px-10" href="{% url 'index' %}">
+            Home
+        </a>
+        <a class="btn fw-500 ms-lg-4 btn-primary px-10" href="{% url 'profiles_index' %}">
+            Profiles
+        </a>
+    </div>
+</div>
+
+{% endblock %}