Improve app dock/bar

pages/home.php

@@ -6,13 +6,12 @@
  */
 ?>
 
-<div class="app-dock-container mobile-app-hide">
-    <div class="app-dock">
+<div class="mobile-app-hide d-flex justify-content-center flex-wrap">
     <?php
     foreach (EXTERNAL_APPS as $a) {
         ?>
-            <div class="app-dock-item">
-                <p>
+        <div class="app-dock-item m-2">
+            <p class="mb-0">
                 <a href="<?php echo $a['url']; ?>">
                     <img class="img-responsive app-icon" src="<?php
                     if (strpos($a['icon'], "http") !== 0) {
@@ -21,14 +20,16 @@
                         echo $a['icon'];
                     }
                     ?>"/>
-                        <span><?php echo $a['title']; ?></span>
+                    <span class="d-block text-center"><?php echo $a['title']; ?></span>
                 </a>
             </p>
         </div>
         <?php
     }
     ?>
-        <div class="row mt-4">
+</div>
+
+<div class="mobile-app-hide row mt-4">
     <?php
     foreach (EXTERNAL_APPS as $a) {
         if (!isset($a['card'])) {
@@ -60,5 +61,3 @@
     }
     ?>
 </div>
-    </div>
-</div>

static/css/dock.css

@@ -2,35 +2,15 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-.apppanel {
-    min-height: 250px;
-}
-
-.app-dock-container {
-    display: flex;
-}
-
-.app-dock {
-    margin: 0 auto 10px auto;
-    display: flex;
-    justify-content: space-around;
-    flex-wrap: wrap;
-}
-
 .app-icon {
     border: 1px solid grey;
     border-radius: 20%;
 }
 
 .app-dock-item {
-    padding: 0px 5px 2px 5px;
     min-width: 100px;
 }
 
-.app-dock-item p {
-    margin-bottom: 0px;
-}
-
 .app-dock-item p a {
     font-size: 95%;
     color: #555;
@@ -45,22 +25,3 @@
     display: block;
     margin: 0 auto;
 }
-
-.app-dock-item p a span {
-    display: block;
-    text-align: center;
-}
-
-/* Small Devices, Tablets */
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    .row.widget-box > .col-sm-6:nth-child(2n+3) {
-        clear: both;
-    }
-}
-
-/* Medium Devices, Desktops */
-@media only screen and (min-width: 992px) {
-    .row.widget-box > .col-md-4:nth-child(3n+4) {
-        clear: both;
-    }
-}