More proper use of containers, rows and cols

jftsang · Feb 18, 2024 · e5ae4b6 · e5ae4b6
1 parent 63ca8d2
commit e5ae4b6
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 15 deletions.
diff --git a/templates/base.html b/templates/base.html
@@ -34,12 +34,17 @@
 </head>
 <body class="text-light">
 
+<div class="container-fluid mx-0 px-0">
+
 <header class="d-print-none">
-    {% include 'navbar.html' %}
+    <div class="row">
+        {% include 'navbar.html' %}
+    </div>
 </header>
 
 <main>
-    <div class="container p-2" id="flashes-div">
+    <div class="container">
+    <div class="row p-2" id="flashes-div">
     {% if get_flashed_messages() %}
         <ul id="flashes">
         {% for category, msg in get_flashed_messages(with_categories=True) %}
@@ -49,7 +54,7 @@
     {% endif %}
     </div>
 
-    <div class="container w-print-100">
+    <div class="w-print-100">
         <div class="row justify-content-center">
             <div id="mainContentDiv" class="col-md-8">
                 {% block content %}
@@ -62,11 +67,15 @@
             </div>
         </div>
     </div>
+    </div>
 </main>
 
 <footer class="d-print-none">
-    {% include 'footer.html' %}
+    <div class="row align-items-end">
+        {% include 'footer.html' %}
+    </div>
 </footer>
+</div>
 
 <!-- Bootstrap JS with Popper -->
 <script src="{{ url_for('static', filename='bootstrap.bundle.min.js') }}"

diff --git a/templates/footer.html b/templates/footer.html
@@ -1,36 +1,37 @@
 <!-- https://getbootstrap.com/docs/4.0/components/navbar/ -->
 <nav id="footer"
-     class="navbar navbar-expand-sm fixed-bottom navbar-dark justify-content-between">
-    <div class="container">
-        <div class="collapse navbar-collapse" id="bottomBar">
-            <div class="collapse navbar-collapse"></div>
-{#            <span class="navbar-text font-weight-bolder">External links:</span>#}
+     class="navbar navbar-expand-sm navbar-dark">
+    <div class="container-fluid">
+        <div id="bottomBar"
+             class="collapse navbar-collapse justify-content-center">
             <ul class="navbar-nav">
                 <li class="nav-item px-3">
-                    <a class="nav-link" href="https://stclementscambridge.co.uk/">
+                    <a class="nav-link"
+                       href="https://stclementscambridge.co.uk/">
                         St Clement's website
                     </a>
                 </li>
                 <li class="nav-item px-3">
-                    <a class="nav-link" href="https://hymnary.org/hymnal/NEH1985">
+                    <a class="nav-link"
+                       href="https://hymnary.org/hymnal/NEH1985">
                         NEH
                     </a>
                 </li>
                 <li class="nav-item px-3">
-                    <a class="nav-link" href="https://www.churchofengland.org/prayer-and-worship/worship-texts-and-resources/book-common-prayer">
+                    <a class="nav-link"
+                       href="https://www.churchofengland.org/prayer-and-worship/worship-texts-and-resources/book-common-prayer">
                         BCP
                     </a>
                 </li>
                 <li class="nav-item px-3">
-                    <a class="nav-link" href="{{ url_for('acknowledgements_view') }}">Acknowledgements</a>
+                    <a class="nav-link"
+                       href="{{ url_for('acknowledgements_view') }}">Acknowledgements</a>
                 </li>
                 <li class="nav-item px-3">
                     <a class="nav-link"
                        href="https://github.com/jftsang/pypew">GitHub</a>
                 </li>
             </ul>
-            <div class="collapse navbar-collapse"></div>
         </div>
-
     </div>
 </nav>