diff --git a/debian/control b/debian/control
index 5654161dc..ea7cfade4 100644
--- a/debian/control
+++ b/debian/control
@@ -17,7 +17,7 @@ Build-Depends:
  docbook-xsl,
  e2fsprogs,
  gir1.2-nm-1.0,
- libjs-bootstrap,
+ libjs-bootstrap4,
  python3-all,
  python3-apt,
  python3-augeas,
@@ -84,7 +84,7 @@ Depends:
  ldapscripts,
 # For gdbus used to call hooks into service
  libglib2.0-bin,
- libjs-bootstrap,
+ libjs-bootstrap4,
  libjs-jquery,
  libjs-modernizr,
  lsof,
diff --git a/plinth/modules/backups/templates/backups_delete.html b/plinth/modules/backups/templates/backups_delete.html
index 51d901d49..2840f1835 100644
--- a/plinth/modules/backups/templates/backups_delete.html
+++ b/plinth/modules/backups/templates/backups_delete.html
@@ -12,8 +12,8 @@
   <p>{% trans "Delete this archive permanently?" %}</p>
 
   <div class="row">
-    <div class="col-lg-12">
-      <table class="table table-bordered table-condensed table-striped">
+    <div class="col-xl-12">
+      <table class="table table-bordered table-sm table-striped">
         <thead>
           <th>{% trans "Name" %}</th>
           <th>{% trans "Time" %}</th>
diff --git a/plinth/modules/backups/templates/backups_repository.html b/plinth/modules/backups/templates/backups_repository.html
index 0be5cfb57..9277f5a8e 100644
--- a/plinth/modules/backups/templates/backups_repository.html
+++ b/plinth/modules/backups/templates/backups_repository.html
@@ -65,7 +65,7 @@
     </tr>
   </thead>
 
-  <tbody class="collapse in" id="{{ uuid }}">
+  <tbody class="collapse show" id="{{ uuid }}">
     {% if repository.mounted %}
 
       {% for archive in repository.archives %}
diff --git a/plinth/modules/backups/templates/verify_ssh_hostkey.html b/plinth/modules/backups/templates/verify_ssh_hostkey.html
index c660af4a7..caaa1173f 100644
--- a/plinth/modules/backups/templates/verify_ssh_hostkey.html
+++ b/plinth/modules/backups/templates/verify_ssh_hostkey.html
@@ -40,7 +40,7 @@
             {% trans "How to verify?" %}
           </a>
         </p>
-        <div class="collapse panel-body" id="help">
+        <div class="collapse card-body" id="help">
           <p>
             {% blocktrans trimmed %}
               Run the following command on the SSH host machine. The output
diff --git a/plinth/modules/calibre/templates/calibre.html b/plinth/modules/calibre/templates/calibre.html
index 9e4e854a8..5c695d4b3 100644
--- a/plinth/modules/calibre/templates/calibre.html
+++ b/plinth/modules/calibre/templates/calibre.html
@@ -31,7 +31,7 @@
   </div>
 
   <div class="row">
-    <div class="col-sm-6">
+    <div class="col-md-6">
       {% if not libraries %}
         <p>{% trans 'No libraries available.' %}</p>
       {% else %}
diff --git a/plinth/modules/diagnostics/templates/diagnostics_button.html b/plinth/modules/diagnostics/templates/diagnostics_button.html
index 8883e0f56..2d5811374 100644
--- a/plinth/modules/diagnostics/templates/diagnostics_button.html
+++ b/plinth/modules/diagnostics/templates/diagnostics_button.html
@@ -7,12 +7,7 @@
 <form class="form form-diagnostics-button" method="post"
       action="{% url 'diagnostics:app' app_id %}">
   {% csrf_token %}
-
-  {% if enabled %}
-    <input type="submit" class="btn btn-default no-running-status"
-           value="{% trans "Run Diagnostics" %}"/>
-  {% else %}
-    <input type="submit" class="btn btn-default"
-           value="{% trans "Run Diagnostics" %}" disabled="disabled"/>
-  {% endif %}
+  <input type="submit" class="dropdown-item no-running-status"
+         value="{% trans "Run Diagnostics" %}"
+         {% if not enabled %} disabled="disabled" {% endif %}/>
 </form>
diff --git a/plinth/modules/diagnostics/templates/diagnostics_results.html b/plinth/modules/diagnostics/templates/diagnostics_results.html
index b34c8a976..885d7112a 100644
--- a/plinth/modules/diagnostics/templates/diagnostics_results.html
+++ b/plinth/modules/diagnostics/templates/diagnostics_results.html
@@ -17,11 +17,11 @@
         <td>{{ test }}</td>
         <td class="diagnostics-result">
           {% if result == 'passed' %}
-            <span class="label label-success">{% trans result %}</span>
+            <span class="badge badge-success">{% trans result %}</span>
           {% elif result == 'failed' %}
-            <span class="label label-danger">{% trans result %}</span>
+            <span class="badge badge-danger">{% trans result %}</span>
           {% elif result == 'error' %}
-            <span class="label label-warning">{% trans result %}</span>
+            <span class="badge badge-warning">{% trans result %}</span>
           {% else %}
             {{ result }}
           {% endif %}
diff --git a/plinth/modules/diaspora/templates/diaspora-pre-setup.html b/plinth/modules/diaspora/templates/diaspora-pre-setup.html
index 15ef66b0b..cf0892860 100644
--- a/plinth/modules/diaspora/templates/diaspora-pre-setup.html
+++ b/plinth/modules/diaspora/templates/diaspora-pre-setup.html
@@ -33,7 +33,7 @@
 
   {% block configuration %}
     {% if domain_names|length > 0 %}
-      <h3>Configuration</h3>
+      <h3>{% trans "Configuration" %}</h3>
       <form class="form" method="post">
         {% csrf_token %}
 
diff --git a/plinth/modules/firewall/templates/firewall.html b/plinth/modules/firewall/templates/firewall.html
index 80c29f0fd..bf8bde8a9 100644
--- a/plinth/modules/firewall/templates/firewall.html
+++ b/plinth/modules/firewall/templates/firewall.html
@@ -38,22 +38,22 @@
                 <center>
                   <button data-toggle="collapse"
                           data-target=".{{component.component_id}}"
-                          class="btn btn-info btn-xs">+</button>
+                          class="btn btn-info btn-sm">+</button>
                 </center>
               </td>
               <td><strong>{{ component.name }}</strong></td>
               <td>
                 {% if component.is_enabled %}
-                  <span class='label label-success'>
+                  <span class='badge badge-success'>
                     {% trans "Enabled" %}</span>
                 {% else %}
-                  <span class='label label-warning'>
+                  <span class='badge badge-warning'>
                     {% trans "Disabled" %}</span>
                 {% endif %}
               </td>
             </tr>
             {% for port in component.ports_details %}
-              <tr class="collapse out {{component.component_id}}"
+              <tr class="collapse {{component.component_id}}"
                   style="background-color: #f9f9f9" >
                 <td></td>
                 <td class='cell-indented'><em>{{ port.name }}</em>:
@@ -63,16 +63,16 @@
                 </td>
                 <td>
                   {% if port.name in internal_enabled_ports and port.name in external_enabled_ports %}
-                    <span class='label label-success'>
+                    <span class='badge badge-success'>
                       {% trans "Permitted" %}</span>
                   {% elif port.name in internal_enabled_ports %}
-                    <span class='label label-warning'>
+                    <span class='badge badge-warning'>
                       {% trans "Permitted (internal only)" %}</span>
                   {% elif port.name in external_enabled_ports %}
-                    <span class='label label-warning'>
+                    <span class='badge badge-warning'>
                       {% trans "Permitted (external only)" %}</span>
                   {% else %}
-                    <span class='label label-danger'>
+                    <span class='badge badge-danger'>
                       {% trans "Blocked" %}</span>
                   {% endif %}
                 </td>
diff --git a/plinth/modules/gitweb/templates/gitweb_configure.html b/plinth/modules/gitweb/templates/gitweb_configure.html
index 93813c452..0401afc17 100644
--- a/plinth/modules/gitweb/templates/gitweb_configure.html
+++ b/plinth/modules/gitweb/templates/gitweb_configure.html
@@ -39,7 +39,7 @@
   </div>
 
   <div class="row">
-    <div class="col-sm-6">
+    <div class="col-md-6">
       {% if not repos %}
         <p>{% trans 'No repositories available.' %}</p>
       {% else %}
diff --git a/plinth/modules/ikiwiki/templates/ikiwiki_configure.html b/plinth/modules/ikiwiki/templates/ikiwiki_configure.html
index 1f2eb2add..3cbdbeeef 100644
--- a/plinth/modules/ikiwiki/templates/ikiwiki_configure.html
+++ b/plinth/modules/ikiwiki/templates/ikiwiki_configure.html
@@ -20,7 +20,7 @@
   </div>
 
   <div class="row">
-    <div class="col-sm-6">
+    <div class="col-md-6">
       {% if not sites %}
         <p>{% trans "No wikis or blogs available." %}</p>
       {% else %}
diff --git a/plinth/modules/jsxc/static/jsxc-plinth.css b/plinth/modules/jsxc/static/jsxc-plinth.css
index 02c7419fd..c46324b25 100644
--- a/plinth/modules/jsxc/static/jsxc-plinth.css
+++ b/plinth/modules/jsxc/static/jsxc-plinth.css
@@ -27,6 +27,14 @@
 # THE SOFTWARE.
 */
 
+h1 {
+    /* From bootstrap 3 .page-header */
+    text-align: center;
+    padding-bottom: 0.5625rem;
+    margin: 2.5rem 0 1.25rem;
+    border-bottom: 1px solid #eee;
+}
+
 /* Elements to hide on page load */
 .logout {
    display: none;
diff --git a/plinth/modules/jsxc/templates/jsxc_launch.html b/plinth/modules/jsxc/templates/jsxc_launch.html
index afa7ab433..2aa4e3bab 100644
--- a/plinth/modules/jsxc/templates/jsxc_launch.html
+++ b/plinth/modules/jsxc/templates/jsxc_launch.html
@@ -37,7 +37,7 @@
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <link href="/javascript/bootstrap/css/bootstrap.min.css" media="all"
+    <link href="/javascript/bootstrap4/css/bootstrap.min.css" media="all"
           rel="stylesheet" type="text/css" />
     <link href="/javascript/jquery-ui/themes/base/jquery-ui.min.css"
           media="all" rel="stylesheet" type="text/css" />
@@ -50,7 +50,7 @@
     <script src="/javascript/jquery-ui/jquery-ui.min.js"></script>
     <script src="/javascript/jquery-slimscroll/jquery.slimscroll.min.js"></script>
     <script src="/javascript/jquery-fullscreen/jquery.fullscreen.js"></script>
-    <script src="/javascript/bootstrap/js/bootstrap.min.js"></script>
+    <script src="/javascript/bootstrap4/js/bootstrap.bundle.min.js"></script>
     <script src="/javascript/jsxc/lib/jsxc.dep.js"></script>
     <script src="/javascript/jsxc/jsxc.js"></script>
 
@@ -61,49 +61,49 @@
         data-jsxc-root="{% static 'jsxc/libjs-jsxc' %}">
     <div class="container" id="content" role="main">
       <div class="row">
-        <div class="col-md-6 col-md-offset-3 col-xs-8 col-xs-offset-2">
-          <h1 class="page-header text-center">Jabber Chat</h1>
+        <div class="col-lg-6 offset-lg-3">
+          <h1>Jabber Chat</h1>
 
-          <div class="form form-horizontal">
-            <div class="form-group">
-              <label for="xmpp-domain" class="col-xs-4 control-label">
+          <div class="form">
+            <div class="form-group row">
+              <label for="xmpp-domain" class="col-sm-4 col-form-label">
                 Domain:
               </label>
-              <div class="col-xs-8">
+              <div class="col-sm-8">
                 <input type="text" id="xmpp-domain" name="xmpp-domain"
                        class="form-control" />
                 <p id="server-flash"></p>
               </div>
             </div>
 
-            <form id="jsxc-login-form" class="form form-horizontal">
+            <form id="jsxc-login-form" class="form">
               <fieldset>
                 <div class="form-group row">
-                  <label for="jsxc-username" class="col-xs-4 control-label">
+                  <label for="jsxc-username" class="col-sm-4 col-form-label">
                     Username:
                   </label>
-                  <div class="col-xs-8">
+                  <div class="col-sm-8">
                     <input type="text" id="jsxc-username"
                            class="form-control" />
                   </div>
                 </div>
 
                 <div class="form-group row">
-                  <label for="jsxc-password" class="col-xs-4 control-label">
+                  <label for="jsxc-password" class="col-sm-4 col-form-label">
                     Password:
                   </label>
-                  <div class="col-xs-8">
+                  <div class="col-sm-8">
                     <input type="password" id="jsxc-password"
                            class="form-control" />
                   </div>
                 </div>
 
                 <div class="form-group row">
-                  <div class="col-xs-offset-4 col-xs-8">
+                  <div class="offset-sm-4 col-sm-8">
                     <button type="submit" id="jsxc-submit"
                             class="submit btn btn-primary"
                             data-loading-text="Logging in...">Log in</button>
-                    <button class="logout btn btn-default">Log out</button>
+                    <button class="logout btn btn-secondary">Log out</button>
                   </div>
                 </div>
               </fieldset>
@@ -113,7 +113,7 @@
       </div>
     </div>
 
-    <div class="hidden">
+    <div class="d-none">
       <a href="{% static 'jslicense.html' %}" data-jslicense="1">
         {% trans "JavaScript license information" %}</a>
     </div>
diff --git a/plinth/modules/letsencrypt/templates/letsencrypt.html b/plinth/modules/letsencrypt/templates/letsencrypt.html
index 216833952..e57c1575e 100644
--- a/plinth/modules/letsencrypt/templates/letsencrypt.html
+++ b/plinth/modules/letsencrypt/templates/letsencrypt.html
@@ -23,7 +23,7 @@
   <h3>{% trans "Status" %}</h3>
 
   {% if status.domains %}
-    <table class="table table-bordered table-condensed table-striped">
+    <table class="table table-bordered table-sm table-striped">
       <thead>
         <tr>
           <th>{% trans "Domain" %}</th>
@@ -38,13 +38,13 @@
             <td>{{ domain }}</td>
             <td>
               {% if domain_status.certificate_available and domain_status.validity == "valid" %}
-                <span class="label label-success">
+                <span class="badge badge-success">
                   {% blocktrans trimmed with expiry_date=domain_status.expiry_date %}
                     Valid, expires on {{ expiry_date }}
                   {% endblocktrans %}
                 </span>
               {% elif domain_status.certificate_available and not domain_status.validity == "valid" %}
-                <span class="label label-warning">
+                <span class="badge badge-warning">
                   {% if "revoked" in domain_status.validity %}
                     {% blocktrans trimmed %}
                       Revoked
@@ -64,16 +64,16 @@
                   {% endif %}
                 </span>
               {% else %}
-                <span class="label label-warning">
+                <span class="badge badge-warning">
                   {% trans "No certificate" %}
                 </span>
               {% endif %}
             </td>
             <td>
               {% if domain_status.web_enabled %}
-                <span class="label label-success">{% trans "Enabled" %}</span>
+                <span class="badge badge-success">{% trans "Enabled" %}</span>
               {% else %}
-                <span class="label label-warning">{% trans "Disabled" %}</span>
+                <span class="badge badge-warning">{% trans "Disabled" %}</span>
               {% endif %}
             </td>
             <td>
diff --git a/plinth/modules/mediawiki/forms.py b/plinth/modules/mediawiki/forms.py
index 2c3f75812..c2d9f57a3 100644
--- a/plinth/modules/mediawiki/forms.py
+++ b/plinth/modules/mediawiki/forms.py
@@ -36,8 +36,10 @@ class PrependWidget(Widget):
         field = self.base_widget.render(name, value, attrs, renderer)
         widget_html = '''
             <div class="input-group">
-              <span class="input-group-addon">
-                %(data)s
+              <span class="input-group-prepend">
+                <span class="input-group-text">
+                  %(data)s
+                </span>
               </span>
               %(field)s
             </div>'''
diff --git a/plinth/modules/minetest/templates/minetest.html b/plinth/modules/minetest/templates/minetest.html
index 17780c942..23264b363 100644
--- a/plinth/modules/minetest/templates/minetest.html
+++ b/plinth/modules/minetest/templates/minetest.html
@@ -11,8 +11,8 @@
 
   {% if domains %}
     <div class="row">
-      <div class="col-sm-6">
-        <table class="table table-bordered table-condensed table-striped">
+      <div class="col-md-6">
+        <table class="table table-bordered table-sm table-striped">
           <thead>
             <tr>
               <th>{% trans "Address" %}</th>
diff --git a/plinth/modules/monkeysphere/templates/monkeysphere.html b/plinth/modules/monkeysphere/templates/monkeysphere.html
index 76c170181..515151b8e 100644
--- a/plinth/modules/monkeysphere/templates/monkeysphere.html
+++ b/plinth/modules/monkeysphere/templates/monkeysphere.html
@@ -74,7 +74,7 @@
               {% for domain in key.all_domains %}
                 {% if domain not in key.imported_domains %}
                   <li>
-                    <span class="label label-default"
+                    <span class="badge badge-secondary"
                       ><span class="fa fa-times"
                              aria-hidden="true"></span></span>
                     <span class="monkeysphere-importable-domain"
@@ -82,7 +82,7 @@
                   </li>
                 {% elif domain not in key.available_domains %}
                   <li>
-                    <span class="label label-warning"
+                    <span class="badge badge-warning"
                       ><span class="fa fa-exclamation-triangle"
                              aria-hidden="true"></span></span>
                     <span class="monkeysphere-unavailable-domain"
@@ -90,7 +90,7 @@
                   </li>
                 {% else %}
                   <li>
-                    <span class="label label-success"
+                    <span class="badge badge-success"
                       ><span class="fa fa-check"
                              aria-hidden="true"></span></span>
                     <span class="monkeysphere-imported-domain"
diff --git a/plinth/modules/monkeysphere/templates/monkeysphere_details.html b/plinth/modules/monkeysphere/templates/monkeysphere_details.html
index 22ee6b3cc..e5e177bb2 100644
--- a/plinth/modules/monkeysphere/templates/monkeysphere_details.html
+++ b/plinth/modules/monkeysphere/templates/monkeysphere_details.html
@@ -10,7 +10,7 @@
 
   <h2>{% trans "Monkeysphere" %}</h2>
 
-  <table class="table table-bordered table-condensed table-striped">
+  <table class="table table-bordered table-sm table-striped">
     <tbody>
       <tr>
         <td>{% trans "OpenPGP Fingerprint" %}</td>
diff --git a/plinth/modules/names/templates/names.html b/plinth/modules/names/templates/names.html
index c3ea506d4..646b7f7ad 100644
--- a/plinth/modules/names/templates/names.html
+++ b/plinth/modules/names/templates/names.html
@@ -8,7 +8,7 @@
 
 {% block configuration %}
 
-  <table class="table table-bordered table-condensed table-striped names-table">
+  <table class="table table-bordered table-sm table-striped names-table">
     <thead>
       <tr>
         <th>{% trans "Type" %}</th>
diff --git a/plinth/modules/networks/templates/connection_show.html b/plinth/modules/networks/templates/connection_show.html
index 11bc00b23..c1ce90b0a 100644
--- a/plinth/modules/networks/templates/connection_show.html
+++ b/plinth/modules/networks/templates/connection_show.html
@@ -21,7 +21,7 @@
 {% block content %}
 
   <div class="row">
-    <div class="col-sm-8 col-sm-offset-2">
+    <div class="col-md-8 offset-md-2">
       <div>
         <a href="{% url 'networks:edit' connection.uuid %}"
            class="btn btn-primary" role="button"
@@ -55,7 +55,7 @@
           <div class="list-group-item">
             {% trans "Primary connection" %}
             <div class="pull-right">
-              <span class="label label-success">{% trans "yes" %}</span>
+              <span class="badge badge-success">{% trans "yes" %}</span>
             </div>
           </div>
         {% endif %}
@@ -106,10 +106,10 @@
             {% trans "Link state" %}
             <div class="pull-right">
               {% if device.ethernet.carrier %}
-                <span class='label label-success'>
+                <span class='badge badge-success'>
                   {% trans "cable is connected" %}</span>
               {% else %}
-                <span class='label label-warning'>
+                <span class='badge badge-warning'>
                   {% trans "please check cable" %}</span>
               {% endif %}
             </div>
@@ -147,7 +147,7 @@
             <div class="list-group-item">
               {% trans "Signal strength" %}
               <div class="pull-right">
-                <span class="btn btn-primary btn-xs">
+                <span class="btn btn-primary btn-sm">
                   {{ access_point.strength }}%
                 </span>
               </div>
@@ -255,7 +255,7 @@
           <div class="list-group-item">
             {% trans "Firewall zone" %}
             <div class="pull-right">
-              <span class="label label-success">{{ connection.zone_string }}</span>
+              <span class="badge badge-success">{{ connection.zone_string }}</span>
             </div>
           </div>
         </div>
@@ -275,7 +275,7 @@
           <div class="list-group-item">
             {% trans "Firewall zone" %}
             <div class="pull-right">
-              <span class="label label-warning">{{ connection.zone_string }}</span>
+              <span class="badge badge-warning">{{ connection.zone_string }}</span>
             </div>
           </div>
         </div>
@@ -294,7 +294,7 @@
           <div class="list-group-item">
             {% trans "Firewall zone" %}
             <div class="pull-right">
-              <span class="label label-warning">{% trans "External" %}</span>
+              <span class="badge badge-danger">{% trans "External" %}</span>
             </div>
           </div>
         </div>
diff --git a/plinth/modules/networks/templates/connections_diagram.html b/plinth/modules/networks/templates/connections_diagram.html
index 1e3ca32f7..c5be8ebf3 100644
--- a/plinth/modules/networks/templates/connections_diagram.html
+++ b/plinth/modules/networks/templates/connections_diagram.html
@@ -45,19 +45,19 @@
 </style>
 
 <div class="row connection-diagram">
-  <div class="col-sm-2">
+  <div class="col-md-2">
     <img src="{% static 'theme/img/network-internet.svg' %}"
          class="col-image network-entity" alt="{% trans "Internet" %}"/>
   </div>
-  <div class="col-sm-3">
+  <div class="col-md-3">
     <img src="{% static 'theme/img/network-spacing.svg' %}"
-         class="col-image network-spacing hidden-xs"
+         class="col-image network-spacing d-none d-md-block"
          alt="{% trans "Spacing" %}"/>
     <img src="{% static 'theme/img/network-connection.svg' %}"
-         class="col-image network-connection hidden-xs"
+         class="col-image network-connection d-none d-md-block "
          alt="{% trans "Connection" %}"/>
     <img src="{% static 'theme/img/network-connection-vertical.svg' %}"
-         class="network-connection-vertical visible-xs-block"
+         class="network-connection-vertical d-md-none"
          alt="{% trans "Connection" %}"/>
     <div class="connection-list">
       <p class="connection-list-heading">{% trans "External" %}</p>
@@ -77,16 +77,16 @@
       {% endfor %}
     </div>
   </div>
-  <div class="col-sm-2">
+  <div class="col-md-2">
     <img src="{% static 'theme/img/network-freedombox.svg' %}"
          class="col-image network-entity" alt="{{ box_name }}"/>
   </div>
-  <div class="col-sm-3">
+  <div class="col-md-3">
     <img src="{% static 'theme/img/network-spacing.svg' %}"
-         class="col-image network-spacing hidden-xs"
+         class="col-image network-spacing d-none d-md-block"
          alt="{% trans "Spacing" %}"/>
     <img src="{% static 'theme/img/network-connection.svg' %}"
-         class="col-image network-connection hidden-xs"
+         class="col-image network-connection d-none d-md-block"
          alt="{% trans "Connection" %}"/>
     <div class="connection-list">
       <p class="connection-list-heading">{% trans "Internal" %}</p>
@@ -108,10 +108,10 @@
       {% endfor %}
     </div>
     <img src="{% static 'theme/img/network-connection-vertical.svg' %}"
-         class="network-connection-vertical visible-xs-block"
+         class="network-connection-vertical d-md-none"
          alt="{% trans "Connection" %}"/>
   </div>
-  <div class="col-sm-2">
+  <div class="col-md-2">
     <img src="{% static 'theme/img/network-computer.svg' %}"
          class="col-image network-entity" alt="{% trans "Computer" %}"/>
   </div>
diff --git a/plinth/modules/networks/templates/connections_list.html b/plinth/modules/networks/templates/connections_list.html
index 015046959..8a4ca0db5 100644
--- a/plinth/modules/networks/templates/connections_list.html
+++ b/plinth/modules/networks/templates/connections_list.html
@@ -50,10 +50,10 @@
         {% endif %}
 
         {% if connection.is_active %}
-          <span class="label label-success connection-status-label">
+          <span class="badge badge-success connection-status-label">
             {% trans "Active" %}</span>
         {% else %}
-          <span class="label label-warning connection-status-label">
+          <span class="badge badge-warning connection-status-label">
             {% trans "Inactive" %}</span>
         {% endif %}
 
diff --git a/plinth/modules/networks/templates/wifi_scan.html b/plinth/modules/networks/templates/wifi_scan.html
index 89c2b1028..69abc17fb 100644
--- a/plinth/modules/networks/templates/wifi_scan.html
+++ b/plinth/modules/networks/templates/wifi_scan.html
@@ -11,7 +11,7 @@
   <h3>{{ title }}</h3>
 
   <div class="row">
-    <div class="col-sm-6">
+    <div class="col-md-6">
       <div class="list-group">
         {% for access_point in access_points %}
           <div class="list-group-item clearfix">
@@ -23,7 +23,7 @@
             {% else %}
               --
             {% endif %}
-            <span class="btn btn-primary btn-xs pull-right">
+            <span class="btn btn-primary btn-sm pull-right">
               {{ access_point.strength }}%
             </span>
           </div>
diff --git a/plinth/modules/openvpn/templates/migrate_to_ecc.html b/plinth/modules/openvpn/templates/migrate_to_ecc.html
index 5ca575e72..8f22afab1 100644
--- a/plinth/modules/openvpn/templates/migrate_to_ecc.html
+++ b/plinth/modules/openvpn/templates/migrate_to_ecc.html
@@ -22,7 +22,7 @@
   {% endblocktrans %}
 </p>
 
-<p class="bg-warning">
+<p class="alert alert-warning">
   {% blocktrans trimmed %}
     <b>Warning:</b> Existing client profiles will be invalidated by this operation. All
     OpenVPN users on {{ box_name }} must download their new profiles. OpenVPN
diff --git a/plinth/modules/samba/templates/samba.html b/plinth/modules/samba/templates/samba.html
index 2bad8cfee..9f0df343b 100644
--- a/plinth/modules/samba/templates/samba.html
+++ b/plinth/modules/samba/templates/samba.html
@@ -31,10 +31,10 @@
   {% if is_enabled %}
     <h3>{% trans "Shares" %}</h3>
     <p>
-    {% blocktrans trimmed %}
-      Note: Only specially created directories will be shared on selected disks,
-      not the whole disk.
-    {% endblocktrans %}
+      {% blocktrans trimmed %}
+        Note: Only specially created directories will be shared on selected
+        disks, not the whole disk.
+      {% endblocktrans %}
     </p>
 
     {% for disk in disks %}
@@ -48,11 +48,11 @@
             <div class="progress">
               <div class="progress-bar progress-bar-striped
                 {% if disk.percent_used < 75 %}
-                  progress-bar-success
+                  bg-success
                 {% elif disk.percent_used < 90 %}
-                  progress-bar-warning
+                  bg-warning
                 {% else %}
-                  progress-bar-danger
+                  bg-danger
                 {% endif %}"
                 role="progressbar" aria-valuenow="{{ disk.percent_used }}"
                 aria-valuemin="0" aria-valuemax="100"
diff --git a/plinth/modules/sharing/templates/sharing.html b/plinth/modules/sharing/templates/sharing.html
index 8d3f3f5be..6ccc7454f 100644
--- a/plinth/modules/sharing/templates/sharing.html
+++ b/plinth/modules/sharing/templates/sharing.html
@@ -31,7 +31,7 @@
   {% if not shares %}
     <p>{% trans 'No shares currently configured.' %}</p>
   {% else %}
-    <table class="table table-bordered table-condensed table-striped" id="shares-list">
+    <table class="table table-bordered table-sm table-striped" id="shares-list">
       <thead>
         <tr>
           <th>{% trans "Name" %}</th>
diff --git a/plinth/modules/snapshot/templates/snapshot.html b/plinth/modules/snapshot/templates/snapshot.html
index 5a6302d36..bbf0b9da2 100644
--- a/plinth/modules/snapshot/templates/snapshot.html
+++ b/plinth/modules/snapshot/templates/snapshot.html
@@ -7,10 +7,10 @@
 {% load i18n %}
 
 {% block configuration %}
-  <form class="form-horizontal" method="post">
+  <form id="snapshot-configure" class="form-horizontal" method="post">
     {% csrf_token %}
     <h3>{% trans "Configuration" %}</h3>
-    {{ form|bootstrap_horizontal:'col-sm-4' }}
+    {{ form|bootstrap_horizontal:'col-md-4' }}
     <input type="submit" class="btn btn-primary" name="update"
            value="{% trans "Update setup" %}"/>
   </form>
diff --git a/plinth/modules/snapshot/templates/snapshot_delete_selected.html b/plinth/modules/snapshot/templates/snapshot_delete_selected.html
index 929f6f4b5..964bb9846 100644
--- a/plinth/modules/snapshot/templates/snapshot_delete_selected.html
+++ b/plinth/modules/snapshot/templates/snapshot_delete_selected.html
@@ -11,7 +11,7 @@
 
   <p>{% trans "Delete the following snapshots permanently?" %}</p>
 
-  <table class="table table-bordered table-condensed table-striped">
+  <table class="table table-bordered table-sm table-striped">
     <thead>
       <th>{% trans "Number" %}</th>
       <th>{% trans "Date" %}</th>
diff --git a/plinth/modules/snapshot/templates/snapshot_manage.html b/plinth/modules/snapshot/templates/snapshot_manage.html
index 48f5eaaee..c9c132537 100644
--- a/plinth/modules/snapshot/templates/snapshot_manage.html
+++ b/plinth/modules/snapshot/templates/snapshot_manage.html
@@ -11,20 +11,17 @@
   <form class="form" method="post">
     <div class="button-table">
 
-      <div class="button-row row">
-          {% csrf_token %}
-          <div class="col-xs-6 text-left">
-            <input type="submit" class="btn btn-primary" name="create"
-                   value="{% trans 'Create Snapshot' %}"/>
-          </div>
-          <div class="col-xs-6 text-right">
-            <input type="submit" class="btn btn-danger" name="delete_selected"
-                   value="{% trans 'Delete Snapshots' %}"
-                   {{ has_deletable_snapshots|yesno:',disabled="disabled"' }}/>
-          </div>
+      <div class="btn-toolbar">
+        {% csrf_token %}
+        <input type="submit" class="btn btn-primary" name="create"
+               value="{% trans 'Create Snapshot' %}"/>
+        <input type="submit" class="btn btn-danger button-secondary"
+               name="delete_selected"
+               value="{% trans 'Delete Snapshots' %}"
+               {{ has_deletable_snapshots|yesno:',disabled="disabled"' }}/>
       </div>
 
-      <table class="table table-bordered table-condensed table-striped">
+      <table class="table table-bordered table-sm table-striped">
         <thead>
           <th>{% trans "Number" %}</th>
           <th>{% trans "Date" %}</th>
@@ -38,12 +35,12 @@
               <td>
                 {{ snapshot.number }}
                 {% if snapshot.is_default %}
-                  <span class="label label-default">
+                  <span class="badge badge-secondary">
                     {% trans "will be used at next boot" %}
                   </span>
                 {% endif %}
                 {% if snapshot.is_active %}
-                  <span class="label label-success">
+                  <span class="badge badge-success">
                     {% trans "in use" %}
                   </span>
                 {% endif %}
diff --git a/plinth/modules/snapshot/templates/snapshot_rollback.html b/plinth/modules/snapshot/templates/snapshot_rollback.html
index aacacca6a..ca5a00d81 100644
--- a/plinth/modules/snapshot/templates/snapshot_rollback.html
+++ b/plinth/modules/snapshot/templates/snapshot_rollback.html
@@ -19,7 +19,7 @@
     {% endblocktrans %}
   </p>
 
-  <table class="table table-bordered table-condensed table-striped">
+  <table class="table table-bordered table-sm table-striped">
     <thead>
       <th>{% trans "Number" %}</th>
       <th>{% trans "Date" %}</th>
diff --git a/plinth/modules/sso/templates/login.html b/plinth/modules/sso/templates/login.html
index fc85eb14a..9c8c5ab13 100644
--- a/plinth/modules/sso/templates/login.html
+++ b/plinth/modules/sso/templates/login.html
@@ -12,7 +12,7 @@
 
     <div class="row">
       {% csrf_token %}
-      <div class="col-sm-4 col-sm-offset-4">
+      <div class="col-md-4 offset-md-4">
         {{ form|bootstrap }}
 
         <div class="text-center">
diff --git a/plinth/modules/storage/templates/storage.html b/plinth/modules/storage/templates/storage.html
index e71493f04..4ba3cb6c7 100644
--- a/plinth/modules/storage/templates/storage.html
+++ b/plinth/modules/storage/templates/storage.html
@@ -19,7 +19,7 @@
 
   <p>{% trans "The following storage devices are in use:" %}</p>
 
-  <table class="table table-bordered table-condensed table-striped">
+  <table class="table table-bordered table-sm table-striped">
     <thead>
       <tr>
         <th>{% trans "Device" %}</th>
@@ -42,11 +42,11 @@
               <div class="progress">
                 <div class="progress-bar progress-bar-striped
                             {% if disk.percent_used < 75 %}
-                              progress-bar-success
+                              bg-success
                             {% elif disk.percent_used < 90 %}
-                              progress-bar-warning
+                              bg-warning
                             {% else %}
-                              progress-bar-danger
+                              bg-danger
                             {% endif %}"
                      role="progressbar" aria-valuenow="disk.percent_used"
                      aria-valuemin="0" aria-valuemax="100"
diff --git a/plinth/modules/tor/templates/tor.html b/plinth/modules/tor/templates/tor.html
index b337ac0e9..e4b2911c9 100644
--- a/plinth/modules/tor/templates/tor.html
+++ b/plinth/modules/tor/templates/tor.html
@@ -19,7 +19,7 @@
     {{ block.super }}
 
     {% if status.hs_enabled %}
-      <table class="table table-bordered table-condensed table-striped tor-hs">
+      <table class="table table-bordered table-sm table-striped tor-hs">
         <thead>
           <tr>
             <th>{% trans "Onion Service" %}</th>
@@ -63,8 +63,8 @@
         {% endblocktrans %}
       </p>
       <div class="row">
-        <div class="col-sm-6">
-          <table class="table table-bordered table-condensed table-striped tor-relay-ports">
+        <div class="col-md-6">
+          <table class="table table-bordered table-sm table-striped tor-relay-ports">
             <thead>
               <tr>
                 <th>{% trans "Service" %}</th>
diff --git a/plinth/modules/users/templates/users_list.html b/plinth/modules/users/templates/users_list.html
index 7e2211c2f..ed5966b52 100644
--- a/plinth/modules/users/templates/users_list.html
+++ b/plinth/modules/users/templates/users_list.html
@@ -31,7 +31,7 @@
   </div>
 
   <div class="row">
-    <div class="col-sm-6">
+    <div class="col-md-6">
       <div class="list-group">
         {% for user in object_list %}
           <div class="list-group-item clearfix">
diff --git a/plinth/templates/app.html b/plinth/templates/app.html
index b24f817e6..bc30d849a 100644
--- a/plinth/templates/app.html
+++ b/plinth/templates/app.html
@@ -25,7 +25,7 @@
   {% block status %}
     {% if is_running is not None and not is_running %}
       <div id='service-not-running' role="alert"
-           class="alert alert-danger {{ is_enabled|yesno:',hidden' }}">
+           class="alert alert-danger {{ is_enabled|yesno:',d-none' }}">
         {% blocktrans trimmed with service_name=app_info.name %}
           Service <em>{{ service_name }}</em> is not running.
         {% endblocktrans %}
diff --git a/plinth/templates/base.html b/plinth/templates/base.html
index 0252d30f8..7372d8f22 100644
--- a/plinth/templates/base.html
+++ b/plinth/templates/base.html
@@ -6,11 +6,7 @@
 # SPDX-License-Identifier: AGPL-3.0-or-later
 {% endcomment %}
 <!doctype html>
-<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
-<!--[if IE 7 ]>    <html class="ie ie7 no-js" lang="en"> <![endif]-->
-<!--[if IE 8 ]>    <html class="ie ie8 no-js" lang="en"> <![endif]-->
-<!--[if IE 9 ]>    <html class="ie ie9 no-js" lang="en"> <![endif]-->
-<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<html class="no-js" lang="en">
 <!-- the "no-js" class is for Modernizr -->
 <head>
   <meta charset="utf-8" />
@@ -52,7 +48,7 @@
   <link rel="apple-touch-icon" sizes="114x114" href="{% static 'theme/img/apple-touch-icon-114px-precomposed.png' %}"/>
 
   <!-- Bootstrap base CSS -->
-  <link rel="stylesheet" href="{% static '/javascript/bootstrap/css/bootstrap.min.css' %}"/>
+  <link rel="stylesheet" href="{% static '/javascript/bootstrap4/css/bootstrap.min.css' %}"/>
   <link rel="stylesheet" href="{% static '/javascript/fork-awesome/css/fork-awesome.css' %}"/>
   <link rel="stylesheet" href="{% static 'theme/css/main.css' %}"/>
   <!-- Local link to system Modernizr (includes HTML5 Shiv) -->
@@ -61,7 +57,7 @@
   <!-- TODO Deferring jQuery is causing scripts to be loaded before jQuery is available -->
   <script type="text/javascript" src="{% static '/javascript/jquery/jquery.min.js' %}"></script>
   <!-- Local link to system Bootstrap JS -->
-  <script type="text/javascript" src="{% static '/javascript/bootstrap/js/bootstrap.min.js' %}" defer></script>
+  <script type="text/javascript" src="{% static '/javascript/bootstrap4/js/bootstrap.bundle.min.js' %}" defer></script>
 
   <script type="text/javascript" src="{% static 'theme/js/main.js' %}" defer></script>
 
@@ -80,21 +76,9 @@
         data-refresh-page-sec="{{ refresh_page_sec }}"
       {% endif %}>
 <div id="wrapper">
-<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://mozilla.org/firefox">Upgrade to a modern version of Firefox</a> to experience this site.</p><![endif]-->
-  <div class="navbar navbar-fixed-top navbar-default main-header" role="navigation">
+  <div class="main-header fixed-top">
     <div class="container">
-      <div class="navbar-header">
-        <button type="button" class="navbar-toggle" data-toggle="collapse"
-                data-target=".navbar-collapse">
-          <span class="sr-only">{% trans "Toggle navigation" %}</span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </button>
-
-        <ul class="nav navbar-nav">
-          {% include "notifications-dropdown.html" %}
-        </ul>
+      <nav class="navbar navbar-expand-md">
 
         {% block mainmenu_left %}
           <a href="{% url 'index' %}"  class="navbar-brand
@@ -103,123 +87,138 @@
             <i class="fa fa-freedombox fa-2x fa-inverse" aria-hidden="true"></i>
           </a>
         {% endblock %}
-      </div>
-      <div class="collapse navbar-collapse">
-        <ul class="nav navbar-nav">
-          {% block mainmenu_left_collapse %}
-            {% if user.is_authenticated and user_is_admin %}
-              <li>
-                {% url 'index' as index_url %}
-                <a href="{{ index_url }}" title='{% trans "Home" %}'
-                   class="{% if not submenu.url %}
-                   menu_link_active {% else %} menu_link {% endif %}">
-                  {% trans "Home" %}
-                </a>
-              </li>
-              <li>
-                {% url 'apps' as apps_url %}
-                <a href="{{ apps_url }}" title='{% trans "Apps" %}'
-                   class="{% if apps_url == submenu.url %}
-                   menu_link_active {% else %} menu_link {% endif %}">
-                  <span class="fa fa-th"></span>
-                  {% trans "Apps" %}
-                </a>
-              </li>
-              <li>
-                {% url 'system' as system_url %}
-                <a href="{{ system_url }}" title='{% trans "System" %}'
-                   class="{% if system_url == submenu.url %}
-                   menu_link_active {% else %} menu_link {% endif %}">
-                  <span class="fa fa-cog nav-icon"></span>
-                  {% trans "System" %}
-                </a>
-              </li>
-            {% endif %}
-          {% endblock %}
+
+        <ul class="navbar-nav">
+          {% include "notifications-dropdown.html" %}
         </ul>
-        <ul class="nav navbar-nav navbar-right">
-          {% block mainmenu_right %}
 
-            {% if user.is_authenticated %}
+        <button class="navbar-toggler" type="button" data-toggle="collapse"
+                data-target="#navbar-collapse" aria-controls="navbar-collapse"
+                aria-expanded="false" aria-label="Toggle navigation">
+          <span class="fa fa-bars"></span>
+        </button>
 
-              {% include "notifications-dropdown.html" %}
+        <div class="collapse navbar-collapse" id="navbar-collapse">
+          <ul class="navbar-nav flex-grow-1">
+            {% block mainmenu_left_collapse %}
+              {% if user.is_authenticated and user_is_admin %}
+                <li class="nav-item">
+                  {% url 'index' as index_url %}
+                  <a href="{{ index_url }}" title='{% trans " Home" %}'
+                     class="nav-link {% if not submenu.url %}
+                     menu_link_active {% else %} menu_link {% endif %}">
+                    {% trans "Home" %}
+                  </a>
+                </li>
+                <li class="nav-item">
+                  {% url 'apps' as apps_url %}
+                  <a href="{{ apps_url }}" title='{% trans " Apps" %}'
+                     class="nav-link {% if apps_url == submenu.url %}
+                     menu_link_active {% else %} menu_link {% endif %}">
+                    <span class="fa fa-th nav-icon"></span>
+                    {% trans "Apps" %}
+                  </a>
+                </li>
+                <li class="nav-item">
+                  {% url 'system' as system_url %}
+                  <a href="{{ system_url }}" title='{% trans " System" %}'
+                     class="nav-link {% if system_url == submenu.url %}
+                     menu_link_active {% else %} menu_link {% endif %}">
+                    <span class="fa fa-cog nav-icon"></span>
+                    {% trans "System" %}
+                  </a>
+                </li>
+              {% endif %}
+            {% endblock %}
+          </ul>
+          <ul class="navbar-nav">
+            {% block mainmenu_right %}
 
-              {% include "help-menu.html" %}
+              {% if user.is_authenticated %}
 
-              <li id="id_user_menu" class="dropdown">
-                <a href="{% url 'users:edit' request.user.username %}"
-                   class="dropdown-toggle" data-toggle="dropdown"
-                   role="button" aria-expanded="false">
-                  <i class="fa fa-user nav-icon"></i>
-                  {{ request.user.username }}
-                  <span class="caret"></span>
-                </a>
-                <ul class="dropdown-menu" role="menu">
-                  <li>
-                    <a id="id_user_edit_menu"
-                       href="{% url 'users:edit' request.user.username %}"
-                       title="{% trans "Edit"%}">
-                      {% trans "Edit" %}
-                    </a>
-                  </li>
-                  <li>
-                    <a id='id_change_password_menu'
-                       href="{% url 'users:change_password' request.user.username %}"
-                       title="{% trans "Change password" %}">
-                      {% trans "Change password" %}
-                    </a>
-                  </li>
-                  <li class="divider hidden-xs"></li>
-                  {% if user_is_admin %}
-                    <li class="hidden-xs">
-                      <a href="{% url 'power:restart' %}"
-                         title="{% trans "Restart"%}">
-                        {% trans "Restart" %}
+                {% include "notifications-dropdown.html" %}
+
+                {% include "help-menu.html" %}
+
+                <li id="id_user_menu" class="nav-item dropdown">
+                  <a href="{% url 'users:edit' request.user.username %}"
+                     class="nav-link dropdown-toggle" data-toggle="dropdown"
+                     role="button" aria-expanded="false" aria-haspopup="true"
+                     id="id_user_menu_link">
+                    <i class="fa fa-user nav-icon"></i>
+                    {{ request.user.username }}
+                  </a>
+                  <ul class="dropdown-menu" role="menu"
+                      aria-labelledby="id_user_menu_link">
+                    <li>
+                      <a id="id_user_edit_menu" class="dropdown-item"
+                         href="{% url 'users:edit' request.user.username %}"
+                         title="{% trans "Edit"%}">
+                        {% trans "Edit" %}
                       </a>
                     </li>
-                    <li class="hidden-xs">
-                      <a href="{% url 'power:shutdown' %}"
-                         title="{% trans "Shut down" %}">
-                        {% trans "Shut down" %}
+                    <li>
+                      <a id="id_change_password_menu" class="dropdown-item"
+                         href="{% url 'users:change_password' request.user.username %}"
+                         title="{% trans "Change password" %}">
+                        {% trans "Change password" %}
                       </a>
                     </li>
-                    <li class="divider hidden-xs"></li>
-                  {% endif %}
-                  <li>
-                    <a href="{% url 'users:logout' %}"
-                       title="{% trans "Log out" %}">
-                      {% trans "Log out" %}
-                    </a>
-                  </li>
-                </ul>
-              </li>
-            {% else %}
-              <li>
-                <a href="{% url 'language-selection' %}?next={{ request.path|iriencode }}"
-                   title="{% trans "Select language" %}">
-                  <span class="fa fa-globe-w  nav-icon"></span>
-                  <span class="nav-text hidden-sm hidden-md hidden-lg">
-                    {% trans "Select language" %}
-                  </span>
-                </a>
-              </li>
-              <li>
-                  <a href="{% url 'users:login' %}" title="{% trans "Log in" %}">
+                    <li class="dropdown-divider d-none d-md-block"></li>
+                    {% if user_is_admin %}
+                      <li>
+                        <a class="dropdown-item" href="{% url 'power:restart' %}"
+                           title="{% trans "Restart"%}">
+                          {% trans "Restart" %}
+                        </a>
+                      </li>
+                      <li>
+                        <a class="dropdown-item" href="{% url 'power:shutdown' %}"
+                           title="{% trans "Shut down" %}">
+                          {% trans "Shut down" %}
+                        </a>
+                      </li>
+                      <li class="dropdown-divider d-none d-md-block"></li>
+                    {% endif %}
+                    <li>
+                      <a class="dropdown-item" href="{% url 'users:logout' %}"
+                         title="{% trans "Log out" %}">
+                        {% trans "Log out" %}
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+              {% else %}
+                <li class="nav-item">
+                  <a class="nav-link"
+                     href="{% url 'language-selection' %}?next={{ request.path|iriencode }}"
+                     title="{% trans "Select language" %}">
+                    <span class="fa fa-globe-w nav-icon"></span>
+                    <span class="nav-text d-inline-block d-md-none">
+                      {% trans "Select language" %}
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="{% url 'users:login' %}"
+                     title="{% trans "Log in" %}">
                     <i class="fa fa-user nav-icon"></i>
                     {% trans "Log in" %}</a>
-              </li>
-            {% endif %}
+                </li>
+              {% endif %}
 
-            {% if user.is_authenticated %}
-              <li id="logout-nojs">
-                <a href="{% url 'users:logout' %}" title="{% trans "Log out" %}">
-                  <i class="fa fa-times-circle nav-icon"></i>
-                  {% trans "Log out" %}</a>
-              </li>
-            {% endif %}
-          {% endblock %}
-        </ul>
-      </div>
+              {% if user.is_authenticated %}
+                <li id="logout-nojs" class="nav-item">
+                  <a class="nav-link" href="{% url 'users:logout' %}"
+                     title="{% trans "Log out" %}">
+                    <i class="fa fa-times-circle nav-icon"></i>
+                    {% trans "Log out" %}</a>
+                </li>
+              {% endif %}
+            {% endblock %}
+          </ul>
+        </div>
+      </nav>
 
       {% include "notifications.html" %}
     </div>
@@ -243,7 +242,7 @@
       {% endblock %}
     </div>
 
-    <div class="hidden">
+    <div class="d-none">
       <a href="{% static 'jslicense.html' %}" data-jslicense="1">
         {% trans "JavaScript license information" %}</a>
     </div>
diff --git a/plinth/templates/card.html b/plinth/templates/card.html
index 37e364a7d..fded24c76 100644
--- a/plinth/templates/card.html
+++ b/plinth/templates/card.html
@@ -4,7 +4,7 @@
 
 {% load static %}
 
-<div class="card thumbnail">
+<div class="card">
   <a href="{{ item.url }}" class="nav-link">
     <div class="card-title">{{ item.name }}</div>
     <div class="card-icon">
diff --git a/plinth/templates/cards.html b/plinth/templates/cards.html
index f48437e6e..da19bdc3a 100644
--- a/plinth/templates/cards.html
+++ b/plinth/templates/cards.html
@@ -9,7 +9,7 @@
 {% block container %}
   <div class="container">
     <div class="row">
-      <div class="col-md-8 col-md-offset-2">
+      <div class="col-lg-8 offset-lg-2">
         {% include 'messages.html' %}
       </div>
     </div>
diff --git a/plinth/templates/help-menu.html b/plinth/templates/help-menu.html
index ab54f353e..99d01524c 100644
--- a/plinth/templates/help-menu.html
+++ b/plinth/templates/help-menu.html
@@ -4,45 +4,45 @@
 
 {% load i18n %}
 
-<li class="dropdown">
+<li id="id_help_menu" class="dropdown nav-item">
   <a href="{% url 'help:index' %}" title="{% trans "Help" %}"
-     class="dropdown-toggle" data-toggle="dropdown"
-     role="button" aria-expanded="false">
+     class="nav-link dropdown-toggle" data-toggle="dropdown"
+     role="button" aria-expanded="false" aria-haspopup="true"
+     id="id_help_menu_link">
     <span class="fa fa-question-circle nav-icon"></span>
-    <span class="nav-text hidden-sm hidden-md hidden-lg">
+    <span class="nav-text d-md-none">
       {% trans "Help" %}
     </span>
-    <span class="caret"></span>
   </a>
-  <ul class="dropdown-menu" role="menu">
+  <ul class="dropdown-menu" role="menu" aria-labelledby="id_help_menu_link">
     <li>
-      <a href="{% url 'help:manual' %}"
+      <a href="{% url 'help:manual' %}" class="dropdown-item"
          title="{% trans "Manual" context "User guide" %}">
         {% trans "Manual" context "User guide" %}
       </a>
     </li>
-    <li role="separator" class="divider hidden-xs"></li>
+    <li role="separator" class="dropdown-divider d-none d-md-block"></li>
     <li>
-      <a href="{% url 'help:support' %}"
+      <a href="{% url 'help:support' %}" class="dropdown-item"
          title="{% trans "Get Support" %}">
         {% trans "Get Support" %}
       </a>
     </li>
     <li>
-      <a href="{% url 'help:feedback' %}"
+      <a href="{% url 'help:feedback' %}" class="dropdown-item"
          title="{% trans "Submit Feedback" %}">
         {% trans "Submit Feedback" %}
       </a>
     </li>
     <li>
-      <a href="{% url 'help:contribute' %}"
+      <a href="{% url 'help:contribute' %}" class="dropdown-item"
          title="{% trans "Contribute" %}">
         {% trans "Contribute" %}
       </a>
     </li>
-    <li role="separator" class="divider hidden-xs"></li>
+    <li role="separator" class="dropdown-divider d-none d-md-block"></li>
     <li>
-      <a href="{% url 'help:about' %}"
+      <a href="{% url 'help:about' %}" class="dropdown-item"
          title="{% trans "About" %}">
         {% trans "About" %}
       </a>
diff --git a/plinth/templates/index.html b/plinth/templates/index.html
index b353efbfd..9353b3d73 100644
--- a/plinth/templates/index.html
+++ b/plinth/templates/index.html
@@ -63,7 +63,7 @@
           {% for shortcut in shortcuts %}
             {% if shortcut.is_enabled %}
               {% if user.is_authenticated or not shortcut.login_required %}
-                <div class="card thumbnail">
+                <div class="card">
                   {% if selected_shortcut.component_id == shortcut.component_id %}
                     <a href="{{ shortcut.url }}" class="nav-link active">
                   {% else %}
@@ -122,7 +122,7 @@
   </p>
 
   <div class="row">
-    <div class="col-md-2 col-md-offset-3">
+    <div class="col-lg-2 offset-lg-3">
       <p>
         <a href="https://wiki.debian.org/FreedomBox/Manual">
           {% trans "Manual" context "User guide"%}
@@ -132,7 +132,7 @@
         <a href="https://wiki.debian.org/FreedomBox">{% trans "Wiki" %}</a>
       </p>
     </div>
-    <div class="col-md-2">
+    <div class="col-lg-2">
       <p>
         <a href="https://freedombox.org">{% trans "Homepage" %}</a>
       </p>
@@ -148,7 +148,7 @@
         </a>
       </p>
     </div>
-    <div class="col-md-2">
+    <div class="col-lg-2">
       <p>
         <a href="https://webchat.oftc.net/?randomnick=1&channels=freedombox&prompt=1">
           {%trans "IRC Chatroom" %}
diff --git a/plinth/templates/internal-zone.html b/plinth/templates/internal-zone.html
index eb9546c0e..ee6a809bd 100644
--- a/plinth/templates/internal-zone.html
+++ b/plinth/templates/internal-zone.html
@@ -7,7 +7,7 @@
 {% block internal_zone_warning %}
   {% for component in firewall %}
     {% if not component.is_external %}
-      <div class="bg-warning">
+      <div class="alert alert-warning" role="alert">
         {% blocktrans trimmed with service_name=component.name %}
           <em>{{ service_name }}</em> is available only on internal networks or when the client is connected to {{ box_name }} through VPN.
         {% endblocktrans %}
diff --git a/plinth/templates/messages.html b/plinth/templates/messages.html
index c4a53d391..9fe1932ff 100644
--- a/plinth/templates/messages.html
+++ b/plinth/templates/messages.html
@@ -6,7 +6,10 @@
 
 {% for message in messages %}
   <div class='alert alert-{{ message.tags }} alert-dismissable'>
-    <a class="close" data-dismiss="alert">&times;</a>
     {{ message }}
+    <button type="button" class="close" data-dismiss="alert"
+            aria-label="{% trans "Close" %}">
+      <span aria-hidden="true">&times;</span>
+    </button>
   </div>
 {% endfor %}
diff --git a/plinth/templates/notifications-dropdown.html b/plinth/templates/notifications-dropdown.html
index f1c65ebf5..dda5df833 100644
--- a/plinth/templates/notifications-dropdown.html
+++ b/plinth/templates/notifications-dropdown.html
@@ -7,15 +7,15 @@
 {% load i18n %}
 
 {% if notifications %}
-  <li class="dropdown notifications-dropdown">
-    <a href="#" title="{% trans "Notifications" %}" class="dropdown-toggle"
-       data-toggle="dropdown" role="button" aria-expanded="false"
+  <li class="nav-item dropdown notifications-dropdown">
+    <a href="#" title="{% trans "Notifications" %}"
+       class="nav-link dropdown-toggle" data-toggle="dropdown"
+       role="button" aria-expanded="false" aria-haspopup="true"
        data-target=".notifications">
       <span class="fa fa-bell nav-icon"></span>
-      <span class="badge badge-{{ notifications_max_severity }}">
+      <span class="badge badge-pill badge-{{ notifications_max_severity }}">
         {{ notifications|length }}
       </span>
-      <span class="caret"></span>
     </a>
   </li>
 {% endif %}
diff --git a/plinth/templates/subsubmenu.html b/plinth/templates/subsubmenu.html
index e66314c26..c72c41e1c 100644
--- a/plinth/templates/subsubmenu.html
+++ b/plinth/templates/subsubmenu.html
@@ -6,9 +6,9 @@
 
 <ul class="nav nav-tabs">
   {% for urlitem in subsubmenu %}
-    <li {% if urlitem.active %} class="active"{% endif %}
-        role="presentation">
-      <a href="{{ urlitem.url }}">{{ urlitem.text }}</a>
+    <li class="nav-item" role="presentation">
+      <a class="{% if urlitem.active %} active {% endif %} nav-link"
+         href="{{ urlitem.url }}">{{ urlitem.text }}</a>
     </li>
   {% endfor %}
 </ul>
diff --git a/plinth/templates/toolbar.html b/plinth/templates/toolbar.html
index 2bb639482..87d3d62b2 100644
--- a/plinth/templates/toolbar.html
+++ b/plinth/templates/toolbar.html
@@ -11,28 +11,9 @@
 
       {% include "clients-button.html" with clients=app_info.clients enabled=is_enabled %}
 
-      {% if has_diagnostics %}
-        <!-- Single button -->
-        <div class="btn-group button-extra-actions">
-          <button type="button" class="btn btn-default dropdown-toggle"
-                  data-toggle="dropdown" aria-haspopup="true"
-                  aria-expanded="false">
-            <span class="fa fa-cog" aria-hidden="true"></span>
-            <span class="caret"></span>
-          </button>
-          <ul class="dropdown-menu">
-            {% if has_diagnostics %}
-              <li>
-                {% include "diagnostics_button.html" with app_id=app_id enabled=is_enabled %}
-              </li>
-            {% endif %}
-          </ul>
-        </div>
-      {% endif %}
-
       {% if app_info.donation_url %}
         <a target="_blank" rel="noopener noreferrer"
-           class="btn btn-default button-donate" role="button"
+           class="btn btn-default button-secondary button-donate" role="button"
            href="{{ app_info.donation_url }}">
           <span class="fa fa-heart"></span>
           {% trans "Donate" %}
@@ -40,6 +21,22 @@
         </a>
       {% endif %}
 
+      {% if has_diagnostics %}
+        <!-- Single button -->
+        <div class="btn-group button-secondary">
+          <button type="button" class="btn btn-default dropdown-toggle"
+                  data-toggle="dropdown" aria-haspopup="true"
+                  aria-expanded="false" id="id_extra_actions_button">
+            <span class="fa fa-cog" aria-hidden="true"></span>
+          </button>
+          <div class="dropdown-menu" aria-labelledby="id_extra_actions_button">
+            {% if has_diagnostics %}
+              {% include "diagnostics_button.html" with app_id=app_id enabled=is_enabled %}
+            {% endif %}
+          </div>
+        </div>
+      {% endif %}
+
     </div>
     <div class="toolbar-collapsed-content">
       {% include "clients.html" with clients=app_info.clients enabled=is_enabled %}
diff --git a/plinth/tests/functional/__init__.py b/plinth/tests/functional/__init__.py
index 661da9863..3bec1c31c 100644
--- a/plinth/tests/functional/__init__.py
+++ b/plinth/tests/functional/__init__.py
@@ -464,7 +464,7 @@ def networks_set_firewall_zone(browser, zone):
     """"Set the network device firewall zone as internal or external."""
     nav_to_module(browser, 'networks')
     device = browser.find_by_xpath(
-        '//span[contains(@class, "label-success") '
+        '//span[contains(@class, "badge-success") '
         'and contains(@class, "connection-status-label")]/following::a').first
     network_id = device['href'].split('/')[-3]
     device.click()
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index 2cc6785ba..a0428a187 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -69,12 +69,91 @@
     font-weight: 800;
 }
 
+/*
+ * Bootstrap override
+ */
+/* Heading margins from bootstrap 3 */
+h1, h2, h3, h4, h5, h6 {
+    margin-top: 1.25rem;
+    margin-bottom: 0.625rem;
+}
 
+/* Warning colors from bootstrap 3 */
+.badge-warning,
+.bg-warning,
+.btn-warning {
+    background-color: #f0ad4e !important;
+    color: #fff;
+}
+
+.btn[disabled] {
+    cursor: not-allowed !important;
+    opacity: .65;
+    box-shadow: none;
+}
+
+/* Primary color changed in bootstrap 4 */
+.btn-primary {
+    background-color: #337ab7;
+    border-color: #2e6da4;
+}
+
+.btn-primary:hover,
+.btn-primary:active,
+.btn-primary:focus,
+.btn-primary:disabled,
+.btn-primary.disabled,
+.btn-primary[disabled] {
+    background-color: #286090;
+    border-color: #204d74;
+}
+
+/* Default style removed in bootstrap 4 */
+.btn-default {
+    color: #333;
+    background-color: #fff;
+    border-color: #ccc;
+}
+
+.btn-default:hover,
+.btn-default:focus,
+.btn-default:active {
+    color: #333;
+    background-color: #e6e6e6;
+    border-color: #adadad;
+}
+
+/* Help block removed from bootstrap 4, needs updated django-bootstrap-from */
+.help-block {
+    display: block;
+    margin-top: 5px;
+    margin-bottom: 10px;
+    color: #737373;
+}
+
+/* form-horizontal removed in bootstrap, needs updated django-bootstrap-form */
+.form-horizontal > .form-group {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -15px;
+    margin-left: -15px;
+}
+
+.radio .help-block {
+    padding-left: 1.2rem;
+}
+
+.checkbox .help-block {
+    padding-left: 1.4rem;
+}
+
+/*
+ * Basic styling
+ */
 body {
     padding-top: 6em;
     position: relative;
     font-family: Lato, sans-serif;
-    font-size: 15px;
     background: url('../img/noise.png') var(--background-color);
 }
 
@@ -94,25 +173,35 @@ body {
     list-style-type: none;
 }
 
-.nav .fa {
+.navbar .fa:not(.fa-bars) {
     margin-right: 4px;
 }
 
 .navbar-brand .fa {
     float: left;
-    margin-top: -19px;
+    margin-top: -7px;
     padding: 8px;
 }
 
 .navbar-brand {
     height: 53px;
-    margin-right: -30px;
+    margin-right: -20px;
+}
+
+@media (max-width: 767px) {
+    .navbar-brand {
+        margin-right: auto;
+    }
 }
 
 .nav-tabs {
     margin-bottom: 20px;
 }
 
+.dropdown-toggle::after {
+    vertical-align: middle;
+}
+
 .running-status-parent {
     display: inline-block;
 }
@@ -148,30 +237,13 @@ body {
     }
 }
 
-.form-diagnostics-button {
-    display: block;
-}
-
-.form-diagnostics-button .btn {
-    width: 100%;
-    border-radius: 0;
-    border: none;
-    text-align: left;
-    padding: 3px 20px;
-}
-
-.form-diagnostics-button .btn:hover,
-.form-diagnostics-button .btn:focus {
-    background-color: var(--neutral-light-color)
-}
-
 /* Hide log out button if user dropdown is available */
 .js #logout-nojs {
     display: none;
 }
 
 /* Hide the dropdown icon when javascript is not available */
-.no-js .nav .dropdown .caret {
+.no-js .dropdown-toggle:after {
     display: none;
 }
 
@@ -247,7 +319,7 @@ footer {
 }
 
 #clients .btn {
-    width: 8em;
+    width: 9em;
     margin-right: 1em;
 }
 
@@ -278,42 +350,49 @@ footer {
     text-align: right;
 }
 
-/* applying styles to header - begin */
+/*
+ * Top navigation
+ */
 .main-header {
     background: var(--freedombox-blue-color);
     box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.25);
     border: none;
 }
 
-.main-header .navbar-nav>li>a {
+.main-header > .container > nav.navbar {
+    padding: 0;
+}
+
+.main-header .navbar-nav > li > a,
+.main-header .navbar-toggler {
     color: #FFF;
 }
 
-.main-header.navbar-default .navbar-nav>li>a:focus,
-.main-header.navbar-default .navbar-nav>li>a:hover,
-.main-header.navbar-default .navbar-nav>.active>a,
-.main-header.navbar-default .navbar-nav>.active>a:hover,
-.main-header.navbar-default .navbar-nav>.active>a:focus,
-.main-header.navbar-default .navbar-nav>.open>a,
-.main-header.navbar-default .navbar-nav>.open>a:hover,
-.main-header.navbar-default .navbar-nav>.open>a:focus {
-    color: #FFF;
-    background: transparent;
+.main-header .nav-item .nav-link {
+    padding: 15px !important;
+    height: 52px;
+}
+
+.main-header .navbar-toggler {
+    border: 1px solid #ddd;
 }
 
 @media screen and (max-width: 767px) {
-    .main-header.navbar-default .navbar-nav>.open .dropdown-menu > li > a,
-    .main-header.navbar-default .navbar-nav>.open .dropdown-menu > li > a:hover {
+    .main-header .navbar-nav .dropdown-menu {
+        background-color: var(--freedombox-blue-color);
+    }
+
+    .main-header .navbar-nav > li > a:focus,
+    .main-header .navbar-nav > li > a:hover,
+    .main-header .navbar-nav .show a,
+    .main-header .navbar-nav .show a:hover,
+    .main-header .navbar-nav .show a:focus {
         color: #FFF;
+        background: transparent;
     }
 }
 
-.navbar-default .navbar-toggle .icon-bar {
-    background-color: #FFF;
-}
-
-/* applying styles to header - end */
-
+/* Cards in Apps, System and Help pages */
 .card-list {
   display: flex;
   flex-wrap: wrap;
@@ -325,8 +404,8 @@ footer {
     font-style: italic;
     font-weight: 800;
     font-size: 20px;
-    padding: 0 4.6rem;
-    margin: 2rem 0;
+    padding: 0 2.875rem;
+    margin: 1.25rem 0;
 }
 
 .card-section-title:before, .card-section-title:after {
@@ -334,7 +413,7 @@ footer {
     content: '';
     flex: 1;
     border-bottom: var(--neutral-dark-color) solid 2px;
-    margin: auto 1.8rem;
+    margin: auto 1.125rem;
 }
 
 a.menu_link {
@@ -350,13 +429,16 @@ a.menu_link_active {
 }
 
 .card {
+    display: block;
+    line-height: 1.42857143;
     text-align: center;
     box-shadow: 0 3px 5px 0 rgba(0,0,0,0.12);
-    width: 16rem;
+    width: 10rem;
     padding: 0;
     margin: 0 10px 20px;
     border: none;
     border-radius: 8px;
+    transition: border .2s ease-in-out;
 }
 
 .card:hover {
@@ -374,6 +456,7 @@ a.menu_link_active {
     font-weight: 800;
     font-size: 20px;
     padding: 12px 0;
+    margin-bottom: 0;
 }
 
 .card-description {
@@ -407,7 +490,7 @@ a.menu_link_active {
 /* System page - special card styling */
 .system-page .card {
     text-align: left;
-    width: 23rem;
+    width: 14.375rem;
 }
 
 .system-page .card .nav-link {
@@ -443,7 +526,7 @@ a.menu_link_active {
     grid-row: 2;
     grid-column: 2;
     padding: 0;
-    min-height: 1.8rem;
+    min-height: 1.125rem;
 }
 
 /* Button table - Tables with a list of actions as buttons on top */
@@ -451,25 +534,16 @@ a.menu_link_active {
     margin-top: 10px;
 }
 
-.bg-warning {
-    margin: 10px 0;
-    padding: 15px;
-}
-
-.bg-warning p:last-child {
-    margin: 0;
-}
-
 .index-page .card-list:before,
 .apps-page .card-list:before,
 .system-page .card-list:before {
     position: relative;
-    width: 40rem;
-    height: 40rem;
-    margin-left: -40rem;
-    margin-bottom: -40rem;
-    left: 30rem;
-    top: -2rem;
+    width: 25rem;
+    height: 25rem;
+    margin-left: -25rem;
+    margin-bottom: -25rem;
+    left: 18.75rem;
+    top: -1.25rem;
     content: " ";
     background-size: 100%;
     background-repeat: no-repeat;
@@ -573,9 +647,19 @@ input[type='submit'].running-status-button {
     margin-bottom: 10px;
 }
 
-.btn-toolbar .button-extra-actions,
-.btn-toolbar .button-donate {
-    float: right;
+.btn-toolbar > :not(:last-child):not(.running-status-button-before) {
+    margin-right: 0.5rem;
+}
+
+.btn-toolbar .button-secondary:first-child,
+.btn-toolbar .btn:not(.button-secondary) + .button-secondary,
+.btn-toolbar .btn:not(.button-secondary) + .running-status-button-before {
+    margin-left: auto;
+}
+
+.btn-toolbar > .running-status-button-before {
+    margin-bottom: 0;
+    align-self: center;
 }
 
 /*
@@ -611,9 +695,9 @@ input[type='submit'].running-status-button {
 }
 
 .app-titles h3 {
-    margin-top: -0.5rem;
-    margin-bottom: 1.6rem;
-    font-size: 1.6rem;
+    margin-top: -0.3125rem;
+    margin-bottom: 1rem;
+    font-size: 1rem;
     font-weight: normal;
     font-style: italic;
 }
@@ -678,12 +762,12 @@ input[type='submit'].running-status-button {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     margin-top: 0;
+    background-clip: border-box;
 }
 
 /* Style for individual notification */
 .notification {
-    padding: 1rem 1.5rem;
-    font-size: 15px;
+    padding: 0.625rem 0.9375rem;
     border-left: 5px solid;
 }
 
@@ -697,9 +781,9 @@ input[type='submit'].running-status-button {
 
 img.notification-icon {
     display: inline-block;
-    width: 1.4rem;
-    height: 1.4rem;
-    margin-top: -0.4rem;
+    width: 0.875rem;
+    height: 0.875rem;
+    margin-top: -0.25rem;
 }
 
 /* Show badge with various colors and overlap it onto icon */
@@ -709,6 +793,7 @@ img.notification-icon {
     color: #fff;
 }
 
+/* TODO: match with or use bootstrap 4 colors */
 .badge-exception, .badge-error {
     background-color: var(--error-color);
 }
@@ -733,19 +818,21 @@ img.notification-icon {
     border-left-color: var(--info-color)
 }
 
-/* Don't collapse notifications on small screens */
-.collapsing .notifications-dropdown,
-.collapse.in .notifications-dropdown {
+/* Two different notifications for each small and one for large screens */
+.notifications-dropdown {
     display: none;
 }
 
-.navbar-header .navbar-nav {
-    float: right;
-    margin: 6px 10px;
+.collapse .notifications-dropdown {
+    display: block;
 }
 
-@media(min-width:768px) {
-    .navbar-header .navbar-nav {
+@media screen and (max-width: 767px) {
+    .notifications-dropdown {
+        display: block;
+    }
+
+    .collapse .notifications-dropdown {
         display: none;
     }
 }