Center Content each page

404.php

@@ -8,9 +8,11 @@
 <?php include("./incl/menu.php");?>
 
 <!-- Page Content -->
-<div class="container">
+<div class="jumbotron d-flex align-items-center">
+  <div class="container">
     <h1>Erreur <span class="important">404</span></h1>
     <p class="pt-3 text-center">Cette page n'existe pas! <a href="/index.php" class="important">Revenir à la page d'accueil ?</a></p>
+  </div>
 </div>
 
 <!-- Footer -->

css/style.css

@@ -38,9 +38,6 @@ p {
 }
 
 /* HEADER */
-header {
-    margin-bottom: 4%;
-}
 #header-container {
     padding-bottom: 0;
 }
@@ -52,8 +49,11 @@ header {
 }
 
 /* CONTENT */
-.container {
-    padding-bottom: 25px;
+@media (min-width: 576px) {
+    .jumbotron {padding: 6.17rem 2rem;}
+}
+.jumbotron {
+    background-color: var(--background-color) !important;
 }
 .table {
     color: white;

incl/footer.php

@@ -1,3 +1,4 @@
+</div>
       <footer class="text-center">
             <a href="#" class="important"><i class="fas fa-arrow-up"></i></a>
             <div class="realDateTime">Affichage de l'heure en temps réel : <span class="important" id="realDateTime"></span></div>

incl/menu.php

@@ -16,3 +16,5 @@
         </div>
     </nav>
 </header>
+
+<div class="jumbotron d-flex align-items-center">

index.php

@@ -25,7 +25,8 @@
 </header> 
 
 <!-- Page Content -->
-<div class="container">
+<div class="jumbotron d-flex align-items-center">
+    <div class="container">
         <h1>Bienvenue sur <span class="important">FunctionProject</span>! 🎉</h1>
         <p class="mt-5">FunctionProject est un projet créé par <a href="https://divlo.fr/" target="_blank">Divlo</a> qui a pour but de rassembler plein de mini-programme (fonctions JavaScript) permettant de faire plusieurs choses comme <b>savoir la météo</b>, générer un <b>nombre aléatoire</b>, etc. 
         <br> <br>
@@ -38,6 +39,7 @@
         <br> <br>
         Vous pouvez m'envoyer vos avis, suggestion d'ajouts, éventuel bug/problème grâce à ce <a href="https://docs.google.com/forms/d/1NliUWi3lntHDM42Td0C47J0cZKgnYilxT_0UcdmVaog/" target="_blank">Feedback Formulaire</a> 📝.
         </p></div>
+    </div>
 </div>
 
 <!-- Footer -->

views/error404.php

@@ -8,7 +8,8 @@
 <?php include("../incl/menu.php");?>
 
 <!-- Page Content -->
-<div class="container">
+<div class="jumbotron d-flex align-items-center">
+    <div class="container">
     <h1><span class="important">La météo</span> :</h1>
     <p class="pt-3 text-center">Affiche la météo et l'heure local selon la ville.</p>
     <div class="form-group">
@@ -23,7 +24,9 @@
             <br> <br>
             <p class="results text-center">La ville que vous avez rentré n'existe pas (dans l'API).</p>
         </div>
+    </div>
 </div>
+
 <script>
     $(function () {
         $("#cityName").click(function() {

views/function-list.php

@@ -25,7 +25,8 @@
 </header>
 
 <!-- Page Content -->
-<div class="container">
+<div class="jumbotron d-flex align-items-center">
+    <div class="container">
         <div class="row">
             <h1>La liste des <span class="important">Fonctions</span> :</h1>
                 <table class="table table-bordered mt-5">
@@ -59,6 +60,7 @@
                     </tbody>
                 </table>
         </div>
+    </div>
 </div>
 
 <!-- Footer -->