ui - centering things without breaking sticky navbar and menu

examples/web-ui/docker-compose.yml

@@ -24,7 +24,7 @@ services:
       - USE_CLIENT_CACHE=yes
       - USE_GZIP=yes
       - USE_API=yes
-      - API_URI=/ChangeMeToSomethingHardToGuess                      # change it to something hard to guess + must match API_URI for myui service
+      - API_URI=/ChangeMeToSomethingHardToGuess                      # change it to something hard to guess + must match API_URI from myui service
       - admin.example.com_SERVE_FILES=no
       - admin.example.com_USE_REVERSE_PROXY=yes
       - admin.example.com_REVERSE_PROXY_URL=/admin/                  # change it to something hard to guess
@@ -44,7 +44,7 @@ services:
     environment:
       - ABSOLUTE_URI=https://admin.example.com/admin/ # change it to your full URI
       - DOCKER_HOST=tcp://myuiproxy:2375
-      - API_URI=/ChangeMeToSomethingHardToGuess
+      - API_URI=/ChangeMeToSomethingHardToGuess       # must match API_URI from bunkerized-nginx
       - ADMIN_USERNAME=admin                          # change it to something hard to guess
       - ADMIN_PASSWORD=changeme                       # change it to a good password
 

ui/templates/base.html

@@ -9,9 +9,13 @@
 
 		{% include "menu.html" %}
 
-		<div class="container d-flex justify-content-center align-items-center" style="height: 100%;">
+		<main class="flex-shrink-0 text-center">
-			{% block content %}{% endblock %}
+			<div class="container">
-		</div>
+				{% block content %}{% endblock %}
+			</div>
+		</main>
+		<!--<div class="flex-shrink-0 container d-flex justify-content-center align-items-center" style="height: 100%; padding-top: 50px;">
+		</div>-->
 
 		{% include "footer.html" %}
 

ui/templates/home.html

@@ -2,21 +2,17 @@
 
 {% block content %}
 
-<div class="d-flex text-center justify-content-center">
+<div class="row justify-content-center">
 
-	<div class="card border-0" style="width: 30rem;">
+	<div class="col col-12">
-
+		<img src="img/logo.png" style="width: 300px;" />
-		<img src="img/logo.png" class="card-img-top" />
+	</div>
-
-		<div class="row row-cols-1 row-cols-md-2">
-			<div class="col pt-3">
-				<span class="badge bg-primary">{{ instances_number }}</span> bunkerized-nginx instances
-			</div>
-			<div class="col pt-3">
-				<span class="badge bg-primary">{{ services_number }}</span> web services
-			</div>
-		</div>
 
+	<div class="col col-12 mt-20">
+		<span class="badge bg-primary">{{ instances_number }}</span> bunkerized-nginx instances
+	</div>
+	<div class="col col-12 mt-20">
+		<span class="badge bg-primary">{{ services_number }}</span> web services
 	</div>
 
 </div>

ui/templates/instances.html

@@ -5,16 +5,20 @@
 <div class="row justify-content-center">
 
 	{% if operation != "" %}
-	<div class="col col-12 col-lg-4 mt-5 text-center">
+	<div class="col col-12">
-		<div class="alert alert-primary alert-dismissible fade show text-break" role="alert">
+		<div class="row justify-content-center">
-			{{ operation }}
+			<div class="col col-12 col-lg-4">
-			<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+				<div class="alert alert-primary alert-dismissible fade show text-break" role="alert">
+					{{ operation }}
+					<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+				</div>
+			</div>
 		</div>
 	</div>
 	{% endif %}
 
 	{% if instances|length == 0 %}
-	<div class="alert alert-primary text-center">
+	<div class="col col-12 alert alert-primary">
 		No instance to show...
 	</div>
 	{% endif %}
@@ -27,7 +31,7 @@
 			{% set color = "danger" %}
 		{% endif %}
 
-	<div class="col col-12">
+	<div class="col col-12 col-lg-6">
 		<form id="form-instance-{{ instance["id"] }}">
 			<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
 			<input type="hidden" name="INSTANCE_ID" value="{{ instance["id"] }}">
@@ -47,7 +51,7 @@
 					</ul>
 				</div>
 			</div>
-			<div class="card-body text-dark">
+			<div class="card-body text-dark text-center">
 				<h5 class="card-title">
 					Status : {{ instance["status"] }}<br>
 					Type : {{ instance["type"] }}

ui/templates/services.html

@@ -5,20 +5,24 @@
 <div class="row justify-content-center">
 
 	{% if operation != "" %}
-	<div class="col col-12 col-lg-4 mt-5 text-center">
+	<div class="col col-12">
-		<div class="alert alert-primary alert-dismissible fade show text-break" role="alert">
+		<div class="row justify-content-center">
-			{{ operation }}
+			<div class="col col-12 col-lg-4">
-			<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+				<div class="alert alert-primary alert-dismissible fade show text-break" role="alert">
+					{{ operation }}
+					<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+				</div>
+			</div>
 		</div>
 	</div>
 	{% endif %}
 
-	<div class="col col-12 mb-3 text-center">
+	<div class="col col-12 mb-3">
 		<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modal-new"><i class="fas fa-plus"></i> New</button>
 	</div>
 
 	{% if services|length == 0 %}
-	<div class="alert alert-primary text-center">
+	<div class="col col-12 alert alert-primary text-center">
 		No service to show...
 	</div>
 	{% endif %}
@@ -27,7 +31,7 @@
 
 		{% set id_server_name = service["SERVER_NAME"].replace(".", "-") %}
 
-	<div class="col col-12 col-lg-4">
+	<div class="col col-12 col-lg-6">
 		<div class="card border-primary mb-3" style="max-width: 80rem;">
 			<div class="card-header border-primary bg-primary text-white">
 				{{ service["SERVER_NAME"] }}