Bootstrap 5.3 switch.

equipment/templates/equipment/equipment.html

@@ -1,18 +1,13 @@
 {% extends "base.html" %}
 {% load mathfilters %}
 {% block title %}Equipment Information{% endblock %}
+
+{% block jumbotron %}Equipment{% endblock %}
+{% block jumbotronsub %}{{ equipment.id }}{% endblock %}
+
 {% block content %}
-<main role="main">
-
-    <!-- Main jumbotron for a primary marketing message or call to action -->
-    <div class="jumbotron">
 <div class="container">
-            <h1 class="display-3">Equipment: {{ equipment.id }}</h1>
 
-        </div>
-    </div>
-
-    <div class="container">
 
   <h3>Attributes</h3>
   <ul>
@@ -23,9 +18,7 @@
 
 
 
-    </div> <!-- /container -->
 
 
-</main>
+</div>
-
 {% endblock %}

equipment/templates/equipment/equipment_list.html

@@ -1,17 +1,12 @@
 {% extends "base.html" %}
 {% load mathfilters %}
 {% block title %}Kegging Dashboard{% endblock %}
+
+{% block jumbotron %}Equipment Dashboard{% endblock %}
+
 {% block content %}
 <main role="main">
 
-    <!-- Main jumbotron for a primary marketing message or call to action -->
-    <div class="jumbotron">
-        <div class="container">
-            <h1 class="display-3">Equipment Dashboard</h1>
-
-        </div>
-    </div>
-
     <div class="container">
 
     </div> <!-- /container -->	

equipment/views.py

@@ -14,8 +14,8 @@ def home(request):
 class EquipmentListView(ListView):
     model = Equipment
 
-def equipment(request, keg_id):
+def equipment(request, equipment_id):
-    equipment = get_object_or_404(Equipment, pk=keg_id)
+    equipment = get_object_or_404(Equipment, pk=equipment_id)
     return render(request, 'equipment/equipment.html', {'equipment': equipment})
 
 def equipment_labels(request):

templates/base.html

@@ -4,19 +4,29 @@
     <title>{% block title %}{% endblock %}</title>
 
     <!-- CSS only -->
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" 
-        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" 
+      crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" 
+      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" 
+      crossorigin="anonymous"></script>
 
     <!-- JS, Popper.js, and jQuery -->
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" 
+      integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" 
+      crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" 
+      integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" 
+      crossorigin="anonymous"></script>
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
         integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
         crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+    <!-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" -->
-        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+        <!-- integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" -->
-        crossorigin="anonymous"></script>
+        <!-- crossorigin="anonymous"></script> -->
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
+    <!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" -->
-        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
+        <!-- integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" -->
-        crossorigin="anonymous"></script>
+        <!-- crossorigin="anonymous"></script> -->
     {% block script %}{% endblock %}
 	<style>
 		{% block style %}{% endblock %}
@@ -30,7 +40,7 @@
     </head>
 <body>
 	<div class="container">
-		<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+		<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
 		<a class="navbar-brand" href="/">Damn Yankee Brewing</a>
 		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
 			aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
@@ -93,14 +103,12 @@
 	</div>
 
 	<main role="main">
-		<div class="jumbotron">
+    <div class="container my-5">
-			<div class="container">
+      <div class="p-5 text-left bg-body-tertiary rounded-3">
-			    <div class="content row">
+        <h1 class="text-body-emphasis">{% block jumbotron %}{% endblock %}</h1>
-				<h2>{% block jumbotron %}{% endblock %}</h2>
+        <p class="lead">
-				</div>
+          {% block jumbotronsub %}{% endblock %}
-				<div class="content row">
+        </p>
-				<h4>{% block jumbotronsub %}{% endblock %}</h4>
-				</div>
       </div>
     </div>