From 158e6603f12ec15a7d8c1acbd18f5966a2387f81 Mon Sep 17 00:00:00 2001
From: Mo8it <mo8it@proton.me>
Date: Wed, 2 Mar 2022 23:35:20 +0100
Subject: [PATCH] Upgrade to bootstrap 4

---
 advlabdb/templates/admin/actions.html         |  32 ++--
 advlabdb/templates/admin/base.html            | 115 ++++++++-------
 advlabdb/templates/admin/file/list.html       |  53 +++----
 .../templates/admin/file/modals/form.html     |   4 +-
 advlabdb/templates/admin/layout.html          | 111 +++++++-------
 advlabdb/templates/admin/lib.html             | 126 ++++++++++------
 advlabdb/templates/admin/model/create.html    |   8 +-
 advlabdb/templates/admin/model/details.html   |  22 +--
 advlabdb/templates/admin/model/edit.html      |  16 +-
 .../admin/model/inline_list_base.html         |   6 +-
 advlabdb/templates/admin/model/layout.html    | 137 +++++++++---------
 advlabdb/templates/admin/model/list.html      |  27 ++--
 .../templates/admin/model/modals/create.html  |  24 ++-
 .../templates/admin/model/modals/details.html |  80 +++++-----
 .../templates/admin/model/modals/edit.html    |  23 +--
 .../templates/admin/rediscli/console.html     |   4 +-
 copy_admin_templates.py                       |   2 +-
 17 files changed, 423 insertions(+), 367 deletions(-)

diff --git a/advlabdb/templates/admin/actions.html b/advlabdb/templates/admin/actions.html
index 02257bb..cd645d8 100644
--- a/advlabdb/templates/admin/actions.html
+++ b/advlabdb/templates/admin/actions.html
@@ -1,27 +1,27 @@
 {% import 'admin/static.html' as admin_static with context %}
 
-{% macro dropdown(actions, btn_class='btn dropdown-toggle') -%}
-    <a class="{{ btn_class }}" data-toggle="dropdown" href="javascript:void(0)">{{ _gettext('With selected') }}<b class="caret"></b></a>
-    <ul class="dropdown-menu">
+{% macro dropdown(actions, btn_class='nav-link dropdown-toggle') -%}
+    <a class="{{ btn_class }}" data-toggle="dropdown" href="javascript:void(0)" role="button" aria-haspopup="true"
+       aria-expanded="false">{{ _gettext('With selected') }}<b class="caret"></b></a>
+    <div class="dropdown-menu">
         {% for p in actions %}
-        <li>
-            <a href="javascript:void(0)" onclick="return modelActions.execute('{{ p[0] }}');">{{ _gettext(p[1]) }}</a>
-        </li>
+            <a class="dropdown-item" href="javascript:void(0)"
+               onclick="return modelActions.execute('{{ p[0] }}');">{{ _gettext(p[1]) }}</a>
         {% endfor %}
-    </ul>
+    </div>
 {% endmacro %}
 
 {% macro form(actions, url) %}
     {% if actions %}
-    <form id="action_form" action="{{ url }}" method="POST" style="display: none">
-        {% if action_form.csrf_token %}
-        {{ action_form.csrf_token }}
-        {% elif csrf_token %}
-        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
-        {% endif %}
-        {{ action_form.url(value=return_url) }}
-        {{ action_form.action() }}
-    </form>
+        <form id="action_form" action="{{ url }}" method="POST" style="display: none">
+            {% if action_form.csrf_token %}
+                {{ action_form.csrf_token }}
+            {% elif csrf_token %}
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+            {% endif %}
+            {{ action_form.url(value=return_url) }}
+            {{ action_form.action() }}
+        </form>
     {% endif %}
 {% endmacro %}
 
diff --git a/advlabdb/templates/admin/base.html b/advlabdb/templates/admin/base.html
index 9aefc8b..d2ee49a 100644
--- a/advlabdb/templates/admin/base.html
+++ b/advlabdb/templates/admin/base.html
@@ -12,21 +12,22 @@
         <meta name="author" content="">
     {% endblock %}
     {% block head_css %}
-        <link href="{{ admin_static.url(filename='bootstrap/bootstrap3/swatch/{swatch}/bootstrap.min.css'.format(swatch=config.get('FLASK_ADMIN_SWATCH', 'default')), v='3.3.5') }}" rel="stylesheet">
-        {%if config.get('FLASK_ADMIN_SWATCH', 'default') == 'default' %}
-        <link href="{{ admin_static.url(filename='bootstrap/bootstrap3/css/bootstrap-theme.min.css', v='3.3.5') }}" rel="stylesheet">
-        {%endif%}
-        <link href="{{ admin_static.url(filename='admin/css/bootstrap3/admin.css', v='1.1.1') }}" rel="stylesheet">
-	<link href="{{ admin_static.url(filename='admin/css/bootstrap3/submenu.css') }}" rel="stylesheet">
+        <link href="{{ admin_static.url(filename='bootstrap/bootstrap4/swatch/{swatch}/bootstrap.min.css'.format(swatch=config.get('FLASK_ADMIN_SWATCH', 'default')), v='4.2.1') }}"
+              rel="stylesheet">
+        {% if config.get('FLASK_ADMIN_SWATCH', 'default') == 'default' %}
+        <link href="{{ admin_static.url(filename='bootstrap/bootstrap4/css/bootstrap.min.css', v='4.2.1') }}" rel="stylesheet">
+        {% endif %}
+        <link href="{{ admin_static.url(filename='admin/css/bootstrap4/admin.css', v='1.1.1') }}" rel="stylesheet">
+        <link href="{{ admin_static.url(filename='bootstrap/bootstrap4/css/font-awesome.min.css', v='4.7.0') }}" rel="stylesheet">
         {% if admin_view.extra_css %}
           {% for css_url in admin_view.extra_css %}
             <link href="{{ css_url }}" rel="stylesheet">
           {% endfor %}
         {% endif %}
         <style>
-        body {
-            padding-top: 4px;
-        }
+            .hide {
+                display: none;
+            }
         </style>
     {% endblock %}
     {% block head %}
@@ -34,63 +35,65 @@
     {% block head_tail %}
     {% endblock %}
   </head>
-  <body>
-    {% block page_body %}
-    <div class="container{%if config.get('FLASK_ADMIN_FLUID_LAYOUT', False) %}-fluid{% endif %}">
-      <nav class="navbar navbar-default" role="navigation">
-        <!-- Brand and toggle get grouped for better mobile display -->
-        <div class="navbar-header">
-          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#admin-navbar-collapse">
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-          {% block brand %}
-          <a class="navbar-brand" href="{{ admin_view.admin.url }}">{{ admin_view.admin.name }}</a>
-          {% endblock %}
-        </div>
-        <!-- navbar content -->
-        <div class="collapse navbar-collapse" id="admin-navbar-collapse">
-          {% block main_menu %}
-          <ul class="nav navbar-nav">
-            {{ layout.menu() }}
-          </ul>
-          {% endblock %}
+<body>
+{% block page_body %}
+    <div class="container{% if config.get('FLASK_ADMIN_FLUID_LAYOUT', False) %}-fluid{% endif %}">
+        <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-2" role="navigation">
+            <!-- Brand and toggle get grouped for better mobile display -->
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#admin-navbar-collapse"
+                    aria-controls="admin-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <!-- navbar content -->
+            <div class="collapse navbar-collapse" id="admin-navbar-collapse">
+            {% block brand %}
+                <a class="navbar-brand" href="{{ admin_view.admin.url }}">{{ admin_view.admin.name }}</a>
+            {% endblock %}
+            {% block main_menu %}
+                <ul class="nav navbar-nav mr-auto">
+                    {{ layout.menu() }}
+                </ul>
+            {% endblock %}
 
-          {% block menu_links %}
-          <ul class="nav navbar-nav navbar-right">
-            {{ layout.menu_links() }}
-          </ul>
-          {% endblock %}
-          {% block access_control %}
-          {% endblock %}
-        </div>
-      </nav>
+                {% block menu_links %}
+                <ul class="nav navbar-nav navbar-right">
+                    {{ layout.menu_links() }}
+                </ul>
+                {% endblock %}
+            {% block access_control %}
+            {% endblock %}
+            </div>
+        </nav>
 
-      {% block messages %}
-      {{ layout.messages() }}
-      {% endblock %}
+        {% block messages %}
+            {{ layout.messages() }}
+        {% endblock %}
 
-      {# store the jinja2 context for form_rules rendering logic #}
-      {% set render_ctx = h.resolve_ctx() %}
+        {# store the jinja2 context for form_rules rendering logic #}
+        {% set render_ctx = h.resolve_ctx() %}
 
-      {% block body %}{% endblock %}
+        {% block body %}{% endblock %}
     </div>
-    {% endblock %}
+{% endblock %}
 
-    {% block tail_js %}
+{% block tail_js %}
     <script src="{{ admin_static.url(filename='vendor/jquery.min.js', v='3.5.1') }}" type="text/javascript"></script>
-    <script src="{{ admin_static.url(filename='bootstrap/bootstrap3/js/bootstrap.min.js', v='3.3.5') }}" type="text/javascript"></script>
-    <script src="{{ admin_static.url(filename='vendor/moment.min.js', v='2.22.2') }}" type="text/javascript"></script>
-    <script src="{{ admin_static.url(filename='vendor/select2/select2.min.js', v='3.5.2') }}" type="text/javascript"></script>
+    <script src="{{ admin_static.url(filename='bootstrap/bootstrap4/js/popper.min.js') }}" type="text/javascript"></script>
+    <script src="{{ admin_static.url(filename='bootstrap/bootstrap4/js/bootstrap.min.js', v='4.2.1') }}"
+            type="text/javascript"></script>
+    <script src="{{ admin_static.url(filename='vendor/moment.min.js', v='2.9.0') }}" type="text/javascript"></script>
+    <script src="{{ admin_static.url(filename='vendor/bootstrap4/util.js', v='4.3.1') }}" type="text/javascript"></script>
+    <script src="{{ admin_static.url(filename='vendor/bootstrap4/dropdown.js', v='4.3.1') }}" type="text/javascript"></script>
+    <script src="{{ admin_static.url(filename='vendor/select2/select2.min.js', v='4.2.1') }}"
+            type="text/javascript"></script>
+    <script src="{{ admin_static.url(filename='vendor/multi-level-dropdowns-bootstrap/bootstrap4-dropdown-ml-hack.js') }}" type="text/javascript"></script>
     <script src="{{ admin_static.url(filename='admin/js/helpers.js', v='1.0.0') }}" type="text/javascript"></script>
     {% if admin_view.extra_js %}
-      {% for js_url in admin_view.extra_js %}
-        <script src="{{ js_url }}" type="text/javascript"></script>
-      {% endfor %}
+        {% for js_url in admin_view.extra_js %}
+            <script src="{{ js_url }}" type="text/javascript"></script>
+        {% endfor %}
     {% endif %}
-    {% endblock %}
+{% endblock %}
 
     {% block tail %}
     {% endblock %}
diff --git a/advlabdb/templates/admin/file/list.html b/advlabdb/templates/admin/file/list.html
index 1fb093e..bd9f345 100644
--- a/advlabdb/templates/admin/file/list.html
+++ b/advlabdb/templates/admin/file/list.html
@@ -4,21 +4,23 @@
 
 {% block body %}
     {% block breadcrums %}
-    <ul class="breadcrumb">
-        <li>
+      <nav area-label="breadcrumb">
+        <ol class="breadcrumb">
+          <li class="breadcrumb-item">
             <a href="{{ get_dir_url('.index_view', path=None) }}">{{ _gettext('Root') }}</a>
-        </li>
-        {% for name, path in breadcrumbs[:-1] %}
-        <li>
+          </li>
+          {% for name, path in breadcrumbs[:-1] %}
+          <li class="breadcrumb-item">
             <a href="{{ get_dir_url('.index_view', path=path) }}">{{ name }}</a>
-        </li>
-        {% endfor %}
-        {% if breadcrumbs %}
-        <li>
+          </li>
+          {% endfor %}
+          {% if breadcrumbs %}
+          <li class="breadcrumb-item">
             <a href="{{ get_dir_url('.index_view', path=breadcrumbs[-1][1]) }}">{{ breadcrumbs[-1][0] }}</a>
-        </li>
+          </li>
         {% endif %}
-    </ul>
+        </ol>
+      </nav>
     {% endblock %}
 
     {% block file_list_table %}
@@ -32,7 +34,7 @@
                     <input type="checkbox" name="rowtoggle" class="action-rowtoggle" />
                 </th>
                 {% endif %}
-                <th class="col-md-1">&nbsp;</th>
+                <th class="">&nbsp;</th>
                 {% for column in admin_view.column_list %}
                 <th>
                     {% if admin_view.is_column_sortable(column) %}
@@ -84,11 +86,7 @@
                         {% if name != '..' and admin_view.can_delete_dirs %}
                         <form class="icon" method="POST" action="{{ get_url('.delete') }}">
                             {{ delete_form.path(value=path) }}
-                            {% if delete_form.csrf_token %}
-                                {{ delete_form.csrf_token }}
-                            {% elif csrf_token %}
-                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
-                                {% endif %}
+                            {{ delete_form.csrf_token }}
                             <button onclick="return confirm('{{ _gettext('Are you sure you want to delete \\\'%(name)s\\\' recursively?', name=name) }}')">
                                 <i class="fa fa-times glyphicon glyphicon-remove"></i>
                             </button>
@@ -97,11 +95,7 @@
                     {% else %}
                     <form class="icon" method="POST" action="{{ get_url('.delete') }}">
                         {{ delete_form.path(value=path) }}
-                            {% if delete_form.csrf_token %}
-                                {{ delete_form.csrf_token }}
-                            {% elif csrf_token %}
-                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
-                                {% endif %}
+                        {{ delete_form.csrf_token }}
                         <button onclick="return confirm('{{ _gettext('Are you sure you want to delete \\\'%(name)s\\\'?', name=name) }}')">
                             <i class="fa fa-trash glyphicon glyphicon-trash"></i>
                         </button>
@@ -152,27 +146,27 @@
         <div class="btn-group">
             {%- if admin_view.upload_modal -%}
               {{ lib.add_modal_button(url=get_dir_url('.upload', path=dir_path, modal=True),
-                                      btn_class="btn btn-default btn-large",
+                                      btn_class="btn btn-secondary",
                                       content=_gettext('Upload File')) }}
             {% else %}
-              <a class="btn btn-default btn-large" href="{{ get_dir_url('.upload', path=dir_path) }}">{{ _gettext('Upload File') }}</a>
+              <a class="btn btn-secondary" href="{{ get_dir_url('.upload', path=dir_path) }}">{{ _gettext('Upload File') }}</a>
             {%- endif -%}
         </div>
         {% endif %}
         {% if admin_view.can_mkdir %}
-        <div class="btn-group">
+        <div class="mx-1">
             {%- if admin_view.mkdir_modal -%}
               {{ lib.add_modal_button(url=get_dir_url('.mkdir', path=dir_path, modal=True),
-                                      btn_class="btn btn-default btn-large",
+                                      btn_class="btn btn-secondary",
                                       content=_gettext('Create Directory')) }}
             {% else %}
-              <a class="btn btn-default btn-large" href="{{ get_dir_url('.mkdir', path=dir_path) }}">{{ _gettext('Create Directory') }}</a>
+              <a class="btn btn-secondary" href="{{ get_dir_url('.mkdir', path=dir_path) }}">{{ _gettext('Create Directory') }}</a>
             {%- endif -%}
         </div>
         {% endif %}
         {% if actions %}
-        <div class="btn-group">
-            {{ actionslib.dropdown(actions, 'dropdown-toggle btn btn-default btn-large') }}
+        <div class="mx-1">
+            {{ actionslib.dropdown(actions, 'dropdown-toggle btn btn-secondary') }}
         </div>
         {% endif %}
     </div>
@@ -193,4 +187,5 @@
     {{ actionslib.script(_gettext('Please select at least one file.'),
                          actions,
                          actions_confirmation) }}
+  <script src="{{ admin_static.url(filename='admin/js/bs4_modal.js', v='1.0.0') }}"></script>
 {% endblock %}
diff --git a/advlabdb/templates/admin/file/modals/form.html b/advlabdb/templates/admin/file/modals/form.html
index 68d2f87..eebc699 100644
--- a/advlabdb/templates/admin/file/modals/form.html
+++ b/advlabdb/templates/admin/file/modals/form.html
@@ -4,8 +4,8 @@
 {% block body %}
   {# content added to modal-content #}
   <div class="modal-header">
-    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
     {% block header %}<h3>{{ header_text }}</h3>{% endblock %}
+    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
   </div>
   <div class="modal-body">
     {% block fa_form %}
@@ -15,5 +15,5 @@
 {% endblock %}
 
 {% block tail %}
-  <script src="{{ admin_static.url(filename='admin/js/bs3_modal.js', v='1.0.0') }}"></script>
+  <script src="{{ admin_static.url(filename='admin/js/bs4_modal.js', v='1.0.0') }}"></script>
 {% endblock %}
diff --git a/advlabdb/templates/admin/layout.html b/advlabdb/templates/admin/layout.html
index a2f63ea..0ffb212 100644
--- a/advlabdb/templates/admin/layout.html
+++ b/advlabdb/templates/admin/layout.html
@@ -1,20 +1,21 @@
 {% macro menu_icon(item) -%}
-{% set icon_type = item.get_icon_type() %}
-{%- if icon_type %}
-  {% set icon_value = item.get_icon_value() %}
-  {% if icon_type == 'glyph' %}
-    <i class="glyphicon {{ icon_value }}"></i>
-  {% elif icon_type == 'fa' %}
-    <i class="fa {{ icon_value }}"></i>
-  {% elif icon_type == 'image' %}
-    <img src="{{ url_for('static', filename=icon_value) }}" alt="menu image">
-  {% elif icon_type == 'image-url' %}
-    <img src="{{ icon_value }}" alt="menu image">
+  {% set icon_type = item.get_icon_type() %}
+  {%- if icon_type %}
+    {% set icon_value = item.get_icon_value() %}
+    {% if icon_type == 'glyph' %}
+      <i class="glyphicon {{ icon_value }}"></i>
+    {% elif icon_type == 'fa' %}
+      <i class="fa {{ icon_value }}"></i>
+    {% elif icon_type == 'image' %}
+      <img src="{{ url_for('static', filename=icon_value) }}" alt="menu image">
+    {% elif icon_type == 'image-url' %}
+      <img src="{{ icon_value }}" alt="menu image">
+    {% endif %}
   {% endif %}
-{% endif %}
 {%- endmacro %}
 
 {% macro menu(menu_root=None) %}
+  {% set is_main_nav = menu_root == None %}
   {% if menu_root is none %}{% set menu_root = admin_view.admin.menu() %}{% endif %}
   {%- for item in menu_root %}
     {%- if item.is_category() -%}
@@ -22,49 +23,52 @@
       {%- if children %}
         {% set class_name = item.get_class_name() or '' %}
         {%- if item.is_active(admin_view) %}
-        <li class="active dropdown{% if class_name %} {{class_name}}{% endif %}">
-        {% else -%}
-        <li class="dropdown{% if class_name %} {{class_name}}{% endif %}">
+          <li class="active dropdown{% if class_name %} {{ class_name }}{% endif %}">
+            {% else -%}
+          <li class="dropdown{% if class_name %} {{ class_name }}{% endif %}">
         {%- endif %}
-          <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
-            {% if item.class_name %}<span class="{{ item.class_name }}"></span> {% endif %}
-            {{ menu_icon(item) }}{{ item.name }}
-            {%- if 'dropdown-submenu' in class_name -%}
-            <i class="glyphicon glyphicon-chevron-right small"></i>
-            {%- else -%}
-            <i class="glyphicon glyphicon-chevron-down small"></i>
-            {%- endif -%}
-          </a>
-          <ul class="dropdown-menu">
-          {%- for child in children -%}
-            {%- if child.is_category() -%}
-              {{ menu(menu_root=[child]) }}
-            {% else %}
-              {% set class_name = child.get_class_name() %}
+      <a class="dropdown-toggle {% if is_main_nav %}nav-link{% else %}dropdown-item{% endif %}" data-toggle="dropdown" href="javascript:void(0)">
+        {% if item.class_name %}<span class="{{ item.class_name }}"></span> {% endif %}
+        {{ menu_icon(item) }}{{ item.name }}
+        {%- if 'dropdown-submenu' in class_name -%}
+          <i class="glyphicon glyphicon-chevron-right small"></i>
+        {%- else -%}
+          <i class="glyphicon glyphicon-chevron-down small"></i>
+        {%- endif -%}
+      </a>
+      <ul class="dropdown-menu">
+        {%- for child in children -%}
+          {%- if child.is_category() -%}
+            {{ menu(menu_root=[child]) }}
+          {% else %}
+            {% set class_name = child.get_class_name() %}
+            <li{% if class_name %} class="{{ class_name }}"{% endif %}>
               {%- if child.is_active(admin_view) %}
-              <li class="active{% if class_name %} {{class_name}}{% endif %}">
+                <a class="dropdown-item active" href="{{ child.get_url() }}"{% if child.target %}
+                   target="{{ child.target }}"{% endif %}>
+                  {{ menu_icon(child) }}{{ child.name }}</a>
               {% else %}
-              <li{% if class_name %} class="{{class_name}}"{% endif %}>
+                <a class="dropdown-item" href="{{ child.get_url() }}"{% if child.target %}
+                   target="{{ child.target }}"{% endif %}>
+                  {{ menu_icon(child) }}{{ child.name }}</a>
               {%- endif %}
-              <a href="{{ child.get_url() }}"{% if child.target %}
-               target="{{ child.target }}"{% endif %}>
-              {{ menu_icon(child) }}{{ child.name }}</a>
-              </li>
-            {%- endif %}
-          {%- endfor %}
-          </ul>
-        </li>
+            </li>
+          {%- endif %}
+        {%- endfor %}
+      </ul>
+      </li>
       {% endif %}
     {%- else %}
       {%- if item.is_accessible() and item.is_visible() -%}
         {% set class_name = item.get_class_name() %}
         {%- if item.is_active(admin_view) %}
-        <li class="active{% if class_name %} {{class_name}}{% endif %}">
-        {%- else %}
-        <li{% if class_name %} class="{{class_name}}"{% endif %}>
+          <li class="active{% if class_name %} {{ class_name }}{% endif %}">
+            {%- else %}
+          <li{% if class_name %} class="{{ class_name }}"{% endif %}>
         {%- endif %}
-          <a href="{{ item.get_url() }}"{% if item.target %} target="{{ item.target }}"{% endif %}>{{ menu_icon(item) }}{{ item.name }}</a>
-        </li>
+      <a class="nav-link" href="{{ item.get_url() }}"{% if item.target %} target="{{ item.target }}"{% endif %}>
+        {{ menu_icon(item) }}{{ item.name }}</a>
+      </li>
       {%- endif -%}
     {% endif -%}
   {% endfor %}
@@ -76,7 +80,8 @@
     {% set class_name = item.get_class_name() %}
     {% if item.is_accessible() and item.is_visible() %}
       <li{% if class_name %} class="{{ class_name }}"{% endif %}>
-        <a href="{{ item.get_url() }}">{{ menu_icon(item) }}{{ item.name }}</a>
+        <a class="nav-link" href="{{ item.get_url() }}"{% if item.target %} target="{{ item.target }}"{% endif %}>
+          {{ menu_icon(item) }}{{ item.name }}</a>
       </li>
     {% endif %}
   {% endfor %}
@@ -87,15 +92,15 @@
     {% if messages %}
       {% for category, m in messages %}
         {% if category %}
-        {# alert-error changed to alert-danger in bootstrap 3, mapping is for backwards compatibility #}
-        {% set mapping = {'message': 'info', 'error': 'danger'} %}
-        <div class="alert alert-{{ mapping.get(category, category) }} alert-dismissable">
+          {# alert-error changed to alert-danger in bootstrap 3, mapping is for backwards compatibility #}
+          {% set mapping = {'message': 'info', 'error': 'danger'} %}
+          <div class="alert alert-{{ mapping.get(category, category) }} alert-dismissable">
         {% else %}
-        <div class="alert alert-dismissable">
+          <div class="alert alert-dismissable">
         {% endif %}
-          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-          {{ m }}
-        </div>
+      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+      {{ m }}
+      </div>
       {% endfor %}
     {% endif %}
   {% endwith %}
diff --git a/advlabdb/templates/admin/lib.html b/advlabdb/templates/admin/lib.html
index 6bfdb05..40db5bb 100644
--- a/advlabdb/templates/admin/lib.html
+++ b/advlabdb/templates/admin/lib.html
@@ -22,52 +22,52 @@
     {% endif %}
 
     {% if min > 0 %}
-    <li>
-        <a href="{{ generator(0) }}">&laquo;</a>
+    <li class="page-item">
+        <a class="page-link" href="{{ generator(0) }}">&laquo;</a>
     </li>
     {% else %}
-    <li class="disabled">
-        <a href="javascript:void(0)">&laquo;</a>
+    <li class="page-item disabled">
+        <a class="page-link" href="javascript:void(0)">&laquo;</a>
     </li>
     {% endif %}
     {% if page > 0 %}
-    <li>
-        <a href="{{ generator(page-1) }}">&lt;</a>
+    <li class="page-item">
+        <a class="page-link" href="{{ generator(page-1) }}">&lt;</a>
     </li>
     {% else %}
-    <li class="disabled">
-        <a href="javascript:void(0)">&lt;</a>
+    <li class="page-item disabled">
+        <a class="page-link" href="javascript:void(0)">&lt;</a>
     </li>
     {% endif %}
 
     {% for p in range(min, max) %}
     {% if page == p %}
-    <li class="active">
-        <a href="javascript:void(0)">{{ p + 1 }}</a>
+    <li class="page-item active">
+        <a class="page-link" href="javascript:void(0)">{{ p + 1 }}</a>
     </li>
     {% else %}
-    <li>
-        <a href="{{ generator(p) }}">{{ p + 1 }}</a>
+    <li class="page-item">
+        <a class="page-link" href="{{ generator(p) }}">{{ p + 1 }}</a>
     </li>
     {% endif %}
     {% endfor %}
 
     {% if page + 1 < pages %}
-    <li>
-        <a href="{{ generator(page + 1) }}">&gt;</a>
+    <li class="page-item">
+        <a class="page-link" href="{{ generator(page + 1) }}">&gt;</a>
     </li>
     {% else %}
-    <li class="disabled">
-        <a href="javascript:void(0)">&gt;</a>
+    <li class="page-item disabled">
+        <a class="page-link" href="javascript:void(0)">&gt;</a>
     </li>
     {% endif %}
     {% if max < pages %}
-    <li>
-        <a href="{{ generator(pages - 1) }}">&raquo;</a>
+    <li class="page-item">
+        <a class="page-link" href="{{ generator(pages - 1) }}">&raquo;</a>
     </li>
     {% else %}
-    <li class="disabled">
-        <a href="javascript:void(0)">&raquo;</a>
+    <li class="page-item disabled">
+        <a class="page-link" href="javascript:void(0)">&raquo;</a>
     </li>
     {% endif %}
 </ul>
@@ -77,20 +77,20 @@
 {% macro simple_pager(page, have_next, generator) -%}
 <ul class="pagination">
   {% if page > 0 %}
-  <li>
+  <li class="page-item">
       <a href="{{ generator(page - 1) }}">&lt;</a>
   </li>
   {% else %}
-  <li class="disabled">
+  <li class="page-item disabled">
       <a href="{{ generator(0) }}">&lt;</a>
   </li>
   {% endif %}
   {% if have_next %}
-  <li>
+  <li class="page-item">
       <a href="{{ generator(page + 1) }}">&gt;</a>
   </li>
   {% else %}
-  <li class="disabled">
+  <li class="page-item disabled">
       <a href="{{ generator(page) }}">&gt;</a>
   </li>
   {% endif %}
@@ -100,7 +100,7 @@
 {# ---------------------- Modal Window ------------------- #}
 {% macro add_modal_window(modal_window_id='fa_modal_window', modal_label_id='fa_modal_label') %}
   <div class="modal fade" id="{{ modal_window_id }}" tabindex="-1" role="dialog" aria-labelledby="{{ modal_label_id }}">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-xl" role="document">
       {# bootstrap version > 3.1.0 required for this to work #}
       <div class="modal-content">
       </div>
@@ -117,28 +117,52 @@
 {# ---------------------- Forms -------------------------- #}
 {% macro render_field(form, field, kwargs={}, caller=None) %}
   {% set direct_error = h.is_field_error(field.errors) %}
-  <div class="form-group{{ ' has-error' if direct_error else '' }}">
-    <label for="{{ field.id }}" class="col-md-2 control-label">{{ field.label.text }}
+  {% set prepend = kwargs.pop('prepend', None) %}
+  {% set append = kwargs.pop('append', None) %}
+  <div class="form-group {{ kwargs.get('column_class', '') }}">
+    <label for="{{ field.id }}" class="control-label" {% if field.widget.input_type == 'checkbox' %}style="display: block"{% endif %}>{{ field.label.text }}
         {% if h.is_required_form_field(field) %}
           <strong style="color: red">&#42;</strong>
         {%- else -%}
           &nbsp;
         {%- endif %}
     </label>
-    <div class="{{ kwargs.get('column_class', 'col-md-10') }}">
-      {% set _dummy = kwargs.setdefault('class', 'form-control') %}
-      {{ field(**kwargs)|safe }}
-      {% if field.description %}
-      <p class="help-block">{{ field.description|safe }}</p>
+    {% if prepend or append %}
+    <div class="input-group">
+      {%- if prepend -%}
+      <div class="input-group-prepend">
+        {{ prepend }}
+      </div>
+      {%- endif -%}
+    {% endif %}
+      {% if field.widget.input_type == 'checkbox' %}
+        {% set _class = kwargs.setdefault('class', 'form-control-lg') %}
+      {% elif field.widget.input_type == 'file' %}
+        {% set _class = kwargs.setdefault('class', 'form-control-file') %}
+      {% else %}
+        {% set _class = kwargs.setdefault('class', 'form-control') %}
       {% endif %}
+      {%- if direct_error %} {% set _ = kwargs.update({'class': kwargs['class'] ~ ' is-invalid'}) %} {% endif -%}
+      {{ field(**kwargs) | safe }}
+      {%- if append -%}
+      <div class="input-group-append">
+        {{ append }}
+      </div>
+      {%- endif -%}
       {% if direct_error %}
-        <ul class="help-block input-errors">
-        {% for e in field.errors if e is string %}
-          <li>{{ e }}</li>
-        {% endfor %}
-        </ul>
+        <div class="invalid-feedback">
+          <ul class="help-block">
+          {% for e in field.errors if e is string %}
+            <li>{{ e }}</li>
+          {% endfor %}
+          </ul>
+        </div>
+      {% elif field.description %}
+        <div class="help-block">{{ field.description|safe }}</div>
       {% endif %}
+    {% if prepend or append %}
     </div>
+    {% endif %}
     {% if caller %}
       {{ caller(form, field, direct_error, kwargs) }}
     {% endif %}
@@ -178,12 +202,23 @@
 {% endmacro %}
 
 {% macro form_tag(form=None, action=None) %}
-    <form action="{{ action or '' }}" method="POST" role="form" class="admin-form form-horizontal" enctype="multipart/form-data">
+    <form action="{{ action or '' }}" method="POST" role="form" class="admin-form" enctype="multipart/form-data">
+    <fieldset>
       {{ caller() }}
+    </fieldset>
     </form>
 {% endmacro %}
 
 {% macro render_form_buttons(cancel_url, extra=None, is_modal=False) %}
+  {% if is_modal %}
+        <input type="submit" class="btn btn-primary" value="{{ _gettext('Save') }}" />
+        {% if extra %}
+        {{ extra }}
+        {% endif %}
+        {% if cancel_url %}
+          <a href="{{ cancel_url }}" class="btn btn-danger" role="button" {% if is_modal %}data-dismiss="modal"{% endif %}>{{ _gettext('Cancel') }}</a>
+        {% endif %}
+  {% else %}
     <hr>
     <div class="form-group">
       <div class="col-md-offset-2 col-md-10 submit-row">
@@ -196,6 +231,7 @@
         {% endif %}
       </div>
     </div>
+  {% endif %}
 {% endmacro %}
 
 {% macro render_form(form, cancel_url, extra=None, form_opts=None, action=None, is_modal=False) -%}
@@ -206,15 +242,15 @@
 {% endmacro %}
 
 {% macro form_css() %}
-  <link href="{{ admin_static.url(filename='vendor/select2/select2.css', v='3.5.2') }}" rel="stylesheet">
-  <link href="{{ admin_static.url(filename='vendor/select2/select2-bootstrap3.css', v='1.4.6') }}" rel="stylesheet">
-  <link href="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker-bs3.css', v='1.3.22') }}" rel="stylesheet">
+  <link href="{{ admin_static.url(filename='vendor/select2/select2.css', v='4.2.1') }}" rel="stylesheet">
+  <link href="{{ admin_static.url(filename='vendor/select2/select2-bootstrap4.css', v='1.4.6') }}" rel="stylesheet">
+  <link href="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker-bs4.css', v='1.3.22') }}" rel="stylesheet">
   {% if config.MAPBOX_MAP_ID %}
   <link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.css', v='1.0.2') }}" rel="stylesheet">
   <link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.css', v='0.4.6') }}" rel="stylesheet">
   {% endif %}
   {% if editable_columns %}
-  <link href="{{ admin_static.url(filename='vendor/x-editable/css/bootstrap3-editable.css', v='1.5.1.1') }}" rel="stylesheet">
+  <link href="{{ admin_static.url(filename='vendor/x-editable/css/bootstrap4-editable.css', v='1.5.1.1') }}" rel="stylesheet">
   {% endif %}
 {% endmacro %}
 
@@ -241,16 +277,16 @@
   {% endif %}
   <script src="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker.js', v='1.3.22') }}"></script>
   {% if editable_columns %}
-  <script src="{{ admin_static.url(filename='vendor/x-editable/js/bootstrap3-editable.min.js', v='1.5.1.1') }}"></script>
+  <script src="{{ admin_static.url(filename='vendor/x-editable/js/bootstrap4-editable.min.js', v='1.5.1.1') }}"></script>
   {% endif %}
   <script src="{{ admin_static.url(filename='admin/js/form.js', v='1.0.1') }}"></script>
 {% endmacro %}
 
 {% macro extra() %}
   {% if admin_view.can_create %}
-  <input name="_add_another" type="submit" class="btn btn-default" value="{{ _gettext('Save and Add Another') }}" />
+  <input name="_add_another" type="submit" class="btn btn-secondary" value="{{ _gettext('Save and Add Another') }}" />
   {% endif %}
   {% if admin_view.can_edit %}
-  <input name="_continue_editing" type="submit" class="btn btn-default" value="{{ _gettext('Save and Continue Editing') }}" />
+  <input name="_continue_editing" type="submit" class="btn btn-secondary" value="{{ _gettext('Save and Continue Editing') }}" />
   {% endif %}
 {% endmacro %}
diff --git a/advlabdb/templates/admin/model/create.html b/advlabdb/templates/admin/model/create.html
index 9e0834e..1620f24 100644
--- a/advlabdb/templates/admin/model/create.html
+++ b/advlabdb/templates/admin/model/create.html
@@ -10,11 +10,11 @@
 {% block body %}
   {% block navlinks %}
   <ul class="nav nav-tabs">
-    <li>
-        <a href="{{ return_url }}">{{ _gettext('List') }}</a>
+    <li class="nav-item">
+        <a href="{{ return_url }}" class="nav-link">{{ _gettext('List') }}</a>
     </li>
-    <li class="active">
-        <a href="javascript:void(0)">{{ _gettext('Create') }}</a>
+    <li class="nav-item">
+        <a href="javascript:void(0)" class="nav-link active">{{ _gettext('Create') }}</a>
     </li>
   </ul>
   {% endblock %}
diff --git a/advlabdb/templates/admin/model/details.html b/advlabdb/templates/admin/model/details.html
index 0008c5a..f4017e3 100644
--- a/advlabdb/templates/admin/model/details.html
+++ b/advlabdb/templates/admin/model/details.html
@@ -4,29 +4,29 @@
 {% block body %}
   {% block navlinks %}
   <ul class="nav nav-tabs">
-    <li>
-        <a href="{{ return_url }}">{{ _gettext('List') }}</a>
+    <li class="nav-item">
+        <a class="nav-link" href="{{ return_url }}">{{ _gettext('List') }}</a>
     </li>
     {%- if admin_view.can_create -%}
-    <li>
-        <a href="{{ get_url('.create_view', url=return_url) }}">{{ _gettext('Create') }}</a>
+    <li class="nav-item">
+        <a class="nav-link" href="{{ get_url('.create_view', url=return_url) }}">{{ _gettext('Create') }}</a>
     </li>
     {%- endif -%}
     {%- if admin_view.can_edit -%}
-    <li>
-        <a href="{{ get_url('.edit_view', id=request.args.get('id'), url=return_url) }}">{{ _gettext('Edit') }}</a>
+    <li class="nav-item">
+        <a class="nav-link" href="{{ get_url('.edit_view', id=request.args.get('id'), url=return_url) }}">{{ _gettext('Edit') }}</a>
     </li>
     {%- endif -%}
-    <li class="active">
-        <a href="javascript:void(0)">{{ _gettext('Details') }}</a>
+    <li class="nav-item">
+        <a class="nav-link active disabled" href="javascript:void(0)">{{ _gettext('Details') }}</a>
     </li>
   </ul>
   {% endblock %}
 
   {% block details_search %}
-    <div class="input-group fa_filter_container col-lg-6">
-      <span class="input-group-addon">{{ _gettext('Filter') }}</span>
-      <input id="fa_filter" type="text" class="form-control">
+    <div class="form-inline fa_filter_container col-lg-6">
+      <label for="fa_filter">{{ _gettext('Filter') }}</label>
+      <input id="fa_filter" type="text" class="ml-3 form-control">
     </div>
   {% endblock %}
 
diff --git a/advlabdb/templates/admin/model/edit.html b/advlabdb/templates/admin/model/edit.html
index 5bd4099..c5631a8 100644
--- a/advlabdb/templates/admin/model/edit.html
+++ b/advlabdb/templates/admin/model/edit.html
@@ -10,20 +10,20 @@
 {% block body %}
   {% block navlinks %}
   <ul class="nav nav-tabs">
-    <li>
-        <a href="{{ return_url }}">{{ _gettext('List') }}</a>
+    <li class="nav-item">
+        <a href="{{ return_url }}" class="nav-link">{{ _gettext('List') }}</a>
     </li>
     {%- if admin_view.can_create -%}
-    <li>
-        <a href="{{ get_url('.create_view', url=return_url) }}">{{ _gettext('Create') }}</a>
+    <li class="nav-item">
+        <a href="{{ get_url('.create_view', url=return_url) }}" class="nav-link">{{ _gettext('Create') }}</a>
     </li>
     {%- endif -%}
-    <li class="active">
-        <a href="javascript:void(0)">{{ _gettext('Edit') }}</a>
+    <li class="nav-item">
+        <a href="javascript:void(0)" class="nav-link active">{{ _gettext('Edit') }}</a>
     </li>
     {%- if admin_view.can_view_details -%}
-    <li>
-        <a href="{{ get_url('.details_view', id=request.args.get('id'), url=return_url) }}">{{ _gettext('Details') }}</a>
+    <li class="nav-item">
+        <a class="nav-link" href="{{ get_url('.details_view', id=request.args.get('id'), url=return_url) }}">{{ _gettext('Details') }}</a>
     </li>
     {%- endif -%}
   </ul>
diff --git a/advlabdb/templates/admin/model/inline_list_base.html b/advlabdb/templates/admin/model/inline_list_base.html
index 79a93db..3f84c14 100644
--- a/advlabdb/templates/admin/model/inline_list_base.html
+++ b/advlabdb/templates/admin/model/inline_list_base.html
@@ -3,7 +3,7 @@
     {# existing inline form fields #}
     <div class="inline-field-list">
         {% for subfield in field %}
-        <div id="{{ subfield.id }}" class="inline-field well well-sm">
+        <div id="{{ subfield.id }}" class="inline-field card card-body bg-light">
             {%- if not check or check(subfield) %}
             <legend>
                 <small>
@@ -28,7 +28,7 @@
     {# template for new inline form fields #}
     <div class="inline-field-template hide">
         {% filter forceescape %}
-        <div class="inline-field well well-sm">
+        <div class="inline-field card card-body bg-light">
             <legend>
                 <small>{{ _gettext('New') }} {{ field.label.text }}</small>
                 <div class="pull-right">
@@ -40,6 +40,6 @@
         </div>
         {% endfilter %}
     </div>
-    <a id="{{ field.id }}-button" href="javascript:void(0)" class="btn btn-default" onclick="faForm.addInlineField(this, '{{ field.id }}');">{{ _gettext('Add') }} {{ field.label.text }}</a>
+    <a id="{{ field.id }}-button" href="javascript:void(0)" class="btn btn-primary" role="button" onclick="faForm.addInlineField(this, '{{ field.id }}');">{{ _gettext('Add') }} {{ field.label.text }}</a>
 </div>
 {% endmacro %}
diff --git a/advlabdb/templates/admin/model/layout.html b/advlabdb/templates/admin/model/layout.html
index 792eb5b..3766701 100644
--- a/advlabdb/templates/admin/model/layout.html
+++ b/advlabdb/templates/admin/model/layout.html
@@ -1,58 +1,51 @@
 {% macro filter_options(btn_class='dropdown-toggle') %}
-    <a class="{{ btn_class }}" data-toggle="dropdown" href="javascript:void(0)">
-        {{ _gettext('Add Filter') }}<b class="caret"></b>
-    </a>
-    <ul class="dropdown-menu field-filters">
+    <a class="nav-link {{ btn_class }}" data-toggle="dropdown" href="javascript:void(0)">{{ _gettext('Add Filter') }}<b class="caret"></b></a>
+    <div class="dropdown-menu field-filters">
         {% for k in filter_groups %}
-        <li>
-            <a href="javascript:void(0)" class="filter" onclick="return false;">{{ k }}</a>
-        </li>
+            <a href="javascript:void(0)" class="dropdown-item filter" onclick="return false;">{{ k }}</a>
         {% endfor %}
-    </ul>
+    </div>
 {% endmacro %}
 
 {% macro export_options(btn_class='dropdown-toggle') %}
     {% if admin_view.export_types|length > 1 %}
-    <li class="dropdown">
-        <a class="{{ btn_class }}" data-toggle="dropdown" href="javascript:void(0)">
-            {{ _gettext('Export') }}<b class="caret"></b>
-        </a>
-        <ul class="dropdown-menu field-filters">
-            {% for export_type in admin_view.export_types %}
-            <li>
-                <a href="{{ get_url('.export', export_type=export_type, **request.args) }}" title="{{ _gettext('Export') }}">{{ _gettext('Export') + ' ' + export_type|upper }}</a>
-            </li>
-            {% endfor %}
-        </ul>
-    </li>
+        <li class="dropdown">
+            <a class="nav-link {{ btn_class }}" data-toggle="dropdown" href="javascript:void(0)" role="button"
+               aria-haspopup="true" aria-expanded="false">{{ _gettext('Export') }}<b class="caret"></b></a>
+            <div class="dropdown-menu">
+                {% for export_type in admin_view.export_types %}
+                    <a class="dropdown-item"
+                       href="{{ get_url('.export', export_type=export_type, **request.args) }}"
+                       title="{{ _gettext('Export') }}">{{ _gettext('Export') + ' ' + export_type|upper }}</a>
+                {% endfor %}
+            </div>
+        </li>
     {% else %}
-    <li>
-        <a href="{{ get_url('.export', export_type=admin_view.export_types[0], **request.args) }}" title="{{ _gettext('Export') }}">{{ _gettext('Export') }}</a>
-    </li>
+        <li>
+            <a class="nav-link" href="{{ get_url('.export', export_type=admin_view.export_types[0], **request.args) }}"
+               title="{{ _gettext('Export') }}">{{ _gettext('Export') }}</a>
+        </li>
     {% endif %}
 {% endmacro %}
 
 {% macro filter_form() %}
     <form id="filter_form" method="GET" action="{{ return_url }}">
-        {% for arg_name, arg_value in extra_args.items() %}
-        <input type="hidden" name="{{ arg_name }}" value="{{ arg_value }}">
-        {% endfor %}
         {% if sort_column is not none %}
-        <input type="hidden" name="sort" value="{{ sort_column }}">
+            <input type="hidden" name="sort" value="{{ sort_column }}">
         {% endif %}
         {% if sort_desc %}
-        <input type="hidden" name="desc" value="{{ sort_desc }}">
+            <input type="hidden" name="desc" value="{{ sort_desc }}">
         {% endif %}
         {% if search %}
-        <input type="hidden" name="search" value="{{ search }}">
+            <input type="hidden" name="search" value="{{ search }}">
         {% endif %}
         {% if page_size != default_page_size %}
-        <input type="hidden" name="page_size" value="{{ page_size }}">
+            <input type="hidden" name="page_size" value="{{ page_size }}">
         {% endif %}
         <div class="pull-right">
             <button type="submit" class="btn btn-primary" style="display: none">{{ _gettext('Apply') }}</button>
             {% if active_filters %}
-            <a href="{{ clear_search_url }}" class="btn btn-default">{{ _gettext('Reset Filters') }}</a>
+                <a href="{{ clear_search_url }}" class="btn btn-secondary">{{ _gettext('Reset Filters') }}</a>
             {% endif %}
         </div>
 
@@ -61,47 +54,53 @@
     <div class="clearfix"></div>
 {% endmacro %}
 
-{% macro search_form(input_class=None) %}
-<form method="GET" action="{{ return_url }}" class="navbar-form navbar-left" role="search">
-    {% for flt_name, flt_value in filter_args.items() %}
-    <input type="hidden" name="{{ flt_name }}" value="{{ flt_value }}">
-    {% endfor %}
-    {% for arg_name, arg_value in extra_args.items() %}
-    <input type="hidden" name="{{ arg_name }}" value="{{ arg_value }}">
-    {% endfor %}
-    {% if page_size != default_page_size %}
-    <input type="hidden" name="page_size" value="{{ page_size }}">
-    {% endif %}
-    {% if sort_column is not none %}
-    <input type="hidden" name="sort" value="{{ sort_column }}">
-    {% endif %}
-    {% if sort_desc %}
-    <input type="hidden" name="desc" value="{{ sort_desc }}">
-    {% endif %}
-    {%- set full_search_placeholder = _gettext('Search') %}
-    {%- set max_size = config.get('FLASK_ADMIN_SEARCH_SIZE_MAX', 100) %}
-    {%- if search_placeholder %}{% set full_search_placeholder = [full_search_placeholder, search_placeholder] | join(": ") %}{% endif %}
-    {%- set input_size = [[full_search_placeholder | length, 30] | max, max_size] | min %}
-    {% if search %}
-    <div class="input-group">
-        <input type="search" name="search" value="{{ search }}" class="form-control{% if input_class %} {{ input_class }}{% endif %}" size="{{ input_size }}" placeholder="{{ full_search_placeholder }}">
-        <a href="{{ clear_search_url }}" class="input-group-addon clear"><span class="fa fa-times glyphicon glyphicon-remove"></span></a>
-    </div>
-    {% else %}
-    <div class="form-group">
-        <input type="search" name="search" value="" class="form-control{% if input_class %} {{ input_class }}{% endif %}" size="{{ input_size }}" placeholder="{{ full_search_placeholder }}">
-    </div>
-    {% endif %}
-</form>
+{% macro search_form(input_class="col-auto") %}
+    <form method="GET" action="{{ return_url }}" class="form-inline my-2 my-lg-0" role="search">
+        {% for flt_name, flt_value in filter_args.items() %}
+            <input type="hidden" name="{{ flt_name }}" value="{{ flt_value }}">
+        {% endfor %}
+        {% if page_size != default_page_size %}
+            <input type="hidden" name="page_size" value="{{ page_size }}">
+        {% endif %}
+        {% for arg_name, arg_value in extra_args.items() %}
+        <input type="hidden" name="{{ arg_name }}" value="{{ arg_value }}">
+        {% endfor %}
+        {% if sort_column is not none %}
+            <input type="hidden" name="sort" value="{{ sort_column }}">
+        {% endif %}
+        {% if sort_desc %}
+            <input type="hidden" name="desc" value="{{ sort_desc }}">
+        {% endif %}
+        {% if search %}
+            <div class="form-inline input-group">
+              <input  class="form-control {{ input_class }}" size="30" type="text" name="search" value="{{ search }}"
+                       placeholder="{{ _gettext('%(placeholder)s', placeholder=search_placeholder) }}">
+                <div class="input-group-append">
+                  <span class="input-group-text">
+                    <a href="{{ clear_search_url }}" class="align-middle">
+                      <span class="fa fa-times glyphicon glyphicon-remove"></span>
+                    </a>
+                  </span>
+                </div>
+                <button class="btn btn-secondary my-2 my-sm-0 ml-2" type="submit">{{ _gettext('Search') }}</button>
+            </div>
+        {% else %}
+            <div class="form-inline">
+              <input class="form-control {{ input_class }}" size="30" type="text" name="search" value=""
+                       placeholder="{{ _gettext('%(placeholder)s', placeholder=search_placeholder) }}">
+                <button class="btn btn-secondary my-2 my-sm-0 ml-2" type="submit">{{ _gettext('Search') }}</button>
+            </div>
+        {% endif %}
+    </form>
 {% endmacro %}
 
-{% macro page_size_form(generator, btn_class='dropdown-toggle') %}
+{% macro page_size_form(generator, btn_class='nav-link dropdown-toggle') %}
     <a class="{{ btn_class }}" data-toggle="dropdown" href="javascript:void(0)">
         {{ page_size }} {{ _gettext('items') }}<b class="caret"></b>
     </a>
-    <ul class="dropdown-menu">
-        <li><a href="{{ generator(20) }}">20 {{ _gettext('items') }}</a></li>
-        <li><a href="{{ generator(50) }}">50 {{ _gettext('items') }}</a></li>
-        <li><a href="{{ generator(100) }}">100 {{ _gettext('items') }}</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item{% if page_size == 20 %} active{% endif %}" href="{{ generator(20) }}">20 {{ _gettext('items') }}</a>
+      <a class="dropdown-item{% if page_size == 50 %} active{% endif %}" href="{{ generator(50) }}">50 {{ _gettext('items') }}</a>
+      <a class="dropdown-item{% if page_size == 100 %} active{% endif %}" href="{{ generator(100) }}">100 {{ _gettext('items') }}</a>
+    </div>
 {% endmacro %}
diff --git a/advlabdb/templates/admin/model/list.html b/advlabdb/templates/admin/model/list.html
index 08c1d57..b58a7e2 100755
--- a/advlabdb/templates/admin/model/list.html
+++ b/advlabdb/templates/admin/model/list.html
@@ -12,17 +12,17 @@
 
 {% block body %}
     {% block model_menu_bar %}
-    <ul class="nav nav-tabs actions-nav">
-        <li class="active">
-            <a href="javascript:void(0)">{{ _gettext('List') }}{% if count %} ({{ count }}){% endif %}</a>
+    <ul class="nav nav-tabs">
+        <li class="nav-item">
+            <a href="javascript:void(0)" class="nav-link active">{{ _gettext('List') }}{% if count %} ({{ count }}){% endif %}</a>
         </li>
 
         {% if admin_view.can_create %}
-        <li>
+        <li class="nav-item">
           {%- if admin_view.create_modal -%}
-            {{ lib.add_modal_button(url=get_url('.create_view', url=return_url, modal=True), title=_gettext('Create New Record'), content=_gettext('Create')) }}
+            {{ lib.add_modal_button(url=get_url('.create_view', url=return_url, modal=True), btn_class='nav-link', title=_gettext('Create New Record'), content=_gettext('Create')) }}
           {% else %}
-            <a href="{{ get_url('.create_view', url=return_url) }}" title="{{ _gettext('Create New Record') }}">{{ _gettext('Create') }}</a>
+            <a href="{{ get_url('.create_view', url=return_url) }}" title="{{ _gettext('Create New Record') }}" class="nav-link">{{ _gettext('Create') }}</a>
           {%- endif -%}
         </li>
         {% endif %}
@@ -34,25 +34,25 @@
         {% block model_menu_bar_before_filters %}{% endblock %}
 
         {% if filters %}
-        <li class="dropdown">
+        <li class="nav-item dropdown">
             {{ model_layout.filter_options() }}
         </li>
         {% endif %}
 
         {% if can_set_page_size %}
-        <li class="dropdown">
+        <li class="nav-item dropdown">
             {{ model_layout.page_size_form(page_size_url) }}
         </li>
         {% endif %}
 
         {% if actions %}
-        <li class="dropdown">
+        <li class="nav-item dropdown">
             {{ actionlib.dropdown(actions) }}
         </li>
         {% endif %}
 
         {% if search_supported %}
-        <li>
+        <li class="nav-item ml-2">
             {{ model_layout.search_form() }}
         </li>
         {% endif %}
@@ -78,7 +78,7 @@
                     {% endif %}
                     {% block list_row_actions_header %}
                         {% if admin_view.column_display_actions %}
-                        <th class="col-md-1">&nbsp;</th>
+                        <th class="">&nbsp;</th>
                         {% endif %}
                     {% endblock %}
                     {% for c, name in list_columns %}
@@ -187,9 +187,10 @@
       <div id="filter-groups-data" style="display:none;">{{ filter_groups|tojson|safe }}</div>
       <div id="active-filters-data" style="display:none;">{{ active_filters|tojson|safe }}</div>
     {% endif %}
-
     {{ lib.form_js() }}
-    <script src="{{ admin_static.url(filename='admin/js/filters.js', v='1.0.0') }}"></script>
+    <script src="{{ admin_static.url(filename='admin/js/bs4_modal.js', v='1.0.0') }}"></script>
+    <script src="{{ admin_static.url(filename='admin/js/bs4_filters.js', v='1.0.0') }}"></script>
+    
 
     {{ actionlib.script(_gettext('Please select at least one record.'),
                         actions,
diff --git a/advlabdb/templates/admin/model/modals/create.html b/advlabdb/templates/admin/model/modals/create.html
index abc1cf5..3f5097f 100644
--- a/advlabdb/templates/admin/model/modals/create.html
+++ b/advlabdb/templates/admin/model/modals/create.html
@@ -5,20 +5,32 @@
 {% set render_ctx = h.resolve_ctx() %}
 
 {% block body %}
+
   <div class="modal-header">
-    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-    {% block header_text %}<h3>{{ _gettext('Create New Record') }}</h3>{% endblock %}
+    {% block header_text %}<h5 class="modal-title">{{ _gettext('Create New Record') }}</h5>{% endblock %}
+    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
   </div>
+  {% call lib.form_tag(action=url_for('.create_view', url=return_url)) %}
   <div class="modal-body">
+        {{ lib.render_form_fields(form, form_opts=form_opts) }}
+  </div>
+  <div class="modal-footer">
+        {{ lib.render_form_buttons(return_url, extra=None, is_modal=True) }}
+  </div>
+  {% endcall %}
+
     {# "save and add" button is removed from modal (it won't function properly) #}
-    {% block create_form %}
+    {# % block create_form %}
       {{ lib.render_form(form, return_url, extra=None, form_opts=form_opts,
                          action=url_for('.create_view', url=return_url),
                          is_modal=True) }}
-    {% endblock %}
-  </div>
+    {% endblock % #}
+
+
 {% endblock %}
 
 {% block tail %}
-  <script src="{{ admin_static.url(filename='admin/js/bs3_modal.js', v='1.0.0') }}"></script>
+  <script src="{{ admin_static.url(filename='admin/js/bs4_modal.js', v='1.0.0') }}"></script>
 {% endblock %}
diff --git a/advlabdb/templates/admin/model/modals/details.html b/advlabdb/templates/admin/model/modals/details.html
index 9abb55d..793b4d0 100755
--- a/advlabdb/templates/admin/model/modals/details.html
+++ b/advlabdb/templates/admin/model/modals/details.html
@@ -1,40 +1,40 @@
-{% import 'admin/static.html' as admin_static with context%}
-{% import 'admin/lib.html' as lib with context %}
-
-{% block body %}
-  <div class="modal-header">
-    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-    {% block header_text %}
-      <h3>{{ _gettext('View Record') + ' #' + request.args.get('id') }}</h3>
-    {% endblock %}
-  </div>
-
-  <div class="modal-body">
-  {% block details_search %}
-    <div class="input-group fa_filter_container col-lg-6">
-      <span class="input-group-addon">{{ _gettext('Filter') }}</span>
-      <input id="fa_filter" type="text" class="form-control">
-    </div>
-  {% endblock %}
-
-  {% block details_table %}
-    <table class="table table-hover table-bordered searchable">
-    {% for c, name in details_columns %}
-      <tr>
-        <td>
-          <b>{{ name }}</b>
-        </td>
-        <td>
-        {{ get_value(model, c) }}
-        </td>
-      </tr>
-    {% endfor %}
-    </table>
-  {% endblock %}
-  </div>
-{% endblock %}
-
-{% block tail %}
-  <script src="{{ admin_static.url(filename='admin/js/details_filter.js', v='1.0.0') }}"></script>
-  <script src="{{ admin_static.url(filename='admin/js/bs3_modal.js', v='1.0.0') }}"></script>
-{% endblock %}
+{% import 'admin/static.html' as admin_static with context%}
+{% import 'admin/lib.html' as lib with context %}
+
+{% block body %}
+  <div class="modal-header">
+    {% block header_text %}
+      <h3>{{ _gettext('View Record') + ' #' + request.args.get('id') }}</h3>
+    {% endblock %}
+    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+  </div>
+
+  <div class="modal-body">
+  {% block details_search %}
+    <div class="form-inline fa_filter_container col-lg-6">
+      <label for="fa_filter">{{ _gettext('Filter') }}</label>
+      <input id="fa_filter" type="text" class="ml-3 form-control">
+    </div>
+  {% endblock %}
+
+  {% block details_table %}
+    <table class="table table-hover table-bordered searchable">
+    {% for c, name in details_columns %}
+      <tr>
+        <td>
+          <b>{{ name }}</b>
+        </td>
+        <td>
+        {{ get_value(model, c) }}
+        </td>
+      </tr>
+    {% endfor %}
+    </table>
+  {% endblock %}
+  </div>
+{% endblock %}
+
+{% block tail %}
+  <script src="{{ admin_static.url(filename='admin/js/details_filter.js', v='1.0.0') }}"></script>
+  <script src="{{ admin_static.url(filename='admin/js/bs4_modal.js', v='1.0.0') }}"></script>
+{% endblock %}
diff --git a/advlabdb/templates/admin/model/modals/edit.html b/advlabdb/templates/admin/model/modals/edit.html
index 8897810..dd9e777 100644
--- a/advlabdb/templates/admin/model/modals/edit.html
+++ b/advlabdb/templates/admin/model/modals/edit.html
@@ -6,21 +6,26 @@
 
 {% block body %}
   <div class="modal-header">
-    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
     {% block header_text %}
-      <h3>{{ _gettext('Edit Record') + ' #' + request.args.get('id') }}</h3>
+    <h5 class="modal-title">{{ _gettext('Edit Record') + ' #' + request.args.get('id') }}</h5>
     {% endblock %}
+    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
+
   </div>
+
+  {% call lib.form_tag(action=url_for('.edit_view', id=request.args.get('id'), url=return_url)) %}
   <div class="modal-body">
-    {# "save and continue" button is removed from modal (it won't function properly) #}
-    {% block edit_form %}
-      {{ lib.render_form(form, return_url, extra=None, form_opts=form_opts,
-                         action=url_for('.edit_view', id=request.args.get('id'), url=return_url),
-                         is_modal=True) }}
-    {% endblock %}
+        {{ lib.render_form_fields(form, form_opts=form_opts) }}
   </div>
+  <div class="modal-footer">
+        {{ lib.render_form_buttons(return_url, extra=None, is_modal=True) }}
+  </div>
+  {% endcall %}
+
 {% endblock %}
 
 {% block tail %}
-  <script src="{{ admin_static.url(filename='admin/js/bs3_modal.js', v='1.0.0') }}"></script>
+  <script src="{{ admin_static.url(filename='admin/js/bs4_modal.js', v='1.0.0') }}"></script>
 {% endblock %}
diff --git a/advlabdb/templates/admin/rediscli/console.html b/advlabdb/templates/admin/rediscli/console.html
index 368f55d..498fdcc 100644
--- a/advlabdb/templates/admin/rediscli/console.html
+++ b/advlabdb/templates/admin/rediscli/console.html
@@ -4,14 +4,14 @@
 
 {% block head %}
     {{ super() }}
-    <link href="{{ admin_static.url(filename='admin/css/bootstrap3/rediscli.css', v='1.0.0') }}" rel="stylesheet">
+    <link href="{{ admin_static.url(filename='admin/css/bootstrap4/rediscli.css', v='1.0.0') }}" rel="stylesheet">
 {% endblock %}
 
 {% block body %}
 <div class="console">
   <div class="console-container">
   </div>
-  <div class="console-line">
+  <div class="console-line mb-4">
     <form action="#">
       <input type="text"></input>
     </form>
diff --git a/copy_admin_templates.py b/copy_admin_templates.py
index 8a9de8a..e9d8cf1 100644
--- a/copy_admin_templates.py
+++ b/copy_admin_templates.py
@@ -5,7 +5,7 @@ from flask_admin import __file__ as flaskAdminPath
 
 
 def copyAdminTemplates():
-    src = flaskAdminPath.removesuffix("__init__.py") + "templates/bootstrap3/admin"
+    src = flaskAdminPath.removesuffix("__init__.py") + "templates/bootstrap4/admin"
     if not exists(src):
         print("Templates could not be found in", src)
         print("You can also copy them manually.")