diff --git a/templates/base.html.twig b/templates/base.html.twig
index ba75b6f..6ab35da 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -42,18 +42,18 @@
 <footer class="footer">
     <div class="container">
        <div class="row">
-           <div class="col-4" style="text-align: center;">
+           <div class="col-md-4" style="text-align: center;">
                <img src="{{ asset('img/FediPlan.png') }}" width="80" style=" border-radius: 5%;margin-top: 10px; margin-bottom: 10px; "><br/>
                FediPlan -{{ "now"|date("Y") }}
            </div>
-           <div class="col-4" style="margin-top: 10px; text-align: center;">
+           <div class="col-md-4" style="margin-top: 10px; text-align: center;">
                {{ 'common.author'|trans }}: Thomas<br/>
                Mastodon: <a href="https://toot.fedilab.app/@apps" target="_blank">@apps</a><br/>
                Framagit: <a href="https://framagit.org/tom79/" target="_blank">@tom79</a><br/>
                Codeberg: <a href="https://codeberg.org/tom79/" target="_blank">@tom79</a><br/>
                Github: <a href="https://github.com/stom79/" target="_blank">@stom79</a><br/>
            </div>
-           <div class="col-4" style="margin-top: 10px; text-align: center;">
+           <div class="col-md-4" style="margin-top: 10px; text-align: center;">
                {{ 'common.license'|trans }}: <a href="https://www.gnu.org/licenses/gpl-3.0.fr.html" target="_blank">GPL 3</a><br/>
                <a href="https://framagit.org/tom79/fediplan" target="_blank">{{ 'common.source_code'|trans}}</a>
            </div>
diff --git a/templates/bundles/TwigBundle/Exception/error404.html.twig b/templates/bundles/TwigBundle/Exception/error404.html.twig
index f4c76a0..e643c1a 100644
--- a/templates/bundles/TwigBundle/Exception/error404.html.twig
+++ b/templates/bundles/TwigBundle/Exception/error404.html.twig
@@ -6,7 +6,7 @@
     {% include 'nav.html.twig' %}
 
     <div class="row">
-        <div class="col-12" style="text-align: center;line-height: normal;margin-top: 100px;">  <pre>
+        <div class="col-md-12" style="text-align: center;line-height: normal;margin-top: 100px;">  <pre>
 ██╗  ██╗ ██████╗ ██╗  ██╗
 ██║  ██║██╔═████╗██║  ██║
 ███████║██║██╔██║███████║
@@ -19,7 +19,7 @@
     </div>
 
     <div class="row">
-        <div class="col-12" style="text-align: center">
+        <div class="col-md-12" style="text-align: center">
             --> <a href="{{ path('index') }}">200</a> <--
         </div>
     </div>
diff --git a/templates/bundles/TwigBundle/Exception/error500.html.twig b/templates/bundles/TwigBundle/Exception/error500.html.twig
index 6ebc22a..7153475 100644
--- a/templates/bundles/TwigBundle/Exception/error500.html.twig
+++ b/templates/bundles/TwigBundle/Exception/error500.html.twig
@@ -6,7 +6,7 @@
     {% include 'nav.html.twig' %}
 
     <div class="row">
-        <div class="col-12" style="text-align: center;line-height: normal;margin-top: 100px;">  <pre>
+        <div class="col-md-12" style="text-align: center;line-height: normal;margin-top: 100px;">  <pre>
 ███████╗ ██████╗  ██████╗
 ██╔════╝██╔═████╗██╔═████╗
 ███████╗██║██╔██║██║██╔██║
@@ -18,7 +18,7 @@
     </div>
 
     <div class="row">
-        <div class="col-12" style="text-align: center">
+        <div class="col-md-12" style="text-align: center">
             --> <a href="{{ path('index') }}">200</a> <--
         </div>
     </div>
diff --git a/templates/fediplan/Ajax/layout.html.twig b/templates/fediplan/Ajax/layout.html.twig
index dbba7f9..1381468 100644
--- a/templates/fediplan/Ajax/layout.html.twig
+++ b/templates/fediplan/Ajax/layout.html.twig
@@ -2,7 +2,7 @@
 {% for status in statuses %}
 
     <div class="row" id="message_container_{{ status.getId()  }}" style="margin-bottom: 20px;">
-        <div class="col-8">
+        <div class="col-md-8">
             <div class="card">
                 <div class="card-horizontal" style=" display: flex;flex: 1 1 auto;">
                     <div class="img-square-wrapper">
diff --git a/templates/fediplan/about.html.twig b/templates/fediplan/about.html.twig
index 7c87483..8a01c1a 100644
--- a/templates/fediplan/about.html.twig
+++ b/templates/fediplan/about.html.twig
@@ -13,20 +13,20 @@
     </div>
 
     <div class="row">
-        <div class="col-8 alert alert-primary" role="alert">
+        <div class="col-md-8 alert alert-primary" role="alert">
             {{ 'page.about.data'|trans |raw}}
         </div>
     </div>
 
     <div class="row">
-        <div class="col-8 alert alert-success" role="alert">
+        <div class="col-md-8 alert alert-success" role="alert">
             {{ 'page.about.issues'|trans |raw}}
         </div>
     </div>
 
 
     <div class="row">
-        <div class="col-8 alert alert-info" role="alert">
+        <div class="col-md-8 alert alert-info" role="alert">
             You can help to translate the project into your language with <b>Crowdin</b> at <a title="Crowdin" target="_blank" href="https://crowdin.com/project/fediplan"><img src="https://badges.crowdin.net/fediplan/localized.svg"></a>
         </div>
     </div>
diff --git a/templates/fediplan/index.html.twig b/templates/fediplan/index.html.twig
index b92529e..d5a50bf 100644
--- a/templates/fediplan/index.html.twig
+++ b/templates/fediplan/index.html.twig
@@ -31,7 +31,7 @@
         </div>
     {% elseif flow.getCurrentStepNumber() == 2 %}
         <div class="row">
-            <div class="col-6">
+            <div class="col-md-6">
                 <div class="alert alert-warning">
                     {{ 'messages.login_authorization'|trans }}
                 </div>
@@ -62,7 +62,7 @@
     {% endif %}
     {{ form_widget(form) }}
     <div class="row">
-        <div class="col-2">
+        <div class="col-md-2">
             <input type="submit" class="btn btn-primary btn-block btn-flat"  value="{{ 'common.next'|trans }}"/>
         </div>
     </div>
diff --git a/templates/fediplan/schedule.html.twig b/templates/fediplan/schedule.html.twig
index 8eca17f..860457e 100644
--- a/templates/fediplan/schedule.html.twig
+++ b/templates/fediplan/schedule.html.twig
@@ -28,7 +28,7 @@
 
     {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
     <div class="row" style="margin-top: 30px;">
-        <div class="col-12">
+        <div class="col-md-12">
             <div class="form-group has-feedback">
                 {{ form_label(form.content_warning) }}
                 {{ form_widget(form.content_warning, {'attr': {'class': 'form-control', 'data-emojiable':'true'}}) }}
@@ -418,14 +418,14 @@
                     var message = "{{ 'common.delete'|trans }}";
                     var content;
                     content = ' <div class="row" id="media_container_'+data.id+'">\n' +
-                    '                <div class="col-4">\n' +
+                    '                <div class="col-md-4">\n' +
                     '                    <img src="'+data.preview_url+'" style="width:100%;max-width:200px;" id="media_preview_'+data.id+'"/>\n' +
                     '                </div>\n' +
                     '                <div class="col-6">\n' +
                     '                    <textarea name="media_description_'+data.id+'" class="form-control"></textarea>\n' +
                     '                </div>\n' +
                     '                <input type="hidden" name="media_id_'+data.id+'" value="'+data.id+'"/>\n' +
-                    '                <div class="col-2">\n' +
+                    '                <div class="col-md-2">\n' +
                     '                        <button type="button" class="btn btn-danger delete_media" data-id="'+data.id+'">\n' +
                     '                          <i class="glyphicon glyphicon-trash"></i>\n' +
                     '                          <span>'+message+'</span>\n' +
diff --git a/templates/fediplan/scheduled.html.twig b/templates/fediplan/scheduled.html.twig
index 4c73b1c..13a869f 100644
--- a/templates/fediplan/scheduled.html.twig
+++ b/templates/fediplan/scheduled.html.twig
@@ -9,7 +9,7 @@
 
 
     <div class="row container">
-        <div class="col-12" id="content"></div>
+        <div class="col-md-12" id="content"></div>
     </div>
     <div class="row container hide" id="loader" style="text-align: center;margin-top: 50px;"><div class="lds-ring"><div></div><div></div><div></div><div></div></div></div>
     <div class="row hide" id="no_content" style="margin-top: 50px;">