Tweak the integrations grid size in the welcome page.

templates/front/welcome.html

@@ -313,7 +313,7 @@
                 <small>Set up additional ways to get notified:</small>
             </h1>
         </div>
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/email.png' %}" class="icon" alt="" />
                 <h3>Email<br><small>&nbsp;</small>
@@ -321,14 +321,14 @@
             </div>
         </div>
 
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/webhook.png' %}" class="icon" alt="" />
                 <h3>Webhooks<br><small>&nbsp;</small></h3>
             </div>
         </div>
 
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/slack.png' %}" class="icon" alt="" />
                 <h3>Slack<br><small>Chat</small></h3>
@@ -336,7 +336,7 @@
         </div>
 
         {% if enable_apprise %}
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/apprise.png' %}" class="icon" alt="" />
                 <h3>Apprise<br><small>Push Notifications</small></h3>
@@ -345,7 +345,7 @@
         {% endif %}
 
         {% if enable_discord %}
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/discord.png' %}" class="icon" alt="" />
                 <h3>Discord<br><small>Chat</small></h3>
@@ -354,7 +354,7 @@
         {% endif %}
 
         {% if enable_matrix %}
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/matrix.png' %}" class="icon" alt="" />
                 <h3>Matrix<br><small>Chat</small></h3>
@@ -362,49 +362,49 @@
         </div>
         {% endif %}
 
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/mattermost.png' %}" class="icon" alt="" />
                 <h3>Mattermost<br><small>Chat</small></h3>
             </div>
         </div>
 
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/msteams.png' %}" class="icon" alt="" />
                 <h3>Microsoft Teams<br><small>Chat</small></h3>
             </div>
         </div>
 
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/opsgenie.png' %}" class="icon" alt="" />
                 <h3>OpsGenie<br><small>Incident Management</small></h3>
             </div>
         </div>
 
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/pd.png' %}" class="icon" alt="" />
                 <h3>PagerDuty<br><small>Incident Management</small></h3>
             </div>
         </div>
 
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/pagerteam.png' %}" class="icon" alt="" />
                 <h3>Pager Team <br><small>Incident Management</small></h3>
             </div>
         </div>
 
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/pagertree.png' %}" class="icon" alt="" />
                 <h3>PagerTree<br><small>Incident Management</small></h3>
             </div>
         </div>
 
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/prometheus.png' %}" class="icon" alt="" />
                 <h3>Prometheus<br><small>Event Monitoring</small></h3>
@@ -412,7 +412,7 @@
         </div>
 
         {% if enable_pushbullet %}
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/pushbullet.png' %}" class="icon" alt="" />
                 <h3>Pushbullet<br><small>Push Notifications</small></h3>
@@ -421,7 +421,7 @@
         {% endif %}
 
         {% if enable_pushover %}
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/po.png' %}" class="icon" alt="" />
                 <h3>Pushover<br><small>Push Notifications</small></h3>
@@ -430,7 +430,7 @@
         {% endif %}
 
         {% if enable_shell %}
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/shell.png' %}" class="icon" alt="" />
                 <h3>Shell Commands<br><small>&nbsp;</small></h3>
@@ -439,7 +439,7 @@
         {% endif %}
 
         {% if enable_sms %}
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/sms.png' %}" class="icon" alt="" />
                 <h3>SMS<br><small>&nbsp;</small></h3>
@@ -448,7 +448,7 @@
         {% endif %}
 
         {% if enable_telegram %}
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/telegram.png' %}" class="icon" alt="" />
                 <h3>Telegram<br><small>Chat</small></h3>
@@ -457,7 +457,7 @@
         {% endif %}
 
         {% if enable_trello %}
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/trello.png' %}" class="icon" alt="" />
                 <h3>Trello<br><small>Project Management</small></h3>
@@ -465,7 +465,7 @@
         </div>
         {% endif %}
 
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/victorops.png' %}" class="icon" alt="" />
                 <h3>VictorOps<br><small>Incident Management</small></h3>
@@ -473,7 +473,7 @@
         </div>
 
         {% if enable_whatsapp %}
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/whatsapp.png' %}" class="icon" alt="" />
                 <h3>WhatsApp<br><small>Chat</small></h3>