From 26ed950ef68f4a5d2c882d882e744a186d0d7f93 Mon Sep 17 00:00:00 2001
From: Matt Raible <matt@raibledesigns.com>
Date: Tue, 11 Aug 2026 16:36:00 -0600
Subject: [PATCH] Convert the admin and editor UI from Bootstrap 3 to Bootstrap
 5.3

Restores the bootstrap form theme via struts2-bootstrap-plugin 6.1.0, which is Jakarta-native and emits Bootstrap 5 markup, and converts the JSPs and basic themes accordingly: class renames, data-bs-* attributes, navbar restructure, and bootstrap-icons in place of glyphicons. A tooltip.ftl template override emits data-bs-toggle so field help renders as opt-in Bootstrap tooltips initialised in roller.js. WebJar assets are served straight from META-INF/resources by the servlet container, so the webjars servlet is removed. The profile page shows the OIDC issuer and subject as separate read-only fields instead of the raw federated identity string.
---
 app/pom.xml                                   |  12 +-
 .../resources/ApplicationResources.properties |   4 +
 .../resources/template/bootstrap/tooltip.ftl  |  24 ++
 .../webapp/WEB-INF/jsps/admin/CacheInfo.jsp   |   2 +-
 .../WEB-INF/jsps/admin/GlobalConfig.jsp       |  10 +-
 .../webapp/WEB-INF/jsps/admin/PingTargets.jsp |  12 +-
 .../WEB-INF/jsps/admin/PlanetConfig.jsp       |   2 +-
 .../WEB-INF/jsps/admin/PlanetGroupSidebar.jsp |   2 +-
 .../WEB-INF/jsps/admin/PlanetGroupSubs.jsp    |  18 +-
 .../jsps/admin/PlanetGroupSubsSidebar.jsp     |   4 +-
 .../WEB-INF/jsps/admin/PlanetGroups.jsp       |   4 +-
 .../webapp/WEB-INF/jsps/admin/UserAdmin.jsp   |   2 +-
 .../WEB-INF/jsps/core/CreateDatabase.jsp      |   2 +-
 .../webapp/WEB-INF/jsps/core/CreateWeblog.jsp |  31 +-
 .../main/webapp/WEB-INF/jsps/core/Login.jsp   |  40 +--
 .../webapp/WEB-INF/jsps/core/MainMenu.jsp     |  32 +--
 .../WEB-INF/jsps/core/MainMenuSidebar.jsp     |   6 +-
 .../main/webapp/WEB-INF/jsps/core/Profile.jsp |  24 +-
 .../webapp/WEB-INF/jsps/core/Register.jsp     |  18 +-
 .../main/webapp/WEB-INF/jsps/core/Setup.jsp   |  26 +-
 .../WEB-INF/jsps/core/UpgradeDatabase.jsp     |   8 +-
 .../webapp/WEB-INF/jsps/editor/Bookmarks.jsp  |  28 +-
 .../WEB-INF/jsps/editor/BookmarksImport.jsp   |   6 +-
 .../WEB-INF/jsps/editor/BookmarksSidebar.jsp  |   4 +-
 .../webapp/WEB-INF/jsps/editor/Categories.jsp |  10 +-
 .../WEB-INF/jsps/editor/CategoriesSidebar.jsp |   2 +-
 .../webapp/WEB-INF/jsps/editor/Comments.jsp   |   2 +-
 .../WEB-INF/jsps/editor/CommentsSidebar.jsp   |  14 +-
 .../webapp/WEB-INF/jsps/editor/Entries.jsp    |  22 +-
 .../WEB-INF/jsps/editor/EntriesSidebar.jsp    |  14 +-
 .../webapp/WEB-INF/jsps/editor/EntryEdit.jsp  |  86 +++---
 .../WEB-INF/jsps/editor/EntryEditor.jsp       |  24 +-
 .../WEB-INF/jsps/editor/EntrySidebar.jsp      |   8 +-
 .../WEB-INF/jsps/editor/Maintenance.jsp       |   6 +-
 .../WEB-INF/jsps/editor/MediaFileAdd.jsp      |  29 +-
 .../editor/MediaFileAddExternalInclude.jsp    | 124 ++++----
 .../jsps/editor/MediaFileAddSuccess.jsp       |  18 +-
 .../WEB-INF/jsps/editor/MediaFileEdit.jsp     |  16 +-
 .../jsps/editor/MediaFileImageChooser.jsp     | 266 +++++++++---------
 .../WEB-INF/jsps/editor/MediaFileSidebar.jsp  |   8 +-
 .../WEB-INF/jsps/editor/MediaFileView.jsp     |   8 +-
 .../WEB-INF/jsps/editor/MemberResign.jsp      |   4 +-
 .../webapp/WEB-INF/jsps/editor/Members.jsp    |   4 +-
 .../WEB-INF/jsps/editor/MembersInvite.jsp     |   7 +-
 .../WEB-INF/jsps/editor/MembersSidebar.jsp    |   2 +-
 .../WEB-INF/jsps/editor/StylesheetEdit.jsp    |  18 +-
 .../WEB-INF/jsps/editor/TemplateEdit.jsp      |  28 +-
 .../webapp/WEB-INF/jsps/editor/Templates.jsp  |   4 +-
 .../WEB-INF/jsps/editor/TemplatesSidebar.jsp  |   4 +-
 .../webapp/WEB-INF/jsps/editor/ThemeEdit.jsp  |  47 ++--
 .../WEB-INF/jsps/editor/WeblogConfig.jsp      |   4 +-
 .../jsps/editor/WeblogRemoveConfirm.jsp       |   4 +-
 .../WEB-INF/jsps/tiles/bannerInstallation.jsp |  10 +-
 .../WEB-INF/jsps/tiles/bannerStatus.jsp       |  66 ++---
 .../main/webapp/WEB-INF/jsps/tiles/head.jsp   |   6 +-
 .../main/webapp/WEB-INF/jsps/tiles/menu.jsp   |  18 +-
 .../webapp/WEB-INF/jsps/tiles/messages.jsp    |  12 +-
 .../WEB-INF/jsps/tiles/tiles-mainmenupage.jsp |  12 +-
 .../jsps/tiles/tiles-simple-tabbedpage.jsp    |   4 +-
 .../WEB-INF/jsps/tiles/tiles-simplepage.jsp   |   4 +-
 .../WEB-INF/jsps/tiles/tiles-tabbedpage.jsp   |  12 +-
 .../main/webapp/roller-ui/styles/roller.css   |  43 ++-
 app/src/main/webapp/theme/scripts/roller.js   |  11 +
 63 files changed, 698 insertions(+), 604 deletions(-)
 create mode 100644 app/src/main/resources/template/bootstrap/tooltip.ftl

diff --git a/app/pom.xml b/app/pom.xml
index e127402c0d..5d375b79f7 100644
--- a/app/pom.xml
+++ b/app/pom.xml
@@ -58,6 +58,8 @@ limitations under the License.
         <spring.security.version>7.0.6</spring.security.version>
         <struts.version>7.1.1</struts.version>
         <struts-bootstrap.version>6.1.0</struts-bootstrap.version>
+        <bootstrap.version>5.3.8</bootstrap.version>
+        <bootstrap-icons.version>1.13.1</bootstrap-icons.version>
         <velocity.version>2.4.1</velocity.version>
         <ws-commons-util.version>1.0.2</ws-commons-util.version>
         <xmlrpc-version>3.1.3</xmlrpc-version>
@@ -246,7 +248,6 @@ limitations under the License.
             <version>${struts.version}</version>
         </dependency>
 
-        <!-- note: update head.jsp on webjar version change -->
         <!-- Supplies the "bootstrap" form theme templates the JSPs render with.
              Maintained at github.com/struts-community-plugins/struts2-bootstrap. -->
         <dependency>
@@ -255,12 +256,19 @@ limitations under the License.
             <version>${struts-bootstrap.version}</version>
         </dependency>
 
+        <!-- note: update head.jsp on webjar version change -->
         <!-- WebJar assets live under META-INF/resources, which Servlet 3.0+
              containers serve from the docroot, so no webjars servlet is needed -->
         <dependency>
             <groupId>org.webjars</groupId>
             <artifactId>bootstrap</artifactId>
-            <version>3.4.1</version>
+            <version>${bootstrap.version}</version>
+        </dependency>
+
+        <dependency>
+            <groupId>org.webjars.npm</groupId>
+            <artifactId>bootstrap-icons</artifactId>
+            <version>${bootstrap-icons.version}</version>
         </dependency>
 
         <dependency>
diff --git a/app/src/main/resources/ApplicationResources.properties b/app/src/main/resources/ApplicationResources.properties
index 5041ab909a..5d8865556b 100644
--- a/app/src/main/resources/ApplicationResources.properties
+++ b/app/src/main/resources/ApplicationResources.properties
@@ -1348,6 +1348,10 @@ userSettings.email=Email
 userSettings.locale=Locale
 userSettings.timeZone=Timezone
 userSettings.openIdUrl=Federated Identity
+userSettings.oidcIssuer=OIDC Issuer
+userSettings.oidcSubject=OIDC Subject
+userSettings.tip.oidcIssuer=The identity provider that authenticated you. Assigned at login and cannot be changed here.
+userSettings.tip.oidcSubject=Your unique identifier at that identity provider. Assigned at login and cannot be changed here.
 userSettings.tip.username=Usernames can''t be changed.
 
 # ----------------------------------------------------------------- Your profile (profile.jsp)
diff --git a/app/src/main/resources/template/bootstrap/tooltip.ftl b/app/src/main/resources/template/bootstrap/tooltip.ftl
new file mode 100644
index 0000000000..90f72298cb
--- /dev/null
+++ b/app/src/main/resources/template/bootstrap/tooltip.ftl
@@ -0,0 +1,24 @@
+<#--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  The ASF licenses this file to You
+ * under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.  For additional information regarding
+ * copyright in this work, please see the NOTICE file in the top level
+ * directory of this distribution.
+ *
+ * Overrides the struts2-bootstrap-plugin template, which still emits the
+ * pre-Bootstrap-5 "data-toggle" attribute. Bootstrap 5 reads "data-bs-toggle"
+ * and tooltips are opt-in, so roller.js initialises these.
+-->
+<#if attributes.tooltip?? && attributes.tooltip?has_content>
+ <i class="bi bi-info-circle s2b_tooltip" data-bs-toggle="tooltip" title="${attributes.tooltip}"></i>
+</#if><#t/>
diff --git a/app/src/main/webapp/WEB-INF/jsps/admin/CacheInfo.jsp b/app/src/main/webapp/WEB-INF/jsps/admin/CacheInfo.jsp
index 5e7e2ea5cc..a3fbda361c 100644
--- a/app/src/main/webapp/WEB-INF/jsps/admin/CacheInfo.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/admin/CacheInfo.jsp
@@ -40,7 +40,7 @@
                     <s:form action="cacheInfo!clear">
 						<s:hidden name="salt" />
                         <s:hidden name="cache" value="%{#cache.key}" />
-                        <s:submit value="%{getText('cacheInfo.clear')}" cssClass="btn btn-default" />
+                        <s:submit theme="simple" value="%{getText('cacheInfo.clear')}" cssClass="btn btn-outline-secondary" />
                     </s:form>
                 </td>
             </tr>
diff --git a/app/src/main/webapp/WEB-INF/jsps/admin/GlobalConfig.jsp b/app/src/main/webapp/WEB-INF/jsps/admin/GlobalConfig.jsp
index fc3494608e..957cd65a58 100644
--- a/app/src/main/webapp/WEB-INF/jsps/admin/GlobalConfig.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/admin/GlobalConfig.jsp
@@ -69,8 +69,8 @@
 
             <%-- "integer" use input type number --%>
             <s:elseif test="#pd.type == 'integer'">
-                <div class="form-group ">
-                    <label class="col-sm-3 control-label"
+                <div class="row mb-3">
+                    <label class="col-sm-3 col-form-label"
                            for='globalConfig_<s:property value="#pd.nameWithUnderbars" />'>
                         <s:text name="%{#pd.key}"/>
                     </label>
@@ -86,8 +86,8 @@
 
             <%-- "float" use input type number --%>
             <s:elseif test="#pd.type == 'float'">
-                <div class="form-group ">
-                    <label class="col-sm-3 control-label"
+                <div class="row mb-3">
+                    <label class="col-sm-3 col-form-label"
                            for='globalConfig_<s:property value="#pd.nameWithUnderbars" />'>
                         <s:text name="%{#pd.key}"/>
                     </label>
@@ -112,7 +112,7 @@
 
     </s:iterator>
 
-    <input id="saveButton" class="btn btn-default" type="submit" value="<s:text name="generic.save"/>"/>
+    <input id="saveButton" class="btn btn-outline-secondary" type="submit" value="<s:text name="generic.save"/>"/>
 
 </s:form>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/admin/PingTargets.jsp b/app/src/main/webapp/WEB-INF/jsps/admin/PingTargets.jsp
index 2fad6cc185..e0914e5355 100644
--- a/app/src/main/webapp/WEB-INF/jsps/admin/PingTargets.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/admin/PingTargets.jsp
@@ -74,13 +74,13 @@
                         '<s:property value="#pingTarget.name" />',
                         '<s:property value="#pingTarget.pingUrl" />'
                         )">
-                    <span class="glyphicon glyphicon-edit" aria-hidden="true"> </span>
+                    <span class="bi bi-pencil-square" aria-hidden="true"> </span>
                 </a>
             </td>
 
             <td class="rollertable" align="center">
                 <a href="#" onclick="showDeleteModal('<s:property value="#pingTarget.id"/>')">
-                    <span class="glyphicon glyphicon-trash" aria-hidden="true"> </span>
+                    <span class="bi bi-trash" aria-hidden="true"> </span>
                 </a>
             </td>
 
@@ -94,7 +94,7 @@
         <s:param name="weblog" value="actionWeblog.handle"/>
     </s:url>
     <a href="#" onclick="showAddEditModal()">
-        <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"> </span>
+        <span class="bi bi-plus-circle" aria-hidden="true"> </span>
         <s:text name="pingTarget.addTarget"/>
     </a>
 </div>
@@ -123,9 +123,9 @@
                 </div>
 
                 <div class="modal-footer">
-                    <s:submit cssClass="btn btn-danger"
+                    <s:submit theme="simple" cssClass="btn btn-danger"
                               value="%{getText('generic.yes')}" action="commonPingTargets!delete"/>
-                    <button type="button" class="btn" data-dismiss="modal">
+                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                         <s:text name="generic.cancel"/>
                     </button>
                 </div>
@@ -190,7 +190,7 @@
                     <s:text name="generic.save"/>
                 </button>
 
-                <button type="button" class="btn" data-dismiss="modal">
+                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                     <s:text name="generic.cancel"/>
                 </button>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/admin/PlanetConfig.jsp b/app/src/main/webapp/WEB-INF/jsps/admin/PlanetConfig.jsp
index 936a42629b..3221fb2e6a 100644
--- a/app/src/main/webapp/WEB-INF/jsps/admin/PlanetConfig.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/admin/PlanetConfig.jsp
@@ -68,6 +68,6 @@
 
     </s:iterator>
 
-     <input class="btn btn-default" type="submit" value="<s:text name="generic.save"/>"/>
+     <input class="btn btn-outline-secondary" type="submit" value="<s:text name="generic.save"/>"/>
 
 </s:form>
diff --git a/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSidebar.jsp b/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSidebar.jsp
index 970ad33b49..f164ca41b7 100644
--- a/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSidebar.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSidebar.jsp
@@ -29,6 +29,6 @@
 </s:url>
 
 <s:a href="%{createNewUrl}">
-    <span class="glyphicon glyphicon-plus" aria-hidden="true"> </span>
+    <span class="bi bi-plus-lg" aria-hidden="true"> </span>
     Create new Custom Planet Group
 </s:a>
diff --git a/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSubs.jsp b/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSubs.jsp
index be7ee804a4..3444e849a2 100644
--- a/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSubs.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSubs.jsp
@@ -49,11 +49,11 @@
 <%-- only show edit form for custom group --%>
 <s:if test="groupHandle != 'all'">
 
-    <div class="panel panel-default">
-        <div class="panel-heading">
+    <div class="card">
+        <div class="card-header">
             <p><s:text name="planetGroupSubs.properties"/></p>
         </div>
-        <div class="panel-body">
+        <div class="card-body">
             <s:if test="createNew">
                 <s:text name="planetGroupSubs.creatingNewGroup" />
             </s:if>
@@ -61,7 +61,7 @@
                 <s:text name="planetGroupSubs.editingExistingGroup" />
             </s:else>
 
-            <s:form action="planetGroupSubs!saveGroup" theme="bootstrap" cssClass="form-horizontal" style="margin-top:1em">
+            <s:form action="planetGroupSubs!saveGroup" theme="bootstrap" style="margin-top:1em" cssClass="form-horizontal">
                 <s:hidden name="salt"/>
                 <s:hidden name="group.id"/>
 
@@ -76,12 +76,12 @@
                              tooltip="%{getText('planetGroups.tip.handle')}"/>
 
 
-                <div class="form-group ">
-                    <label class="col-sm-3 control-label"></label>
+                <div class="row mb-3">
+                    <label class="col-sm-3 col-form-label"></label>
                     <div class="col-sm-9 controls">
-                        <s:submit value="%{getText('generic.save')}" cssClass="btn btn-default"/>
+                        <s:submit theme="simple" value="%{getText('generic.save')}" cssClass="btn btn-outline-secondary"/>
                         <s:if test="createNew">
-                            <input type="button" class="btn"
+                            <input type="button" class="btn btn-outline-secondary"
                                    value='<s:text name="generic.cancel" />'
                                    onclick="window.location='<s:url action="planetGroups"/>'"/>
                         </s:if>
@@ -127,7 +127,7 @@
                     <td><s:set var="feedURL" value="#sub.feedURL"/> ${fn:substring(feedURL, 0, 100)} </td>
                     <td>
                         <a href="javascript: void(0);" onclick="confirmDelete('<s:property value="feedURL"/>')">
-                            <span class="glyphicon glyphicon-remove" aria-hidden="true"> </span>
+                            <span class="bi bi-x-lg" aria-hidden="true"> </span>
                             <s:text name="generic.delete"/>
                         </a>
                     </td>
diff --git a/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSubsSidebar.jsp b/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSubsSidebar.jsp
index a46e1bb90f..458d8bbb9d 100644
--- a/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSubsSidebar.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSubsSidebar.jsp
@@ -29,7 +29,7 @@
     <s:text name="planetGroupSubs.addFeed"/>
 
     <s:form action="planetGroupSubs!saveSubscription"
-            theme="bootstrap" cssClass="form-horizontal" style="margin-top:1em">
+            theme="bootstrap" style="margin-top:1em" cssClass="form-horizontal">
         <s:hidden name="salt"/>
         <s:hidden name="group.handle"/>
 
@@ -38,7 +38,7 @@
 
         <p id="feedback-area" style="clear:right; width:100%"></p>
 
-        <s:submit value="%{getText('generic.save')}" cssClass="btn btn-default" />
+        <s:submit theme="simple" value="%{getText('generic.save')}" cssClass="btn btn-outline-secondary" />
 
     </s:form>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroups.jsp b/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroups.jsp
index 6223ee319d..320677229c 100644
--- a/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroups.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroups.jsp
@@ -44,14 +44,14 @@
                         <s:param name="group.id" value="#group.id"/>
                     </s:url>
                     <s:a href="%{groupUrl}">
-                        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
+                        <span class="bi bi-pencil-square" aria-hidden="true"></span>
                         <s:text name='generic.edit'/>
                     </s:a>
                 </td>
 
                 <td>
                     <a href="javascript: void(0);" onclick="confirmDelete('<s:property value="#group.handle"/>')">
-                        <span class="glyphicon glyphicon-remove" aria-hidden="true"> </span>
+                        <span class="bi bi-x-lg" aria-hidden="true"> </span>
                         <s:text name="generic.delete"/>
                     </a>
                 </td>
diff --git a/app/src/main/webapp/WEB-INF/jsps/admin/UserAdmin.jsp b/app/src/main/webapp/WEB-INF/jsps/admin/UserAdmin.jsp
index 59fd609554..bf719f8dcf 100644
--- a/app/src/main/webapp/WEB-INF/jsps/admin/UserAdmin.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/admin/UserAdmin.jsp
@@ -38,7 +38,7 @@
 
     <s:select class="form-control" id="userList" size="10" onchange="onUserSelected()" list="bean.list" />
 
-    <button type="submit" class="btn btn-default" id="user-submit">
+    <button type="submit" class="btn btn-outline-secondary" id="user-submit">
         <s:text name="generic.edit" />
     </button>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/core/CreateDatabase.jsp b/app/src/main/webapp/WEB-INF/jsps/core/CreateDatabase.jsp
index 66db1ca148..99f17af0fa 100644
--- a/app/src/main/webapp/WEB-INF/jsps/core/CreateDatabase.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/core/CreateDatabase.jsp
@@ -55,7 +55,7 @@
 
     <s:form action="install!create">
 		<s:hidden name="salt" />
-        <s:submit value="%{getText('installer.yesCreateTables')}" cssClass="btn btn-default" />
+        <s:submit theme="simple" value="%{getText('installer.yesCreateTables')}" cssClass="btn btn-outline-secondary" />
     </s:form>
     
 </s:else>
diff --git a/app/src/main/webapp/WEB-INF/jsps/core/CreateWeblog.jsp b/app/src/main/webapp/WEB-INF/jsps/core/CreateWeblog.jsp
index 48c4f08f16..e6d161f444 100644
--- a/app/src/main/webapp/WEB-INF/jsps/core/CreateWeblog.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/core/CreateWeblog.jsp
@@ -34,7 +34,7 @@
                  name="bean.handle" size="30" maxlength="30"
                  onkeyup="handlePreview(this)" data-msg-required="%{getText('CreateWeblog.error.handleNull')}" required="required"/>
 
-    <div class="form-group">
+    <div class="row mb-3">
         <label class="col-sm-3"></label>
         <div class="col-sm-9 controls">
             <s:text name="createWebsite.weblogUrl" />:&nbsp;
@@ -59,24 +59,28 @@
               tooltip="%{getText('createWebsite.tip.timezone')}"
               name="bean.timeZone" size="1" list="timeZonesList"/>
 
-    <div class="form-group" ng-app="themeSelectModule" ng-controller="themeController">
-        <label class="col-sm-3 control-label" for="createWeblog_bean_timeZone">
+    <div class="row mb-3" ng-app="themeSelectModule" ng-controller="themeController">
+        <label class="col-sm-3 col-form-label" for="createWeblog_bean_timeZone">
             <s:text name="createWebsite.theme" />
         </label>
         <div class="col-sm-9 controls">
-            <s:select name="bean.theme" size="1" list="themes" listKey="id" listValue="name"
+            <s:select theme="simple" cssClass="form-select" name="bean.theme" size="1"
+                      list="themes" listKey="id" listValue="name"
                       onchange="previewImage(this[selectedIndex].value)"/>
             <p id="themedescription"></p>
-            <p><img id="themeThumbnail" src="" class="img-responsive img-thumbnail" style="max-width: 30em" /></p>
+            <p><img id="themeThumbnail" src="" class="img-fluid img-thumbnail" style="max-width: 30em" /></p>
 
         </div>
     </div>
 
-    <s:submit cssClass="btn btn-default"
-              value="%{getText('createWebsite.button.save')}"/>
-
-    <input class="btn" type="button" value="<s:text name="generic.cancel"/>"
-           onclick="window.location='<s:url action="menu"/>'"/>
+    <div class="row mb-3">
+        <div class="col-sm-9 offset-sm-3">
+            <s:submit cssClass="btn btn-primary"
+              value="%{getText('createWebsite.button.save')}" theme="simple"/>
+            <input class="btn btn-outline-secondary" type="button" value="<s:text name="generic.cancel"/>"
+                   onclick="window.location='<s:url action="menu"/>'"/>
+        </div>
+    </div>
 
 </s:form>
 
@@ -92,12 +96,7 @@
 
         saveButton = $("#createWeblog_0");
 
-        <s:if test="bean.theme == null">
-        previewImage('<s:property value="themes[0].id"/>');
-        </s:if>
-        <s:else>
-        previewImage('<s:property value="bean.theme"/>');
-        </s:else>
+        previewImage($('select[name="bean.theme"]').val());
 
     });
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/core/Login.jsp b/app/src/main/webapp/WEB-INF/jsps/core/Login.jsp
index 232ae2cd09..5a7b7bfd52 100644
--- a/app/src/main/webapp/WEB-INF/jsps/core/Login.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/core/Login.jsp
@@ -35,29 +35,29 @@
 
     <s:if test="authMethod == 'OIDC' || authMethod == 'DB_OIDC'">
         <s:if test="oidcProviders.size() > 0">
-            <div class="form-group">
-                <legend><s:text name="loginPage.oidcPrompt"/></legend>
-            </div>
-
-            <div class="form-group">
-                <s:iterator value="oidcProviders" var="provider">
-                    <a href="${pageContext.request.contextPath}/oauth2/authorization/<s:property value="#provider.id"/>"
-                       class="btn btn-default" style="margin-bottom: 5px;">
-                        <s:text name="loginPage.signInWith">
-                            <s:param><s:property value="#provider.name"/></s:param>
-                        </s:text>
-                    </a>
-                </s:iterator>
+            <div class="text-center mb-4">
+                <h2 class="h5 mb-3"><s:text name="loginPage.oidcPrompt"/></h2>
+
+                <div class="d-grid gap-2 col-10 mx-auto">
+                    <s:iterator value="oidcProviders" var="provider">
+                        <a href="${pageContext.request.contextPath}/oauth2/authorization/<s:property value="#provider.id"/>"
+                           class="btn btn-primary">
+                            <s:text name="loginPage.signInWith">
+                                <s:param><s:property value="#provider.name"/></s:param>
+                            </s:text>
+                        </a>
+                    </s:iterator>
+                </div>
             </div>
         </s:if>
     </s:if>
 
     <s:if test="authMethod != 'OIDC'">
 
-        <form method="post" id="loginForm" class="form-horizontal"
+        <form method="post" id="loginForm"
               action="<c:url value="<%= securityCheckUrl %>"/>" onsubmit="saveUsername(this)">
 
-            <div class="form-group">
+            <div class="mb-3">
                 <s:if test="authMethod == 'DB_OIDC'">
                     <legend><s:text name="loginPage.dbOidcPrompt"/></legend>
                 </s:if>
@@ -67,29 +67,29 @@
                 </s:else>
             </div>
 
-            <div class="form-group">
+            <div class="mb-3">
                 <label for="j_username" > <s:text name="loginPage.userName"/> </label>
                 <input type="text" class="form-control" name="j_username" id="j_username" placeholder="Username"/>
             </div>
 
-            <div class="form-group">
+            <div class="mb-3">
                 <label for="j_password" > <s:text name="loginPage.password"/> </label>
                 <input type="password" class="form-control" name="j_password" id="j_password" placeholder="Password"/>
             </div>
 
             <c:if test="${rememberMeEnabled}">
-                <div class="form-group">
+                <div class="mb-3">
                     <input type="checkbox" name="_spring_security_remember_me" id="_spring_security_remember_me"/>
                     <label for="_spring_security_remember_me" > <s:text name="loginPage.rememberMe"/> </label>
                 </div>
             </c:if>
 
-            <div class="form-group">
+            <div class="mb-3">
                 <button class="btn btn-primary" type="submit" name="login" id="login">
                     <s:text name='loginPage.login'/>
                 </button>
 
-                <button class="btn" type="reset" name="reset" id="reset"
+                <button class="btn btn-outline-secondary" type="reset" name="reset" id="reset"
                         onclick="document.getElementById('j_username').focus()">
                     <s:text name='loginPage.reset'/>
                 </button>
diff --git a/app/src/main/webapp/WEB-INF/jsps/core/MainMenu.jsp b/app/src/main/webapp/WEB-INF/jsps/core/MainMenu.jsp
index d81dce0083..2802f1acda 100644
--- a/app/src/main/webapp/WEB-INF/jsps/core/MainMenu.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/core/MainMenu.jsp
@@ -61,10 +61,10 @@
     
     <s:iterator var="perms" value="existingPermissions">
 
-        <div class="well yourWeblogBox">
+        <div class="card card-body yourWeblogBox">
 
             <h3 class="mm_weblog_name">
-                <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
+                <span class="bi bi-folder2-open" aria-hidden="true"></span>
                 &nbsp;<s:property value="#perms.weblog.name" />
             </h3>
 
@@ -85,8 +85,8 @@
                 <s:url action="entryAdd" namespace="/roller-ui/authoring" var="newEntry">
                     <s:param name="weblog" value="#perms.weblog.handle"/>
                 </s:url>
-                <s:a href="%{newEntry}" cssClass="btn btn-default">
-                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
+                <s:a href="%{newEntry}" cssClass="btn btn-outline-secondary">
+                    <span class="bi bi-pencil" aria-hidden="true"></span>
                     <s:text name="yourWebsites.newEntry"/>
                 </s:a>
 
@@ -96,10 +96,10 @@
                     <s:url action="entries" namespace="/roller-ui/authoring" var="editEntries">
                         <s:param name="weblog" value="#perms.weblog.handle"/>
                     </s:url>
-                    <s:a href="%{editEntries}" cssClass="btn btn-default">
-                        <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
+                    <s:a href="%{editEntries}" cssClass="btn btn-outline-secondary">
+                        <span class="bi bi-list-ul" aria-hidden="true"></span>
                         <s:text name="yourWebsites.editEntries"/>
-                        <span class="badge"><s:property value="#perms.weblog.entryCount"/></span>
+                        <span class="badge text-bg-secondary ms-1"><s:property value="#perms.weblog.entryCount"/></span>
                     </s:a>
 
                 </s:if>
@@ -110,10 +110,10 @@
                     <s:url action="comments" namespace="/roller-ui/authoring" var="manageComments">
                         <s:param name="weblog" value="#perms.weblog.handle"/>
                     </s:url>
-                    <s:a href="%{manageComments}" cssClass="btn btn-default">
-                        <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
+                    <s:a href="%{manageComments}" cssClass="btn btn-outline-secondary">
+                        <span class="bi bi-chat" aria-hidden="true"></span>
                         <s:text name="yourWebsites.manageComments"/>
-                        <span class="badge"><s:property value="#perms.weblog.commentCount"/></span>
+                        <span class="badge text-bg-secondary ms-1"><s:property value="#perms.weblog.commentCount"/></span>
                     </s:a>
 
                 </s:if>
@@ -134,8 +134,8 @@
                                 <s:param name="weblog" value="#perms.weblog.handle" />
                             </s:url>
                         </s:else>
-                        <a href='<s:property value="weblogTheme" />' class="btn btn-default">
-                            <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
+                        <a href='<s:property value="weblogTheme" />' class="btn btn-outline-secondary">
+                            <span class="bi bi-eye" aria-hidden="true"></span>
                             <s:text name="yourWebsites.theme" />
                         </a>
                     </s:if>
@@ -144,8 +144,8 @@
                     <s:url action="weblogConfig" namespace="/roller-ui/authoring" var="manageWeblog">
                         <s:param name="weblog" value="#perms.weblog.handle"/>
                     </s:url>
-                    <a href='<s:property value="manageWeblog" />' class="btn btn-default">
-                        <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
+                    <a href='<s:property value="manageWeblog" />' class="btn btn-outline-secondary">
+                        <span class="bi bi-gear" aria-hidden="true"></span>
                         <s:text name="yourWebsites.manage"/>
                     </a>
 
@@ -154,8 +154,8 @@
                 <%-- don't allow last admin to resign from blog --%>
                 <s:if test='!(#perms.hasAction("admin") && #perms.weblog.adminUserCount == 1)'>
 
-                    <button type="button" class="btn btn-default">
-                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
+                    <button type="button" class="btn btn-outline-secondary">
+                        <span class="bi bi-trash" aria-hidden="true"></span>
                         <s:url action="memberResign" namespace="/roller-ui/authoring" var="resignWeblog">
                             <s:param name="weblog" value="#perms.weblog.handle"/>
                         </s:url>
diff --git a/app/src/main/webapp/WEB-INF/jsps/core/MainMenuSidebar.jsp b/app/src/main/webapp/WEB-INF/jsps/core/MainMenuSidebar.jsp
index b70cc1eeb0..84fc637ba0 100644
--- a/app/src/main/webapp/WEB-INF/jsps/core/MainMenuSidebar.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/core/MainMenuSidebar.jsp
@@ -30,14 +30,14 @@
 
                 <%-- Edit profile --%>
 
-                <h4><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
+                <h4><span class="bi bi-person" aria-hidden="true"></span>
                 <a href="<s:url action="profile"/>"><s:text name="yourWebsites.editProfile" /></a></h4>
                 <p><s:text name="yourWebsites.editProfile.desc" /></p>
 
                 <%-- Create weblog --%>
                 
                 <s:if test="getBooleanProp('site.allowUserWeblogCreation') && (getBooleanProp('groupblogging.enabled') || (existingPermissions.isEmpty && pendingPermissions.isEmpty))">
-                    <h4><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
+                    <h4><span class="bi bi-plus-lg" aria-hidden="true"></span>
                     <a href="<s:url action="createWeblog" />"><s:text name="yourWebsites.createWeblog" /></a></h4>
                     <p><s:text name="yourWebsites.createWeblog.desc" /></p>
                 </s:if>
@@ -46,7 +46,7 @@
 
                     <%-- Roller settings --%>
 
-                    <h4><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
+                    <h4><span class="bi bi-wrench" aria-hidden="true"></span>
                     <a href="<s:url action="globalConfig" namespace="/roller-ui/admin" />"><s:text name="yourWebsites.globalAdmin" /></a></h4>          
                     <p><s:text name="yourWebsites.globalAdmin.desc" /></p>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/core/Profile.jsp b/app/src/main/webapp/WEB-INF/jsps/core/Profile.jsp
index 4fad0f6956..b9016c71cc 100644
--- a/app/src/main/webapp/WEB-INF/jsps/core/Profile.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/core/Profile.jsp
@@ -40,7 +40,7 @@
                  name="bean.screenName" size="30" maxlength="30"/>
 
     <s:textfield label="%{getText('userSettings.fullname')}"
-                 tooltip="%{getText('')}"
+                 tooltip="%{getText('userRegister.tip.fullName')}"
                  onchange="formChanged()" onkeyup="formChanged()"
                  name="bean.fullName" size="30" maxlength="30"/>
 
@@ -66,10 +66,13 @@
 
     <s:if test="authMethod == 'OIDC' || authMethod == 'DB_OIDC'">
         <%-- assigned by the identity provider at login, so shown read-only --%>
-        <s:textfield label="%{getText('userSettings.openIdUrl')}"
-                     name="bean.openIdUrl" size="40" maxlength="255"
-                     readonly="true"
-                     style="width:75%" id="f_openid_identifier"/>
+        <s:hidden name="bean.openIdUrl"/>
+        <s:textfield label="%{getText('userSettings.oidcIssuer')}"
+                     tooltip="%{getText('userSettings.tip.oidcIssuer')}"
+                     name="bean.oidcIssuer" readonly="true" disabled="true"/>
+        <s:textfield label="%{getText('userSettings.oidcSubject')}"
+                     tooltip="%{getText('userSettings.tip.oidcSubject')}"
+                     name="bean.oidcSubject" readonly="true" disabled="true"/>
     </s:if>
 
     <s:select label="%{getText('userSettings.locale')}"
@@ -80,10 +83,13 @@
               tooltip="%{getText('userRegister.tip.timeZone')}"
               name="bean.timeZone" size="1" list="timeZonesList"/>
 
-    <s:submit cssClass="btn btn-default" value="%{getText('generic.save')}"/>
-
-    <input class="btn" type="button" value="<s:text name="generic.cancel"/>"
-           onclick="window.location='<s:url action="menu"/>'"/>
+    <div class="row mb-3">
+        <div class="col-sm-9 offset-sm-3">
+            <s:submit cssClass="btn btn-primary" value="%{getText('generic.save')}" theme="simple"/>
+            <input class="btn btn-outline-secondary" type="button" value="<s:text name="generic.cancel"/>"
+                   onclick="window.location='<s:url action="menu"/>'"/>
+        </div>
+    </div>
 
 </s:form>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/core/Register.jsp b/app/src/main/webapp/WEB-INF/jsps/core/Register.jsp
index c8e8ac6174..222ec769e9 100644
--- a/app/src/main/webapp/WEB-INF/jsps/core/Register.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/core/Register.jsp
@@ -28,14 +28,14 @@
 
     <s:if test="authMethod == 'LDAP'">
 
-        <div class="form-group">
+        <div class="row mb-3">
 
-            <label class="col-sm-3 control-label">
+            <label class="col-sm-3 col-form-label">
                 <s:text name="userSettings.username" />
             </label>
 
             <div class="col-sm-9 controls">
-                <p class="form-control-static">
+                <p class="form-control-plaintext">
                     <s:property value="bean.userName"/>
                 </p>
             </div>
@@ -109,9 +109,13 @@
 
     <p id="readytip"><s:text name="userRegister.tip.ready" /></p>
 
-    <s:submit id="submit" key="userRegister.button.save" cssClass="btn btn-default" />
-    <input type="button" class="btn btn-cancel"
-           value="<s:text name="generic.cancel"/>" onclick="window.location='<s:url value="/"/>'" />
+    <div class="row mb-3">
+        <div class="col-sm-9 offset-sm-3">
+            <s:submit id="submit" key="userRegister.button.save" cssClass="btn btn-primary" theme="simple"/>
+            <input type="button" class="btn btn-outline-secondary btn-cancel" value="<s:text name="generic.cancel"/>"
+                   onclick="window.location='<s:url value="/"/>'"/>
+        </div>
+    </div>
 
 </s:form>
 
@@ -123,7 +127,7 @@
         var disabled = true;
         var authMethod    = "<s:property value='authMethod' />";
         var emailAddress    = document.register['bean.emailAddress'].value;
-        var userName = passwordText = passwordConfirm = openIdUrl = "";
+        var userName = passwordText = passwordConfirm = "";
 
         if (!validateEmail(emailAddress)) {
             document.getElementById('submit').disabled = true;
diff --git a/app/src/main/webapp/WEB-INF/jsps/core/Setup.jsp b/app/src/main/webapp/WEB-INF/jsps/core/Setup.jsp
index f43aabaa9a..3ee52d248b 100644
--- a/app/src/main/webapp/WEB-INF/jsps/core/Setup.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/core/Setup.jsp
@@ -27,9 +27,9 @@
 
 <%-- STEP 1: Create a user if you don't already have one --%>
 
-<div class="panel panel-default">
-    <div class="panel-heading">
-        <h3 class="panel-title">
+<div class="card">
+    <div class="card-header">
+        <h3 class="card-title">
             <s:text name="index.createUser"/>
             <s:if test="userCount > 0"> -
                 <s:text name="index.createUserDone">
@@ -39,7 +39,7 @@
         </h3>
     </div>
 
-    <div class="panel-body">
+    <div class="card-body">
 
         <p><s:text name="index.createUserHelp"/></p>
         <p><s:if test="userCount == 0">
@@ -53,9 +53,9 @@
 
 <%-- STEP 2: Create a weblog if you don't already have one --%>
 
-<div class="panel panel-default">
-    <div class="panel-heading">
-        <h3 class="panel-title">
+<div class="card">
+    <div class="card-header">
+        <h3 class="card-title">
             <s:text name="index.createWeblog"/>
             <s:if test="blogCount > 0"> -
                 <s:text name="index.createWeblogDone">
@@ -65,7 +65,7 @@
         </h3>
     </div>
 
-    <div class="panel-body">
+    <div class="card-body">
 
         <s:text name="index.createWeblogHelp"/><br/><br/>
         <s:if test="userCount > 0 && blogCount == 0">
@@ -80,14 +80,14 @@
 
 <%-- STEP 3: Designate a weblog to be the frontpage weblog --%>
 
-<div class="panel panel-default">
-    <div class="panel-heading">
-        <h3 class="panel-title">
+<div class="card">
+    <div class="card-header">
+        <h3 class="card-title">
             <s:text name="index.setFrontpage"/>
         </h3>
     </div>
 
-    <div class="panel-body">
+    <div class="card-body">
 
         <p><s:text name="index.setFrontpageHelp"/></p>
 
@@ -106,7 +106,7 @@
                 <s:checkbox name="aggregated" value="aggregated"
                             label="%{getText('frontpageConfig.frontpageAggregated')}"/>
 
-                <s:submit value="%{getText('generic.save')}" cssClass="btn btn-default"/>
+                <s:submit theme="simple" value="%{getText('generic.save')}" cssClass="btn btn-outline-secondary"/>
 
             </s:form>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/core/UpgradeDatabase.jsp b/app/src/main/webapp/WEB-INF/jsps/core/UpgradeDatabase.jsp
index 945e91d80c..914f1e7692 100644
--- a/app/src/main/webapp/WEB-INF/jsps/core/UpgradeDatabase.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/core/UpgradeDatabase.jsp
@@ -38,9 +38,9 @@
     </p>
     <p><s:text name="installer.upgradeTables"/></p>
 
-    <s:form action="install!upgrade" class="form-horizontal">
+    <s:form action="install!upgrade">
         <s:hidden name="salt"/>
-        <s:submit value="%{getText('installer.yesUpgradeTables')}" cssClass="btn btn-primary" />
+        <s:submit theme="simple" value="%{getText('installer.yesUpgradeTables')}" cssClass="btn btn-primary" />
     </s:form>
 
 </s:elseif>
@@ -59,9 +59,9 @@
         <s:iterator value="messages"><s:property/><br/></s:iterator>
     </pre>
 
-    <s:form action="install!bootstrap" class="form-horizontal">
+    <s:form action="install!bootstrap">
         <s:hidden name="salt"/>
-        <s:submit value="%{getText('installer.finishUpgrade')}" cssClass="btn btn-primary" />
+        <s:submit theme="simple" value="%{getText('installer.finishUpgrade')}" cssClass="btn btn-primary" />
     </s:form>
 
 </s:else>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/Bookmarks.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/Bookmarks.jsp
index d004596b23..ca60e9b789 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/Bookmarks.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/Bookmarks.jsp
@@ -49,8 +49,8 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
 
     <s:if test="folder.name == 'default'">
 
-        <div class="form-group ">
-            <label class="col-sm-3 control-label" for="bookmarks_folder_name">
+        <div class="row mb-3">
+            <label class="col-sm-3 col-form-label" for="bookmarks_folder_name">
                 <s:text name="bookmarksForm.blogrollName"/>
             </label>
             <div class="col-sm-9 controls">
@@ -67,8 +67,8 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
         <%-- for other blogrolls, show textarea so user can rename it --%>
         <%-- don't use Struts tags here so button can be on same line as text input --%>
 
-        <div class="form-group ">
-            <label class="col-sm-3 control-label" for="bookmarks_folder_name">
+        <div class="row mb-3">
+            <label class="col-sm-3 col-form-label" for="bookmarks_folder_name">
                 <s:text name="bookmarksForm.blogrollName"/>
             </label>
             <div class="col-sm-9 controls">
@@ -83,7 +83,7 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
                     <s:text name="generic.rename"/>
                 </button>
                 <button type="button" id="rename_cancel"
-                        class="btn btn-default" style="float:left; margin-left:1em;"
+                        class="btn btn-outline-secondary" style="float:left; margin-left:1em;"
                         onclick="cancelRenameFolder(); return false;"
                         onsubmit="return false;">
                     <s:text name="generic.cancel"/>
@@ -135,7 +135,7 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
                                 <str:truncateNicely lower="70" upper="90">
                                     <s:property value="#bookmark.url"/>
                                 </str:truncateNicely>
-                                <span class="glyphicon glyphicon-play-circle"></span>
+                                <span class="bi bi-play-circle"></span>
                             </a>
                         </s:if>
 
@@ -150,7 +150,7 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
                                 '<s:property value="#bookmark.feedUrl"/>',
                                 '<s:property value="#bookmark.description"/>',
                                 '<s:property value="#bookmark.image"/>' )">
-                            <span class="glyphicon glyphicon-edit"></span>
+                            <span class="bi bi-pencil-square"></span>
                         </a>
 
                     </td>
@@ -183,7 +183,7 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
                   cssClass="btn btn-warning" cssStyle="float:left; margin-right: 0.5em"
                   action="bookmarks!move" onclick="onMoveToFolder();return false;"/>
         <%-- Move-to combo-box --%>
-        <s:select name="targetFolderId" theme="simple"
+        <s:select name="targetFolderId" theme="bootstrap"
                   cssClass="form-control" cssStyle="float:left; width:30%; margin-right: 2em"
                   list="allFolders" listKey="id" listValue="name"/>
     </s:if>
@@ -417,7 +417,7 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
                 <button id="save_blogroll" onclick="submitEditedBlogroll()" class="btn btn-primary">
                     <s:text name="generic.save"/>
                 </button>
-                <button type="button" class="btn" data-dismiss="modal">
+                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                     <s:text name="generic.cancel"/>
                 </button>
             </div>
@@ -525,11 +525,11 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
                 </div>
 
                 <div class="modal-footer">
-                    <button type="button" class="btn" value="%{getText('generic.yes')}" onclick="deleteSelected()">
+                    <button type="button" class="btn btn-outline-secondary" value="%{getText('generic.yes')}" onclick="deleteSelected()">
                         <s:text name="generic.yes"/>
                     </button>
                     &nbsp;
-                    <button type="button" class="btn btn-default btn-primary" data-dismiss="modal">
+                    <button type="button" class="btn btn-outline-secondary btn-primary" data-bs-dismiss="modal">
                         <s:text name="generic.no"/>
                     </button>
                 </div>
@@ -569,8 +569,8 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
                 </div>
 
                 <div class="modal-footer">
-                    <s:submit cssClass="btn" value="%{getText('generic.yes')}"/>&nbsp;
-                    <button type="button" class="btn btn-default btn-primary" data-dismiss="modal">
+                    <s:submit theme="simple" cssClass="btn btn-outline-secondary" value="%{getText('generic.yes')}"/>&nbsp;
+                    <button type="button" class="btn btn-outline-secondary btn-primary" data-bs-dismiss="modal">
                         <s:text name="generic.no"/>
                     </button>
                 </div>
@@ -662,7 +662,7 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
                     <button type="button" id="save_bookmark" onclick="saveBookmark()" class="btn btn-primary">
                         <s:text name="generic.save"/>
                     </button>
-                    <button type="button" class="btn" data-dismiss="modal">
+                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                         <s:text name="generic.cancel"/>
                     </button>
                 </div>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/BookmarksImport.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/BookmarksImport.jsp
index cceee20648..e053034eb8 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/BookmarksImport.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/BookmarksImport.jsp
@@ -33,6 +33,8 @@
     <s:file name="opmlFile" />
     <br />
     <br />
-    <s:submit value="%{getText('bookmarksImport.import')}" />
-    <s:submit value="%{getText('generic.cancel')}" action="bookmarks" />
+    <div class="mb-3">
+        <s:submit theme="simple" cssClass="btn btn-primary" value="%{getText('bookmarksImport.import')}" />
+        <s:submit theme="simple" cssClass="btn btn-outline-secondary" value="%{getText('generic.cancel')}" action="bookmarks" />
+    </div>
 </s:form>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/BookmarksSidebar.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/BookmarksSidebar.jsp
index 9c16eedfa1..29db953fd9 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/BookmarksSidebar.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/BookmarksSidebar.jsp
@@ -24,7 +24,7 @@
     <%-- Add Blogroll --%>
 
     <a href="#" onclick="newBlogroll()">
-        <span class="glyphicon glyphicon-plus"></span>
+        <span class="bi bi-plus-lg"></span>
         <s:text name="bookmarksForm.addFolder"/>
     </a>
 </p>
@@ -35,7 +35,7 @@
         <s:param name="weblog" value="%{actionWeblog.handle}"/>
     </s:url>
     <s:a href="%{importBookmarks}">
-        <span class="glyphicon glyphicon-plus"></span>
+        <span class="bi bi-plus-lg"></span>
         <s:text name="bookmarksForm.importBookmarks"/>
     </s:a>
 </p>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/Categories.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/Categories.jsp
index 6e1d649bd2..517653ea90 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/Categories.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/Categories.jsp
@@ -60,7 +60,7 @@
                                 '<s:property value="categoryName"/>',
                                 '<s:property value="categoryDesc"/>',
                                 '<s:property value="categoryImage"/>' )">
-                            <span class="glyphicon glyphicon-edit"></span>
+                            <span class="bi bi-pencil-square"></span>
                         </a>
 
                     </td>
@@ -75,7 +75,7 @@
                                     '<s:property value="categoryId" />',
                                     '<s:property value="categoryName" />',
                                     <s:property value="categoryInUse"/> )" >
-                                <span class="glyphicon glyphicon-trash"></span>
+                                <span class="bi bi-trash"></span>
                             </a>
 
                         </s:if>
@@ -134,7 +134,7 @@
                 <button onclick="submitEditedCategory()" class="btn btn-primary">
                     <s:text name="generic.save"/>
                 </button>
-                <button type="button" class="btn" data-dismiss="modal">
+                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                     <s:text name="generic.cancel"/>
                 </button>
             </div>
@@ -271,8 +271,8 @@
                 </div>
 
                 <div class="modal-footer">
-                    <s:submit cssClass="btn btn-danger" value="%{getText('generic.yes')}"/>&nbsp;
-                    <button type="button" class="btn btn-default" data-dismiss="modal">
+                    <s:submit theme="simple" cssClass="btn btn-danger" value="%{getText('generic.yes')}"/>&nbsp;
+                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                         <s:text name="generic.no" />
                     </button>
                 </div>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/CategoriesSidebar.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/CategoriesSidebar.jsp
index ca4b34aefe..78db2fa00c 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/CategoriesSidebar.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/CategoriesSidebar.jsp
@@ -27,7 +27,7 @@
     <s:set var="categoryImage" value="#post.image"/>
 
     <a href="#" onclick="showCategoryAddModal()">
-        <span class="glyphicon glyphicon-plus"></span>
+        <span class="bi bi-plus-lg"></span>
         <s:text name="categoriesForm.addCategory"/>
     </a>
 </p>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/Comments.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/Comments.jsp
index f13a8d59e6..cf8020af9e 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/Comments.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/Comments.jsp
@@ -365,7 +365,7 @@
         <%-- Save changes and cancel buttons --%>
 
         <hr size="1" noshade="noshade"/>
-        <s:submit cssClass="btn btn-primary" value="%{getText('commentManagement.update')}"/>
+        <s:submit theme="simple" cssClass="btn btn-primary" value="%{getText('commentManagement.update')}"/>
 
     </s:form>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/CommentsSidebar.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/CommentsSidebar.jsp
index 54ccfd94cd..7e8cf2f744 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/CommentsSidebar.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/CommentsSidebar.jsp
@@ -56,7 +56,7 @@
     </script>
     
     <div class="control-group">
-        <label for="bean.startDateString" class="control-label">
+        <label for="bean.startDateString" class="col-form-label">
             <s:text name="commentManagement.startDate"/>
         </label>
         <div class="controls">
@@ -64,8 +64,8 @@
 
                 <s:textfield name="bean.startDateString" readonly="true"
                              theme="simple" cssClass="date-picker form-control"/>
-                <label for="bean.startDateString" class="input-group-addon btn">
-                    <span class="glyphicon glyphicon-calendar"></span>
+                <label for="bean.startDateString" class="input-group-text btn">
+                    <span class="bi bi-calendar"></span>
                 </label>
 
             </div>
@@ -80,7 +80,7 @@
     </script>
 
     <div class="control-group">
-        <label for="bean.endDateString" class="control-label">
+        <label for="bean.endDateString" class="col-form-label">
             <s:text name="commentManagement.endDate"/>
         </label>
         <div class="controls">
@@ -88,8 +88,8 @@
 
                 <s:textfield name="bean.endDateString" readonly="true"
                              theme="simple" cssClass="date-picker form-control"/>
-                <label for="bean.endDateString" class="input-group-addon btn">
-                    <span class="glyphicon glyphicon-calendar"></span>
+                <label for="bean.endDateString" class="input-group-text btn">
+                    <span class="bi bi-calendar"></span>
                 </label>
 
             </div>
@@ -109,7 +109,7 @@
     <%-- ========================================================= --%>
     <%-- filter button --%>
 
-    <s:submit cssClass="btn btn-default" value="%{getText('commentManagement.query')}"/>
+    <s:submit theme="simple" cssClass="btn btn-outline-secondary" value="%{getText('commentManagement.query')}"/>
 
 </s:form>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/Entries.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/Entries.jsp
index 438b1ed006..27e6a735c8 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/Entries.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/Entries.jsp
@@ -100,7 +100,7 @@
             <s:param name="bean.id" value="#post.id" />
         </s:url>
         <s:a href="%{editUrl}">
-            <span class="glyphicon glyphicon-edit" data-toggle="tooltip" data-placement="top"
+            <span class="bi bi-pencil-square" data-bs-toggle="tooltip" data-bs-placement="top"
                   title="<s:text name='generic.edit'/>">
             </span>
         </s:a>
@@ -142,8 +142,8 @@
         <s:set var="postTitle" value="#post.title" />
         <a href="#"
             onclick="showDeleteModal('<s:property value="postId" />', '<s:property value="postTitle"/>' )">
-            <span class="glyphicon glyphicon-trash"
-                  data-toggle="tooltip" data-placement="top" title="<s:text name='generic.delete'/>">
+            <span class="bi bi-trash"
+                  data-bs-toggle="tooltip" data-bs-placement="top" title="<s:text name='generic.delete'/>">
             </span>
         </a>
     </td>
@@ -201,29 +201,29 @@
                 
                 <div class="modal-body">
 
-                    <div class="form-group">
-                        <label class="col-sm-3 control-label">
+                    <div class="row mb-3">
+                        <label class="col-sm-3 col-form-label">
                             <s:text name="weblogEntryRemove.entryTitle"/>
                         </label>
                         <div class="col-sm-9 controls">
-                            <p class="form-control-static" style="padding-top:0px" id="postTitleLabel"></p>
+                            <p class="form-control-plaintext" style="padding-top:0px" id="postTitleLabel"></p>
                         </div>
                     </div>
 
-                    <div class="form-group">
-                        <label class="col-sm-3 control-label">
+                    <div class="row mb-3">
+                        <label class="col-sm-3 col-form-label">
                             <s:text name="weblogEntryRemove.entryId"/>
                         </label>
                         <div class="col-sm-9 controls">
-                            <p class="form-control-static" style="padding-top:0px" id="postIdLabel"></p>
+                            <p class="form-control-plaintext" style="padding-top:0px" id="postIdLabel"></p>
                         </div>
                     </div>
 
                 </div>
                 
                 <div class="modal-footer">
-                    <s:submit cssClass="btn" value="%{getText('generic.yes')}"/>
-                    <button type="button" class="btn btn-default btn-primary" data-dismiss="modal">
+                    <s:submit theme="simple" cssClass="btn btn-outline-secondary" value="%{getText('generic.yes')}"/>
+                    <button type="button" class="btn btn-outline-secondary btn-primary" data-bs-dismiss="modal">
                         <s:text name="generic.no" />
                     </button>
                 </div>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/EntriesSidebar.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/EntriesSidebar.jsp
index 217ebe7e6c..e58527d923 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/EntriesSidebar.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/EntriesSidebar.jsp
@@ -49,7 +49,7 @@
     <%-- filter by date --%>
 
     <div class="control-group">
-        <label for="bean.startDateString" class="control-label">
+        <label for="bean.startDateString" class="col-form-label">
             <s:text name="weblogEntryQuery.label.startDate"/>
         </label>
         <div class="controls">
@@ -57,8 +57,8 @@
 
                 <s:textfield name="bean.startDateString" readonly="true"
                              theme="simple" cssClass="date-picker form-control"/>
-                <label for="bean.startDateString" class="input-group-addon btn">
-                    <span class="glyphicon glyphicon-calendar"></span>
+                <label for="bean.startDateString" class="input-group-text btn">
+                    <span class="bi bi-calendar"></span>
                 </label>
 
             </div>
@@ -66,7 +66,7 @@
     </div>
 
     <div class="control-group">
-        <label for="bean.endDateString" class="control-label">
+        <label for="bean.endDateString" class="col-form-label">
             <s:text name="weblogEntryQuery.label.endDate"/>
         </label>
         <div class="controls">
@@ -74,8 +74,8 @@
 
                 <s:textfield name="bean.endDateString" readonly="true"
                              theme="simple" cssClass="date-picker form-control"/>
-                <label for="bean.endDateString" class="input-group-addon btn">
-                    <span class="glyphicon glyphicon-calendar"></span>
+                <label for="bean.endDateString" class="input-group-text btn">
+                    <span class="bi bi-calendar"></span>
                 </label>
 
             </div>
@@ -102,7 +102,7 @@
     <%-- ========================================================= --%>
     <%-- filter button --%>
 
-    <s:submit cssClass="btn" value="%{getText('weblogEntryQuery.button.query')}"/>
+    <s:submit theme="simple" cssClass="btn btn-outline-secondary" value="%{getText('weblogEntryQuery.button.query')}"/>
 
 </s:form>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/EntryEdit.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/EntryEdit.jsp
index 61995356ad..6d484dee43 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/EntryEdit.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/EntryEdit.jsp
@@ -20,7 +20,7 @@
 <%-- Prevent annoying scrolling. taken from http://stackoverflow.com/a/10548809/3591946 --%>
 <script type="text/javascript">
     $().ready(function () {
-        $("a[href='#'][data-toggle='collapse']").click(function (e) {
+        $("a[href='#'][data-bs-toggle='collapse']").click(function (e) {
             e.preventDefault();
         });
     });
@@ -65,14 +65,14 @@
 
     <%-- permalink --%>
     <s:if test="actionName == 'entryEdit'">
-        <div class="form-group">
+        <div class="row mb-3">
 
             <label class="col-md-3" for="entry_bean_permalink">
                 <s:text name="weblogEdit.permaLink"/>
             </label>
 
             <div class="controls col-md-9">
-                <p class="form-control-static">
+                <p class="form-control-plaintext">
                     <s:if test="bean.published">
                         <a id="entry_bean_permalink" href='<s:property value="entry.permalink" />'>
                             <s:property value="entry.permalink"/>
@@ -106,42 +106,42 @@
     </s:else>
 
     <%-- status --%>
-    <div class="form-group">
+    <div class="row mb-3">
         <label class="col-md-3" for="weblogEdit.status"><s:text name="weblogEdit.status"/></label>
 
         <div class="controls col-md-9">
 
-            <p class="form-control-static">
+            <p class="form-control-plaintext">
                 <s:if test="bean.published">
-                    <span class="label label-success">
+                    <span class="label text-bg-success">
                         <s:text name="weblogEdit.published"/>
                         (<s:text name="weblogEdit.updateTime"/>
                         <s:date name="entry.updateTime"/>)
                     </span>
                 </s:if>
                 <s:elseif test="bean.draft">
-                    <span class="label label-info">
+                    <span class="label text-bg-info">
                         <s:text name="weblogEdit.draft"/>
                         (<s:text name="weblogEdit.updateTime"/>
                         <s:date name="entry.updateTime"/>)
                     </span>
                 </s:elseif>
                 <s:elseif test="bean.pending">
-                    <span class="label label-warning">
+                    <span class="label text-bg-warning">
                         <s:text name="weblogEdit.pending"/>
                         (<s:text name="weblogEdit.updateTime"/>
                         <s:date name="entry.updateTime"/>)
                     </span>
                 </s:elseif>
                 <s:elseif test="bean.scheduled">
-                    <span class="label label-info">
+                    <span class="label text-bg-info">
                         <s:text name="weblogEdit.scheduled"/>
                         (<s:text name="weblogEdit.updateTime"/>
                         <s:date name="entry.updateTime"/>)
                     </span>
                 </s:elseif>
                 <s:else>
-                    <span class="label label-danger"><s:text name="weblogEdit.unsaved"/></span>
+                    <span class="label text-bg-danger"><s:text name="weblogEdit.unsaved"/></span>
                 </s:else>
             </p>
 
@@ -150,7 +150,7 @@
     </div>
 
 
-    <div class="panel-group" id="accordion">
+    <div class="accordion" id="accordion">
 
             <%-- Weblog editor --%>
 
@@ -160,17 +160,17 @@
 
         <s:if test="!entryPlugins.isEmpty">
 
-            <div class="panel panel-default" id="panel-plugins">
-                <div class="panel-heading">
+            <div class="card" id="panel-plugins">
+                <div class="card-header">
 
-                    <h4 class="panel-title">
-                        <a class="collapsed" data-toggle="collapse" data-target="#collapsePlugins" href="#">
+                    <h4 class="card-title">
+                        <a class="collapsed text-body text-decoration-none" data-bs-toggle="collapse" data-bs-target="#collapsePlugins" href="#">
                             <s:text name="weblogEdit.pluginsToApply"/> </a>
                     </h4>
 
                 </div>
-                <div id="collapsePlugins" class="panel-collapse collapse">
-                    <div class="panel-body">
+                <div id="collapsePlugins" class="collapse">
+                    <div class="card-body">
 
                         <s:checkboxlist name="bean.plugins" list="entryPlugins" listKey="name" listValue="name"/>
 
@@ -182,37 +182,37 @@
 
             <%-- Advanced settings --%>
 
-        <div class="panel panel-default" id="panel-settings">
-            <div class="panel-heading">
+        <div class="card" id="panel-settings">
+            <div class="card-header">
 
-                <h4 class="panel-title">
-                    <a class="collapsed" data-toggle="collapse" data-parent="#collapseAdvanced"
+                <h4 class="card-title">
+                    <a class="collapsed text-body text-decoration-none" data-bs-toggle="collapse" data-bs-parent="#collapseAdvanced"
                        href="#collapseAdvanced">
                         <s:text name="weblogEdit.miscSettings"/> </a>
                 </h4>
 
             </div>
-            <div id="collapseAdvanced" class="panel-collapse collapse">
-                <div class="panel-body">
+            <div id="collapseAdvanced" class="collapse">
+                <div class="card-body">
 
-                    <div class="form-group">
+                    <div class="row mb-3">
 
-                        <label class="control-label col-md-3"><s:text name="weblogEdit.pubTime"/></label>
+                        <label class="col-form-label col-md-3"><s:text name="weblogEdit.pubTime"/></label>
 
                         <div class="controls col-md-9">
 
-                            <s:select theme="simple" name="bean.hours" list="hoursList"/> :
-                            <s:select theme="simple" name="bean.minutes" list="minutesList"/> :
-                            <s:select theme="simple" name="bean.seconds" list="secondsList"/> <br/>
+                            <s:select theme="bootstrap" name="bean.hours" list="hoursList"/> :
+                            <s:select theme="bootstrap" name="bean.minutes" list="minutesList"/> :
+                            <s:select theme="bootstrap" name="bean.seconds" list="secondsList"/> <br/>
 
                             <img src="<s:url value='/roller-ui/images/spacer.png' />"
                                  alt="spacer" style="min-height: 0.3em"/>
 
                             <div class="input-group">
                                 <s:textfield name="bean.dateString" readonly="true" cssStyle="width:15em"
-                                             theme="simple" cssClass="date-picker form-control"/>
-                                <label for="bean.dateString" class="input-group-addon btn" style="width:3em">
-                                    <span class="glyphicon glyphicon-calendar"></span>
+                                             theme="bootstrap" cssClass="date-picker form-control"/>
+                                <label for="bean.dateString" class="input-group-text btn" style="width:3em">
+                                    <span class="bi bi-calendar"></span>
                                 </label>
                             </div>
 
@@ -261,28 +261,28 @@
     <%-- The button box --%>
 
     <%-- save draft --%>
-    <s:submit cssClass="btn btn-warning"
+    <s:submit theme="simple" cssClass="btn btn-warning"
               value="%{getText('weblogEdit.save')}"
               action="%{#mainAction}!saveDraft"/>
 
     <s:if test="actionName == 'entryEdit'">
 
         <%-- preview mode --%>
-        <input class="btn btn-default" type="button" name="fullPreview"
+        <input class="btn btn-outline-secondary" type="button" name="fullPreview"
                value="<s:text name='weblogEdit.fullPreviewMode' />"
                onclick="fullPreviewMode()"/>
     </s:if>
     <s:if test="userAnAuthor">
 
         <%-- publish --%>
-        <s:submit cssClass="btn btn-success"
+        <s:submit theme="simple" cssClass="btn btn-success"
                   value="%{getText('weblogEdit.post')}"
                   action="%{#mainAction}!publish"/>
     </s:if>
     <s:else>
 
         <%-- submit for review --%>
-        <s:submit cssClass="btn btn-info"
+        <s:submit theme="simple" cssClass="btn btn-info"
                   value="%{getText('weblogEdit.submitForReview')}"
                   action="%{#mainAction}!publish"/>
     </s:else>
@@ -339,29 +339,29 @@
 
                 <div class="modal-body">
 
-                    <div class="form-group">
-                        <label class="col-sm-3 control-label">
+                    <div class="row mb-3">
+                        <label class="col-sm-3 col-form-label">
                             <s:text name="weblogEntryRemove.entryTitle"/>
                         </label>
                         <div class="col-sm-9 controls">
-                            <p class="form-control-static" style="padding-top:0px" id="postTitleLabel"></p>
+                            <p class="form-control-plaintext" style="padding-top:0px" id="postTitleLabel"></p>
                         </div>
                     </div>
 
-                    <div class="form-group">
-                        <label class="col-sm-3 control-label">
+                    <div class="row mb-3">
+                        <label class="col-sm-3 col-form-label">
                             <s:text name="weblogEntryRemove.entryId"/>
                         </label>
                         <div class="col-sm-9 controls">
-                            <p class="form-control-static" style="padding-top:0px" id="postIdLabel"></p>
+                            <p class="form-control-plaintext" style="padding-top:0px" id="postIdLabel"></p>
                         </div>
                     </div>
 
                 </div>
 
                 <div class="modal-footer">
-                    <s:submit cssClass="btn" value="%{getText('generic.yes')}"/>
-                    <button type="button" class="btn btn-default btn-primary" data-dismiss="modal">
+                    <s:submit theme="simple" cssClass="btn btn-outline-secondary" value="%{getText('generic.yes')}"/>
+                    <button type="button" class="btn btn-outline-secondary btn-primary" data-bs-dismiss="modal">
                         <s:text name="generic.no"/>
                     </button>
                 </div>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/EntryEditor.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/EntryEditor.jsp
index e58d61539b..c3c6e38ebf 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/EntryEditor.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/EntryEditor.jsp
@@ -23,29 +23,29 @@
 
 <%-- content --%>
 <s:textarea id="edit_content" name="bean.text"
-            tabindex="5" rows="18" cssClass="col-sm-12" theme="simple"/>
+            tabindex="5" rows="18" cssClass="col-sm-12" theme="bootstrap"/>
 
 <a href="#" onClick="onClickMediaFileInsert();"><s:text name="weblogEdit.insertMediaFile"/></a><br/>
 <img src="<s:url value='/roller-ui/images/spacer.png' />" alt="spacer" style="min-height: 2em"/>
 
 <%-- summary --%>
 
-<div class="panel panel-default" id="panel-summary">
-    <div class="panel-heading">
+<div class="card" id="panel-summary">
+    <div class="card-header">
 
-        <h4 class="panel-title">
-            <a href="#" class="collapsed"
-               data-toggle="collapse" data-target="#collapseSummaryEditor">
+        <h4 class="card-title">
+            <a href="#" class="collapsed text-body text-decoration-none"
+               data-bs-toggle="collapse" data-bs-target="#collapseSummaryEditor">
                 <s:text name="weblogEdit.summary"/>
             </a>
         </h4>
 
     </div>
-    <div id="collapseSummaryEditor" class="panel-collapse collapse">
-        <div class="panel-body">
+    <div id="collapseSummaryEditor" class="collapse">
+        <div class="card-body">
 
             <s:textarea id="edit_summary" name="bean.summary"
-                        tabindex="6" rows="10" cssClass="col-sm-12" theme="simple"/>
+                        tabindex="6" rows="10" cssClass="col-sm-12" theme="bootstrap"/>
 
         </div>
     </div>
@@ -64,9 +64,7 @@
 
             <div class="modal-header">
                 <h4 class="modal-title"><s:text name='weblogEdit.insertMediaFile'/></h4>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
 
             <div class="modal-body">
@@ -80,7 +78,7 @@
             </div>
 
             <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
             </div>
 
         </div>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/EntrySidebar.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/EntrySidebar.jsp
index ee56faf604..09580033da 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/EntrySidebar.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/EntrySidebar.jsp
@@ -56,7 +56,7 @@
                             <s:param name="weblog" value="%{actionWeblog.handle}" />
                             <s:param name="bean.id" value="#post.id" />
                         </s:url>
-                        <span class="glyphicon glyphicon-lock" aria-hidden="true"> </span> 
+                        <span class="bi bi-lock" aria-hidden="true"> </span> 
                         <s:a href="%{editUrl}"><str:truncateNicely lower="40">
                              <s:property value="#post.title" /></str:truncateNicely></s:a>
                     </span><br />
@@ -77,7 +77,7 @@
                             <s:param name="weblog" value="%{actionWeblog.handle}" />
                             <s:param name="bean.id" value="#post.id" />
                         </s:url>
-                        <span class="glyphicon glyphicon-edit" aria-hidden="true"> </span> 
+                        <span class="bi bi-pencil-square" aria-hidden="true"> </span> 
                         <s:a href="%{editUrl}"><str:truncateNicely lower="40">
                              <s:property value="#post.title" /></str:truncateNicely></s:a>
                     </span><br />
@@ -101,7 +101,7 @@
                                 <s:param name="weblog" value="%{actionWeblog.handle}" />
                                 <s:param name="bean.id" value="#post.id" />
                             </s:url>
-                            <span class="glyphicon glyphicon-book" aria-hidden="true"> </span> 
+                            <span class="bi bi-book" aria-hidden="true"> </span> 
                             <s:a href="%{editUrl}"><str:truncateNicely lower="40">
                                 <s:property value="#post.title" /></str:truncateNicely></s:a>
                         </span><br />
@@ -123,7 +123,7 @@
                                 <s:param name="weblog" value="%{actionWeblog.handle}" />
                                 <s:param name="bean.id" value="#post.id" />
                             </s:url>
-                            <span class="glyphicon glyphicon-time" aria-hidden="true"> </span>
+                            <span class="bi bi-clock" aria-hidden="true"> </span>
                             <s:a href="%{editUrl}"><str:truncateNicely lower="40">
                                 <s:property value="#post.title" /></str:truncateNicely></s:a>
                         </span><br />
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/Maintenance.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/Maintenance.jsp
index dd492a52dd..ef81dd4eb1 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/Maintenance.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/Maintenance.jsp
@@ -24,14 +24,14 @@
     <s:hidden name="weblog" value="%{actionWeblog.handle}" />
 
     <p><s:text name="maintenance.prompt.flush" /></p>
-    <s:submit value="%{getText('maintenance.button.flush')}" action="maintenance!flushCache" cssClass="btn" />
+    <s:submit theme="simple" value="%{getText('maintenance.button.flush')}" action="maintenance!flushCache" cssClass="btn btn-outline-secondary" />
 
     <s:if test="getBooleanProp('search.enabled')">
         <p><s:text name="maintenance.prompt.index" /></p>
-        <s:submit value="%{getText('maintenance.button.index')}" action="maintenance!index" cssClass="btn" />
+        <s:submit theme="simple" value="%{getText('maintenance.button.index')}" action="maintenance!index" cssClass="btn btn-outline-secondary" />
     </s:if>
 
     <p><s:text name="maintenance.prompt.reset" /></p>
-    <s:submit value="%{getText('maintenance.button.reset')}" action="maintenance!reset" cssClass="btn" />
+    <s:submit theme="simple" value="%{getText('maintenance.button.reset')}" action="maintenance!reset" cssClass="btn btn-outline-secondary" />
 
 </s:form>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAdd.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAdd.jsp
index 3cf419f961..8c84b5b962 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAdd.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAdd.jsp
@@ -42,24 +42,29 @@
                 label="%{getText('mediaFileAdd.includeGallery')}"
                 tooltip="%{getText('mediaFileEdit.includeGalleryHelp')}"/>
 
-    <div class="panel panel-default">
-        <div class="panel-heading">
-            <h4 class="panel-title">
+    <div class="card">
+        <div class="card-header">
+            <h4 class="card-title">
                 <s:text name="mediaFileAdd.fileLocation"/>
             </h4>
         </div>
-        <div class="panel-body">
-            <s:file id="fileControl0" name="uploadedFiles" size="30" />
-            <s:file id="fileControl1" name="uploadedFiles" size="30" />
-            <s:file id="fileControl2" name="uploadedFiles" size="30" />
-            <s:file id="fileControl3" name="uploadedFiles" size="30" />
-            <s:file id="fileControl4" name="uploadedFiles" size="30" />
+        <div class="card-body">
+            <s:file id="fileControl0" name="uploadedFiles" size="30" cssClass="form-control mb-2" />
+            <s:file id="fileControl1" name="uploadedFiles" size="30" cssClass="form-control mb-2" />
+            <s:file id="fileControl2" name="uploadedFiles" size="30" cssClass="form-control mb-2" />
+            <s:file id="fileControl3" name="uploadedFiles" size="30" cssClass="form-control mb-2" />
+            <s:file id="fileControl4" name="uploadedFiles" size="30" cssClass="form-control mb-2" />
         </div>
     </div>
 
-    <s:submit id="uploadButton" cssClass="btn btn-default"
-              value="%{getText('mediaFileAdd.upload')}" action="mediaFileAdd!save"/>
-    <s:submit cssClass="btn" value="%{getText('generic.cancel')}" action="mediaFileAdd!cancel"/>
+    <div class="row mb-3">
+        <div class="col-sm-9 offset-sm-3">
+            <s:submit id="uploadButton" cssClass="btn btn-primary" theme="simple"
+                      value="%{getText('mediaFileAdd.upload')}" action="mediaFileAdd!save"/>
+            <s:submit cssClass="btn btn-outline-secondary" theme="simple"
+                      value="%{getText('generic.cancel')}" action="mediaFileAdd!cancel"/>
+        </div>
+    </div>
 
 </s:form>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAddExternalInclude.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAddExternalInclude.jsp
index 92ad726bf5..234a16ce85 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAddExternalInclude.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAddExternalInclude.jsp
@@ -1,62 +1,62 @@
-<%--
-  Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  The ASF licenses this file to You
-  under the Apache License, Version 2.0 (the "License"); you may not
-  use this file except in compliance with the License.
-  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.  For additional information regarding
-  copyright in this work, please see the NOTICE file in the top level
-  directory of this distribution.
---%>
-<%@ include file="/WEB-INF/jsps/taglibs-struts2.jsp" %>
-
-<p class="subtitle">
-    <s:text name="mediaFile.add.title"  />
-</p>
-
-<script>
-function submitPage(frm) {
-    var filePointer = "<a href='" + frm.url.value + "'>" + frm.title.value + "</a>";
-    parent.onClose(filePointer);
-}
-</script>
-
-<s:form id="entry" action=" " method="POST">
-	<s:hidden name="salt" />
-
-    <table class="entryEditTable" cellpadding="0" cellspacing="0" width="100%">
-
-        <tr>
-            <td class="entryEditFormLabel">
-                <label for="status">URL:</label>
-            </td>
-            <td>
-                <s:textfield name="url" size="50" maxlength="255" tabindex="1" />
-            </td>
-       </tr>
-
-       <tr>
-            <td class="entryEditFormLabel">
-                <label for="status">Title</label>
-            </td>
-            <td>
-                <s:textfield name="title" size="50" maxlength="255" />
-            </td>
-       </tr>
-
-    </table>
-
-    <br>
-    <div class="control">
-       <input type="button" value="Insert" name="submit" onclick="submitPage(this.form)" />
-       <input type="button" value="Cancel" onClick="javascript:window.parent.onClose();" />
-    </div>
-
-</s:form>
+<%--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+   contributor license agreements.  The ASF licenses this file to You
+  under the Apache License, Version 2.0 (the "License"); you may not
+  use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.  For additional information regarding
+  copyright in this work, please see the NOTICE file in the top level
+  directory of this distribution.
+--%>
+<%@ include file="/WEB-INF/jsps/taglibs-struts2.jsp" %>
+
+<p class="subtitle">
+    <s:text name="mediaFile.add.title"  />
+</p>
+
+<script>
+function submitPage(frm) {
+    var filePointer = "<a href='" + frm.url.value + "'>" + frm.title.value + "</a>";
+    parent.onClose(filePointer);
+}
+</script>
+
+<s:form id="entry" action=" " method="POST">
+	<s:hidden name="salt" />
+
+    <table class="entryEditTable" cellpadding="0" cellspacing="0" width="100%">
+
+        <tr>
+            <td class="entryEditFormLabel">
+                <label for="status">URL:</label>
+            </td>
+            <td>
+                <s:textfield name="url" size="50" maxlength="255" tabindex="1" />
+            </td>
+       </tr>
+
+       <tr>
+            <td class="entryEditFormLabel">
+                <label for="status">Title</label>
+            </td>
+            <td>
+                <s:textfield name="title" size="50" maxlength="255" />
+            </td>
+       </tr>
+
+    </table>
+
+    <br>
+    <div class="control">
+       <input type="button" value="Insert" name="submit" onclick="submitPage(this.form)" />
+       <input type="button" value="Cancel" onClick="javascript:window.parent.onClose();" />
+    </div>
+
+</s:form>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAddSuccess.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAddSuccess.jsp
index c3cbae0f22..9029866f51 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAddSuccess.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAddSuccess.jsp
@@ -34,8 +34,8 @@
 
         <s:iterator value="newImages" var="newImage">
 
-            <div class="panel panel-default">
-                <div class="panel-body">
+            <div class="card">
+                <div class="card-body">
 
                     <div class="row">
 
@@ -89,8 +89,8 @@
         <p><s:text name="mediaFileSuccess.selectEnclosure"/></p>
 
         <s:iterator value="newFiles" var="newFile">
-            <div class="panel panel-default">
-                <div class="panel-body">
+            <div class="card">
+                <div class="card-body">
 
                     <div class="row">
 
@@ -127,8 +127,8 @@
             </div>
         </s:iterator>
 
-        <div class="panel panel-default">
-            <div class="panel-body">
+        <div class="card">
+            <div class="card-body">
                 <div class="row">
 
                     <div class="col-md-1">
@@ -158,14 +158,14 @@
             <s:param name="directoryId" value="%{bean.directoryId}"/>
         </s:url>
 
-        <s:submit cssClass="btn btn-success" id="submit" value="%{getText('mediaFileSuccess.createPost')}"
+        <s:submit theme="simple" cssClass="btn btn-success" id="submit" value="%{getText('mediaFileSuccess.createPost')}"
                   action="entryAddWithMediaFile"/>
 
-        <button class="btn btn-default" onclick='window.load("<s:property value='%{mediaFileAddURL}'/>")'>
+        <button class="btn btn-outline-secondary" onclick='window.load("<s:property value='%{mediaFileAddURL}'/>")'>
             <s:text name="mediaFileSuccess.uploadMore"/>
         </button>
 
-        <button class="btn" onclick='window.load("<s:property value='%{mediaFileViewURL}'/>")'>
+        <button class="btn btn-outline-secondary" onclick='window.load("<s:property value='%{mediaFileViewURL}'/>")'>
             <s:text name="generic.cancel"/>
         </button>
     </div>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileEdit.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileEdit.jsp
index dd9d09cf78..ca378e9dea 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileEdit.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileEdit.jsp
@@ -22,7 +22,7 @@
 </p>
 
 <s:form id="entry" action="mediaFileEdit!save" method="POST" enctype="multipart/form-data"
-        theme="bootstrap" class="form-horizontal">
+        theme="bootstrap">
 
     <s:hidden name="salt"/>
     <s:hidden name="weblog"/>
@@ -30,8 +30,8 @@
     <s:hidden name="bean.permalink"/>
 
     <s:if test="bean.isImage">
-        <div class="form-group">
-            <label class="control-label col-sm-3">Thumbnail</label>
+        <div class="row mb-3">
+            <label class="col-form-label col-sm-3">Thumbnail</label>
             <div class="controls col-sm-9">
                 <a href='<s:property value="bean.permalink" />' target="_blank">
                     <img alt="thumbnail" src='<s:property value="bean.thumbnailURL" />'
@@ -47,8 +47,8 @@
     <s:textfield name="bean.name" size="35" maxlength="100" tabindex="1"
                  label="%{getText('generic.name')}"/>
 
-    <div class="form-group">
-        <label class="control-label col-sm-3"><s:text name="mediaFileEdit.fileInfo"/></label>
+    <div class="row mb-3">
+        <label class="col-form-label col-sm-3"><s:text name="mediaFileEdit.fileInfo"/></label>
 
         <div class="controls col-sm-9">
 
@@ -67,8 +67,8 @@
         </div>
     </div>
 
-    <div class="form-group">
-        <label class="control-label col-sm-3">URL</label>
+    <div class="row mb-3">
+        <label class="col-form-label col-sm-3">URL</label>
 
         <div class="controls col-sm-9">
 
@@ -109,7 +109,7 @@
 
     <input type="submit" tabindex="7" class="btn btn-success"
            value="<s:text name="generic.save" />" name="submit"/>
-    <input type="button" tabindex="8" class="btn"
+    <input type="button" tabindex="8" class="btn btn-outline-secondary"
            value="<s:text name="generic.cancel" />" onClick="window.parent.onEditCancelled();"/>
 
 </s:form>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileImageChooser.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileImageChooser.jsp
index dddd4d07ad..e8fd718609 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileImageChooser.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileImageChooser.jsp
@@ -1,133 +1,133 @@
-<%--
-  Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  The ASF licenses this file to You
-  under the Apache License, Version 2.0 (the "License"); you may not
-  use this file except in compliance with the License.
-  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.  For additional information regarding
-  copyright in this work, please see the NOTICE file in the top level
-  directory of this distribution.
---%>
-<%@ include file="/WEB-INF/jsps/taglibs-struts2.jsp" %>
-
-<style>
-
-</style>
-
-<script>
-    function onSelectDirectory(id) {
-        window.location = "?directoryId=" + id + "&weblog=" + '<s:property value="actionWeblog.handle" />';
-    }
-</script>
-
-
-<%-- ********************************************************************* --%>
-
-<%-- Subtitle and folder path --%>
-
-<s:if test="childFiles || allDirectories">
-
-    <s:form id="mediaFileChooserForm" name="mediaFileChooserForm" action="mediaFileImageChooser"
-            theme="bootstrap" cssClass="form-vertical">
-        <s:hidden name="salt"/>
-        <s:hidden name="weblog"/>
-        <input type="hidden" name="mediaFileId" value=""/>
-
-        <p class="pagetip"><s:text name="mediaFileImageChooser.pageTip"/></p>
-
-        <%-- ***************************************************************** --%>
-        <%-- Maybe show media directory selector --%>
-
-        <s:if test="!allDirectories.isEmpty">
-            <s:select name="directoryId" emptyOption="true" label="%{getText('mediaFileView.viewFolder')}"
-                      list="allDirectories" listKey="id" listValue="name" onchange="onView()"/>
-        </s:if>
-
-        <%-- ***************************************************************** --%>
-        <%-- Media files grid --%>
-
-        <div id="imageGrid" class="panel panel-default">
-            <div class="panel-body">
-
-                <ul>
-
-                    <s:if test="childFiles.size() == 0">
-                        <p style="text-align: center"><s:text name="mediaFileView.noFiles"/></p>
-                    </s:if>
-
-                    <s:if test="childFiles.size() > 0">
-
-                        <s:iterator var="mediaFile" value="childFiles">
-
-                            <s:url var="mediaFileURL" includeContext="false" value="%{#mediaFile.permalink}"/>
-                            <s:url var="mediaFileThumbnailURL" value="%{#mediaFile.thumbnailURL}"/>
-
-                            <li class="align-images"
-                                onmouseover="highlight(this, true)" onmouseout="highlight(this, false)">
-
-                                <div class="mediaObject"
-                                     onclick="onSelectMediaFile('<s:property value="#mediaFile.name"/>',
-                                             '<s:property value="%{mediaFileURL}"/>',
-                                             '<s:property value="#mediaFile.isImageFile()"/>')">
-
-                                    <s:if test="#mediaFile.imageFile">
-                                        <img border="0" src='<s:property value="%{mediaFileThumbnailURL}" />'
-                                             width='<s:property value="#mediaFile.thumbnailWidth"/>'
-                                             height='<s:property value="#mediaFile.thumbnailHeight"/>'
-                                             alt='<s:property value="#mediaFile.name" />'/>
-                                    </s:if>
-
-                                    <s:else>
-                                        <span class="glyphicon glyphicon-file"></span>
-                                    </s:else>
-
-                                </div>
-
-                                <div class="mediaObjectInfo">
-                                    <str:truncateNicely upper="60">
-                                        <s:property value="#mediaFile.name"/>
-                                    </str:truncateNicely>
-                                </div>
-
-                            </li>
-
-                        </s:iterator>
-                    </s:if>
-
-                </ul>
-            </div>
-        </div>
-
-        <div style="clear:left;"></div>
-
-    </s:form>
-
-</s:if>
-
-
-<script>
-
-    function onSelectMediaFile(name, url, isImage) {
-        window.parent.onSelectMediaFile(name, url, isImage);
-    }
-
-    function highlight(el, flag) {
-        if (flag) {
-            $(el).addClass("highlight");
-        } else {
-            $(el).removeClass("highlight");
-        }
-    }
-
-    function onView() {
-        document.mediaFileChooserForm.submit();
-    }
-
-</script>
+<%--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+   contributor license agreements.  The ASF licenses this file to You
+  under the Apache License, Version 2.0 (the "License"); you may not
+  use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.  For additional information regarding
+  copyright in this work, please see the NOTICE file in the top level
+  directory of this distribution.
+--%>
+<%@ include file="/WEB-INF/jsps/taglibs-struts2.jsp" %>
+
+<style>
+
+</style>
+
+<script>
+    function onSelectDirectory(id) {
+        window.location = "?directoryId=" + id + "&weblog=" + '<s:property value="actionWeblog.handle" />';
+    }
+</script>
+
+
+<%-- ********************************************************************* --%>
+
+<%-- Subtitle and folder path --%>
+
+<s:if test="childFiles || allDirectories">
+
+    <s:form id="mediaFileChooserForm" name="mediaFileChooserForm" action="mediaFileImageChooser"
+            theme="bootstrap" cssClass="form-vertical">
+        <s:hidden name="salt"/>
+        <s:hidden name="weblog"/>
+        <input type="hidden" name="mediaFileId" value=""/>
+
+        <p class="pagetip"><s:text name="mediaFileImageChooser.pageTip"/></p>
+
+        <%-- ***************************************************************** --%>
+        <%-- Maybe show media directory selector --%>
+
+        <s:if test="!allDirectories.isEmpty">
+            <s:select name="directoryId" emptyOption="true" label="%{getText('mediaFileView.viewFolder')}"
+                      list="allDirectories" listKey="id" listValue="name" onchange="onView()"/>
+        </s:if>
+
+        <%-- ***************************************************************** --%>
+        <%-- Media files grid --%>
+
+        <div id="imageGrid" class="card">
+            <div class="card-body">
+
+                <ul>
+
+                    <s:if test="childFiles.size() == 0">
+                        <p style="text-align: center"><s:text name="mediaFileView.noFiles"/></p>
+                    </s:if>
+
+                    <s:if test="childFiles.size() > 0">
+
+                        <s:iterator var="mediaFile" value="childFiles">
+
+                            <s:url var="mediaFileURL" includeContext="false" value="%{#mediaFile.permalink}"/>
+                            <s:url var="mediaFileThumbnailURL" value="%{#mediaFile.thumbnailURL}"/>
+
+                            <li class="align-images"
+                                onmouseover="highlight(this, true)" onmouseout="highlight(this, false)">
+
+                                <div class="mediaObject"
+                                     onclick="onSelectMediaFile('<s:property value="#mediaFile.name"/>',
+                                             '<s:property value="%{mediaFileURL}"/>',
+                                             '<s:property value="#mediaFile.isImageFile()"/>')">
+
+                                    <s:if test="#mediaFile.imageFile">
+                                        <img border="0" src='<s:property value="%{mediaFileThumbnailURL}" />'
+                                             width='<s:property value="#mediaFile.thumbnailWidth"/>'
+                                             height='<s:property value="#mediaFile.thumbnailHeight"/>'
+                                             alt='<s:property value="#mediaFile.name" />'/>
+                                    </s:if>
+
+                                    <s:else>
+                                        <span class="bi bi-file-earmark"></span>
+                                    </s:else>
+
+                                </div>
+
+                                <div class="mediaObjectInfo">
+                                    <str:truncateNicely upper="60">
+                                        <s:property value="#mediaFile.name"/>
+                                    </str:truncateNicely>
+                                </div>
+
+                            </li>
+
+                        </s:iterator>
+                    </s:if>
+
+                </ul>
+            </div>
+        </div>
+
+        <div style="clear:left;"></div>
+
+    </s:form>
+
+</s:if>
+
+
+<script>
+
+    function onSelectMediaFile(name, url, isImage) {
+        window.parent.onSelectMediaFile(name, url, isImage);
+    }
+
+    function highlight(el, flag) {
+        if (flag) {
+            $(el).addClass("highlight");
+        } else {
+            $(el).removeClass("highlight");
+        }
+    }
+
+    function onView() {
+        document.mediaFileChooserForm.submit();
+    }
+
+</script>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileSidebar.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileSidebar.jsp
index eb43df085f..4a11314b88 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileSidebar.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileSidebar.jsp
@@ -25,7 +25,7 @@
                 <h3><s:text name="mediaFileSidebar.actions"/></h3>
 
                 <div style="clear:right">
-                    <span class="glyphicon glyphicon-picture"></span>
+                    <span class="bi bi-image"></span>
                     <s:url var="mediaFileAddURL" action="mediaFileAdd">
                         <s:param name="weblog" value="%{actionWeblog.handle}"/>
                         <s:param name="directoryName" value="%{directoryName}"/>
@@ -41,7 +41,7 @@
 
                     <div style="clear:right; margin-top: 1em">
 
-                        <span class="glyphicon glyphicon-folder-open"></span>
+                        <span class="bi bi-folder2-open"></span>
                         <s:text name="mediaFileView.addDirectory"/> <br />
 
                         <label for="newDirectoryName">
@@ -83,11 +83,11 @@
                     <s:textfield id="beanTags" name="bean.tags" size="20" maxlength="50"
                                  label="%{getText('mediaFileView.tags')}"/>
 
-                    <s:submit id="searchButton" cssClass="btn btn-primary"
+                    <s:submit id="searchButton" theme="simple" cssClass="btn btn-primary"
                               value="%{getText('mediaFileView.search')}" cssStyle="margin:5px 0;"/>
 
                     <s:if test="pager">
-                        <input id="resetButton" style="margin:5px 0;" type="button" class="btn"
+                        <input id="resetButton" style="margin:5px 0;" type="button" class="btn btn-outline-secondary"
                                name="reset" value='<s:text name="mediaFileView.reset" />'/>
                     </s:if>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileView.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileView.jsp
index 253220461b..501486a1c9 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileView.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileView.jsp
@@ -147,8 +147,8 @@
             }
         </script>
 
-        <div id="imageGrid" class="panel panel-default">
-            <div class="panel-body">
+        <div id="imageGrid" class="card">
+            <div class="card-body">
 
                 <ul>
 
@@ -280,7 +280,7 @@
             <div class="image-controls">
 
                 <s:if test="(!pager && childFiles.size() > 0) || (pager && pager.items.size() > 0)">
-                    <input id="toggleButton" type="button" class="btn" style="display: inline"
+                    <input id="toggleButton" type="button" class="btn btn-outline-secondary" style="display: inline"
                            value='<s:text name="generic.toggle" />' onclick="onToggle()"/>
 
                     <input id="deleteButton" type="button" class="btn btn-danger" style="display: inline"
@@ -294,7 +294,7 @@
                           list="allDirectories" listKey="id" listValue="name"/>
 
                 <s:if test="currentDirectory.name != 'default' && !pager">
-                    <input id="deleteFolderButton" type="button" class="btn" style="display: inline"
+                    <input id="deleteFolderButton" type="button" class="btn btn-outline-secondary" style="display: inline"
                            value='<s:text name="mediaFileView.deleteFolder" />' onclick="onDeleteFolder()"/>
                 </s:if>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/MemberResign.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/MemberResign.jsp
index fca415ef09..41bdabc7d2 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/MemberResign.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/MemberResign.jsp
@@ -26,6 +26,6 @@
 <s:form action="memberResign!resign"  cssClass="form-horizontal">
     <s:hidden name="salt"/>
     <s:hidden name="weblog"/>
-    <s:submit value="%{getText('generic.yes')}" cssClass="form-horizontal"/>&nbsp;
-    <s:submit value="%{getText('generic.no')}" action="menu" cssClass="form-horizontal"/>
+    <s:submit theme="simple" cssClass="btn btn-danger" value="%{getText('generic.yes')}"/>&nbsp;
+    <s:submit theme="simple" cssClass="btn btn-outline-secondary" value="%{getText('generic.no')}" action="menu"/>
 </s:form>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/Members.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/Members.jsp
index fff1064138..5b70754cf0 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/Members.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/Members.jsp
@@ -80,7 +80,7 @@ function save() {
             </s:else>
             
                 <td class="rollertable">
-                    <span class="glyphicon glyphicon-user"></span>
+                    <span class="bi bi-person"></span>
 	                <s:property value="#perm.user.userName" />
                 </td>               
                 <td class="rollertable">
@@ -108,7 +108,7 @@ function save() {
     <br />
      
     <div class="control">
-       <s:submit value="%{getText('generic.save')}" cssClass="btn" />
+       <s:submit theme="simple" value="%{getText('generic.save')}" cssClass="btn btn-outline-secondary" />
     </div>
     
 </s:form>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/MembersInvite.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/MembersInvite.jsp
index 4301f125e8..c4ccabc763 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/MembersInvite.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/MembersInvite.jsp
@@ -51,9 +51,10 @@
        <s:text name="inviteMember.limited" />
     </div>
 
-    <br />
-    <s:submit id="inviteButton" value="%{getText('inviteMember.button.save')}"  cssClass="btn btn-default"/>
-    <s:submit value="%{getText('generic.cancel')}" action="invite!cancel" cssClass="btn"/>
+    <div class="mb-3">
+        <s:submit theme="simple" id="inviteButton" value="%{getText('inviteMember.button.save')}" cssClass="btn btn-primary"/>
+        <s:submit theme="simple" value="%{getText('generic.cancel')}" action="invite!cancel" cssClass="btn btn-outline-secondary"/>
+    </div>
 
 </s:form>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/MembersSidebar.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/MembersSidebar.jsp
index 7313eea9ca..10de850c75 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/MembersSidebar.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/MembersSidebar.jsp
@@ -20,7 +20,7 @@
 <h3><s:text name="mainPage.actions" /></h3>
 <hr size="1" noshade="noshade" />
 
-<span class="glyphicon glyphicon-plus"></span>
+<span class="bi bi-plus-lg"></span>
 <s:url action="invite" var="inviteUrl">
    <s:param name="weblog" value="%{actionWeblog.handle}" />
 </s:url>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/StylesheetEdit.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/StylesheetEdit.jsp
index c3b90cfe44..dfdd9f695e 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/StylesheetEdit.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/StylesheetEdit.jsp
@@ -32,14 +32,14 @@
         <ul id="template-code-tabs" class="nav nav-tabs" role="tablist" style="margin-bottom: 1em">
 
             <li role="presentation" class="active">
-                <a href="#tabStandard" aria-controls="home" role="tab" data-toggle="tab">
+                <a href="#tabStandard" aria-controls="home" role="tab" data-bs-toggle="tab">
                     <em><s:text name="stylesheetEdit.standard"/></em>
                 </a>
             </li>
 
             <s:if test="contentsMobile != null">
                 <li role="presentation">
-                    <a href="#tabMobile" aria-controls="home" role="tab" data-toggle="tab">
+                    <a href="#tabMobile" aria-controls="home" role="tab" data-bs-toggle="tab">
                         <em><s:text name="stylesheetEdit.mobile"/></em>
                     </a>
                 </li>
@@ -63,19 +63,19 @@
         </div>
 
         <%-- Save, Close and Resize text area buttons--%>
-        <s:submit value="%{getText('generic.save')}" cssClass="btn btn-success" />
+        <s:submit theme="simple" value="%{getText('generic.save')}" cssClass="btn btn-success" />
 
         <s:if test="!customTheme">
-            <s:submit value="%{getText('stylesheetEdit.revert')}" cssClass="btn"
+            <s:submit theme="simple" value="%{getText('stylesheetEdit.revert')}" cssClass="btn btn-outline-secondary"
                 onclick="revertStylesheet();return false;"
-                      tooltip="%{getText('stylesheetEdit.revertTip')}" />
+                title="%{getText('stylesheetEdit.revertTip')}" />
         </s:if>
 
         <%-- Only delete if we have no custom templates ie website.customStylesheetPath=null --%>
         <s:if test="sharedThemeStylesheet">
-            <s:submit value="%{getText('stylesheetEdit.delete')}"  cssClass="btn btn-danger"
+            <s:submit theme="simple" value="%{getText('stylesheetEdit.delete')}" cssClass="btn btn-danger"
                 onclick="deleteStylesheet();return false;"
-                      tooltip="%{getText('stylesheetEdit.deleteTip')}" />
+                title="%{getText('stylesheetEdit.deleteTip')}" />
         </s:if>
 
     </s:form>
@@ -90,8 +90,8 @@
         <s:form action="stylesheetEdit!copyStylesheet" theme="bootstrap" cssClass="form-vertical">
             <s:hidden name="salt" />
             <s:hidden name="weblog" />
-            <s:submit value="%{getText('stylesheetEdit.copyStylesheet')}" cssClass="btn btn-success"
-                tooltip="%{getText('stylesheetEdit.createStylesheetTip')}" />
+            <s:submit theme="simple" value="%{getText('stylesheetEdit.copyStylesheet')}" cssClass="btn btn-success"
+                title="%{getText('stylesheetEdit.createStylesheetTip')}" />
         </s:form>
 
     </s:if>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/TemplateEdit.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/TemplateEdit.jsp
index 4b738d3f8a..c5fb48ada7 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/TemplateEdit.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/TemplateEdit.jsp
@@ -92,14 +92,14 @@
     <ul id="template-code-tabs" class="nav nav-tabs" role="tablist" style="margin-bottom: 1em">
 
         <li role="presentation" class="active">
-            <a href="#tabStandard" aria-controls="home" role="tab" data-toggle="tab">
+            <a href="#tabStandard" aria-controls="home" role="tab" data-bs-toggle="tab">
                 <em><s:text name="stylesheetEdit.standard"/></em>
             </a>
         </li>
 
         <s:if test="bean.contentsMobile != null">
             <li role="presentation">
-                <a href="#tabMobile" aria-controls="home" role="tab" data-toggle="tab">
+                <a href="#tabMobile" aria-controls="home" role="tab" data-bs-toggle="tab">
                     <em><s:text name="stylesheetEdit.mobile"/></em>
                 </a>
             </li>
@@ -125,31 +125,35 @@
     <%-- ================================================================== --%>
     <%-- Save, Close and Resize text area buttons--%>
 
-    <s:submit value="%{getText('generic.save')}" cssClass="btn btn-default"/>
-    <input type="button" value='<s:text name="generic.done"/>' class="button btn"
-           onclick="window.location='<s:url action="templates"><s:param name="weblog" value="%{weblog}"/></s:url>'"/>
+    <div class="row mb-3">
+        <div class="col-sm-9 offset-sm-3">
+            <s:submit value="%{getText('generic.save')}" cssClass="btn btn-primary" theme="simple"/>
+            <input type="button" value='<s:text name="generic.done"/>' class="btn btn-outline-secondary"
+                   onclick="window.location='<s:url action="templates"><s:param name="weblog" value="%{weblog}"/></s:url>'"/>
+        </div>
+    </div>
 
     <%-- ================================================================== --%>
     <%-- Advanced settings inside a control toggle --%>
 
     <s:if test="template.custom">
 
-        <div class="panel-group" id="accordion" style="margin-top:2em">
+        <div class="accordion" id="accordion" style="margin-top:2em">
 
-        <div class="panel panel-default" id="panel-plugins">
+        <div class="card" id="panel-plugins">
 
-            <div class="panel-heading">
+            <div class="card-header">
 
-                <h4 class="panel-title">
-                    <a class="collapsed" data-toggle="collapse" data-target="#collapseAdvanced" href="#">
+                <h4 class="card-title">
+                    <a class="collapsed text-body text-decoration-none" data-bs-toggle="collapse" data-bs-target="#collapseAdvanced" href="#">
                         <s:text name="pageForm.advancedSettings"/>
                     </a>
                 </h4>
 
             </div>
 
-            <div id="collapseAdvanced" class="panel-collapse collapse">
-                <div class="panel-body">
+            <div id="collapseAdvanced" class="collapse">
+                <div class="card-body">
 
                     <s:select name="bean.templateLanguage" list="templateLanguages" size="1"
                               label="%{getText('pageForm.templateLanguage')}"/>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/Templates.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/Templates.jsp
index 05bd6cb1f5..0b08c7bd4b 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/Templates.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/Templates.jsp
@@ -75,12 +75,12 @@
                             </s:url>
                             <a href="#" onclick=
                                     "confirmTemplateDelete('<s:property value="#p.id"/>', '<s:property value="#p.name"/>' )">
-                                <span class="glyphicon glyphicon-trash"></span>
+                                <span class="bi bi-trash"></span>
                             </a>
 
                         </s:if>
                         <s:else>
-                            <span class="glyphicon glyphicon-lock"></span>
+                            <span class="bi bi-lock"></span>
                         </s:else>
                     </td>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/TemplatesSidebar.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/TemplatesSidebar.jsp
index a5bdc60806..ba81ada5c4 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/TemplatesSidebar.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/TemplatesSidebar.jsp
@@ -20,7 +20,7 @@
 <h3><s:text name="pagesForm.addNewPage"/></h3>
 <hr size="1" noshade="noshade"/>
 
-<s:form action="templates!add" theme="bootstrap" cssClass="form-horizontal" id="templateAdd">
+<s:form action="templates!add" theme="bootstrap" id="templateAdd" cssClass="form-horizontal">
     <s:hidden name="salt"/>
     <s:hidden name="weblog"/>
 
@@ -32,7 +32,7 @@
         <s:select name="newTmplAction" list="availableActions"/>
     </s:if>
 
-    <s:submit class="btn" value="%{getText('pagesForm.add')}"/>
+    <s:submit theme="simple" cssClass="btn btn-outline-secondary" value="%{getText('pagesForm.add')}"/>
 
 </s:form>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/ThemeEdit.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/ThemeEdit.jsp
index dac1ec8855..aa7c690a16 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/ThemeEdit.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/ThemeEdit.jsp
@@ -31,9 +31,9 @@
 
     <div class="row row-display-flex">
 
-        <div class="col-xs-6">
-            <div class="panel panel-default">
-                <div class="panel-body" id="sharedChooser">
+        <div class="col-6">
+            <div class="card">
+                <div class="card-body" id="sharedChooser">
                     <h3>
                         <input id="sharedRadio" type="radio" name="themeType" value="shared"
                             <s:if test="!customTheme">checked</s:if> onclick="proposeThemeTypeChange($(this))"/>&nbsp;
@@ -44,9 +44,9 @@
             </div>
         </div>
 
-        <div class="col-xs-6">
-            <div class="panel panel-default">
-                <div class="panel-body" id="customChooser">
+        <div class="col-6">
+            <div class="card">
+                <div class="card-body" id="customChooser">
                     <h3>
                         <input id="customRadio" type="radio" name="themeType" value="custom"
                             <s:if test="customTheme">checked</s:if> onclick="proposeThemeTypeChange($(this))"/>&nbsp;
@@ -89,7 +89,7 @@
                 onchange="proposeSharedThemeChange(this[selectedIndex].value)"/>
         </p>
         <p><s:text name="themeEditor.thisTheme"/> <p id="themeDescription"></p>
-        <p><img id="themeThumbnail" src="" class="img-responsive img-thumbnail" style="max-width: 30em" /></p>
+        <p><img id="themeThumbnail" src="" class="img-fluid img-thumbnail" style="max-width: 30em" /></p>
 
     </div>
 
@@ -103,13 +103,16 @@
 
         <%-- Preview and Update buttons --%>
         <p> <s:text name="themeEditor.previewDescription"/> </p>
-        <input type="button" name="themePreview" class="btn"
+        <input type="button" name="themePreview" class="btn btn-outline-secondary"
             value="<s:text name='themeEditor.preview' />"
             onclick="fullPreview($('#themeSelector').get(0))"/>
 
-        <s:submit cssClass="btn btn-default" value="%{getText('themeEditor.save')}"/>
-
-        <input type="button" class="btn" onclick="cancelChanges()" value="<s:text name='generic.cancel'/>" />
+        <div class="row mb-3">
+            <div class="col-sm-9 offset-sm-3">
+                <s:submit cssClass="btn btn-primary" value="%{getText('themeEditor.save')}" theme="simple"/>
+                <input type="button" class="btn btn-outline-secondary" onclick="cancelChanges()" value="<s:text name='generic.cancel'/>" />
+            </div>
+        </div>
 
     </div>
 
@@ -133,9 +136,12 @@
         </s:else>
 
         <%-- Update button --%>
-        <s:submit cssClass="btn btn-default" value="%{getText('themeEditor.save')}"/>
-
-        <input type="button" class="btn" onclick="cancelChanges()" value="<s:text name='generic.cancel'/>" />
+        <div class="row mb-3">
+            <div class="col-sm-9 offset-sm-3">
+                <s:submit cssClass="btn btn-primary" value="%{getText('themeEditor.save')}" theme="simple"/>
+                <input type="button" class="btn btn-outline-secondary" onclick="cancelChanges()" value="<s:text name='generic.cancel'/>" />
+            </div>
+        </div>
 
     </div>
 
@@ -155,13 +161,16 @@
 
         <%-- Preview and Update buttons --%>
         <p> <s:text name="themeEditor.previewDescription"/> </p>
-        <input type="button" name="themePreview" class="btn"
+        <input type="button" name="themePreview" class="btn btn-outline-secondary"
             value="<s:text name='themeEditor.preview' />"
             onclick="fullPreview($('#themeSelector').get(0))"/>
 
-        <s:submit cssClass="btn btn-default" value="%{getText('themeEditor.save')}"/>
-
-        <input type="button" class="btn" onclick="cancelChanges()" value="<s:text name='generic.cancel'/>" />
+        <div class="row mb-3">
+            <div class="col-sm-9 offset-sm-3">
+                <s:submit cssClass="btn btn-primary" value="%{getText('themeEditor.save')}" theme="simple"/>
+                <input type="button" class="btn btn-outline-secondary" onclick="cancelChanges()" value="<s:text name='generic.cancel'/>" />
+            </div>
+        </div>
 
     </div>
 
@@ -179,7 +188,7 @@
         <s:if test="customTheme">
         originalType = "custom"
         updateView($('#customRadio'));
-        previewImage('<s:property value="themes[0].id"/>');
+        previewImage($('#themeSelector').val());
         </s:if>
 
         <s:else>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/WeblogConfig.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/WeblogConfig.jsp
index c0437c721f..db24d93f23 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/WeblogConfig.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/WeblogConfig.jsp
@@ -142,7 +142,7 @@
     </s:if>
 
     <div class="control" style="margin-bottom:5em">
-        <s:submit cssClass="btn btn-success" value="%{getText('websiteSettings.button.update')}"/>
+        <s:submit theme="simple" cssClass="btn btn-success" value="%{getText('websiteSettings.button.update')}"/>
     </div>
 
 </s:form>
@@ -157,6 +157,6 @@
     <div class="alert alert-danger" role="alert">
         <s:text name="websiteSettings.removeWebsiteWarning"/>
     </div>
-    <s:submit cssClass="btn btn-danger" value="%{getText('websiteSettings.button.remove')}"/>
+    <s:submit theme="simple" cssClass="btn btn-danger" value="%{getText('websiteSettings.button.remove')}"/>
 
 </s:form>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/WeblogRemoveConfirm.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/WeblogRemoveConfirm.jsp
index db4be40a65..300409cf13 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/WeblogRemoveConfirm.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/WeblogRemoveConfirm.jsp
@@ -38,7 +38,7 @@
         <s:form action="weblogRemove!remove" theme="bootstrap" cssClass="form-horizontal">
             <s:hidden name="salt" />
             <s:hidden name="weblog" value="%{actionWeblog.handle}" />
-            <s:submit cssClass="btn btn-danger" value="%{getText('generic.yesRemove')}" />
+            <s:submit theme="simple" cssClass="btn btn-danger" value="%{getText('generic.yesRemove')}" />
         </s:form>
 
     </div>
@@ -47,7 +47,7 @@
         <s:form action="weblogConfig" method="post" theme="bootstrap" cssClass="form-horizontal">
             <s:hidden name="salt" />
             <s:hidden name="weblog" value="%{actionWeblog.handle}" />
-            <s:submit cssClass="btn btn-success" value="%{getText('generic.cancel')}" />
+            <s:submit theme="simple" cssClass="btn btn-success" value="%{getText('generic.cancel')}" />
         </s:form>
 
     </div>
diff --git a/app/src/main/webapp/WEB-INF/jsps/tiles/bannerInstallation.jsp b/app/src/main/webapp/WEB-INF/jsps/tiles/bannerInstallation.jsp
index 8773ea50ea..af8b537f38 100644
--- a/app/src/main/webapp/WEB-INF/jsps/tiles/bannerInstallation.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/tiles/bannerInstallation.jsp
@@ -17,13 +17,13 @@
 --%>
 <%@ include file="/WEB-INF/jsps/taglibs-struts2.jsp" %>
 
-<nav class="navbar navbar-default navbar-static-top navbar-inverse">
+<nav class="navbar navbar-light navbar-static-top navbar-inverse">
     <div class="container-fluid">
         <div id="navbar" class="navbar-collapse collapse">
 
             <div class="navbar-header">
-                <button type="button" class="navbar-toggle collapsed"
-                        data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+                <button type="button" class="navbar-toggler collapsed"
+                        data-bs-toggle="collapse" data-bs-target="#navbar" aria-expanded="false" aria-controls="navbar">
                     <span class="sr-only">Toggle navigation</span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
@@ -35,8 +35,8 @@
             <ul class="nav navbar-nav">
             </ul>
 
-            <ul class="nav navbar-nav navbar-right">
-                <li><a href="<s:url value='/'/>"><s:text name="installer.bannerTitleRight" /></a></li>
+            <ul class="nav navbar-nav ms-auto">
+                <li class="nav-item"><a class="nav-link" href="<s:url value='/'/>"><s:text name="installer.bannerTitleRight" /></a></li>
             </ul>
 
         </div>
diff --git a/app/src/main/webapp/WEB-INF/jsps/tiles/bannerStatus.jsp b/app/src/main/webapp/WEB-INF/jsps/tiles/bannerStatus.jsp
index 9c2b78e4a2..d948ae3b81 100644
--- a/app/src/main/webapp/WEB-INF/jsps/tiles/bannerStatus.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/tiles/bannerStatus.jsp
@@ -17,22 +17,18 @@
 --%>
 <%@ include file="/WEB-INF/jsps/taglibs-struts2.jsp" %>
 
-<nav class="navbar navbar-default navbar-static-top navbar-inverse">
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
     <div class="container-fluid">
-        <div id="navbar" class="navbar-collapse collapse">
-
-            <div class="navbar-header">
-                <button type="button" class="navbar-toggle collapsed" 
-                        data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                </button>
-                <a class="navbar-brand" href="#"><s:property value="%{getProp('site.name')}" /></a>
-            </div>
-            
-            <ul class="nav navbar-nav">
+        <a class="navbar-brand" href="#"><s:property value="%{getProp('site.name')}" /></a>
+        <button type="button" class="navbar-toggler" data-bs-toggle="collapse"
+                data-bs-target="#navbar" aria-expanded="false" aria-controls="navbar"
+                aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div id="navbar" class="collapse navbar-collapse">
+
+            <ul class="navbar-nav">
 
                 <s:if test="actionWeblog != null">
                     
@@ -40,15 +36,15 @@
                     <s:if test="#tabMenu != null">
 
                         <s:iterator var="tab" value="#tabMenu.tabs">
-                            <li class="dropdown">
-                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-                                   aria-haspopup="true" aria-expanded="false">
-                                    <s:text name="%{#tab.key}"/> <span class="caret"></span>
+                            <li class="nav-item dropdown">
+                                <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button"
+                                   aria-expanded="false">
+                                    <s:text name="%{#tab.key}"/>
                                 </a>
                                 <ul class="dropdown-menu">
                                     <s:iterator var="tabItem" value="#tab.items" status="stat">
                                         <li>
-                                            <a href="<s:url action="%{#tabItem.action}">
+                                            <a class="dropdown-item" href="<s:url action="%{#tabItem.action}">
                                                 <s:param name="weblog" value="actionWeblog.handle"/></s:url>">
                                                 <s:text name="%{#tabItem.key}"/>
                                             </a>
@@ -68,15 +64,15 @@
                     <s:if test="#tabMenu != null">
 
                         <s:iterator var="tab" value="#tabMenu.tabs">
-                            <li class="dropdown">
-                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-                                   aria-haspopup="true" aria-expanded="false">
-                                    <s:text name="%{#tab.key}"/> <span class="caret"></span>
+                            <li class="nav-item dropdown">
+                                <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button"
+                                   aria-expanded="false">
+                                    <s:text name="%{#tab.key}"/>
                                 </a>
                                 <ul class="dropdown-menu">
                                     <s:iterator var="tabItem" value="#tab.items" status="stat">
                                         <li>
-                                            <a href="<s:url action='%{#tabItem.action}' />">
+                                            <a class="dropdown-item" href="<s:url action='%{#tabItem.action}' />">
                                                 <s:text name="%{#tabItem.key}"/>
                                             </a>
                                         </li>
@@ -91,30 +87,30 @@
 
             </ul>
             
-            <ul class="nav navbar-nav navbar-right">
+            <ul class="navbar-nav ms-auto">
                 
-                <li><a href="<s:url value='/'/>"><s:property value="getProp('site.shortName')"/></a></li>
+                <li class="nav-item"><a class="nav-link" href="<s:url value='/'/>"><s:property value="getProp('site.shortName')"/></a></li>
 
-                <li>
-                    <a href="<s:url action='menu' namespace='/roller-ui' />">
+                <li class="nav-item">
+                    <a class="nav-link" href="<s:url action='menu' namespace='/roller-ui' />">
                         <s:text name="mainPage.mainMenu" /></a>
                 </li>
 
                 <s:if test="authenticatedUser != null">
-                    <li>
-                        <a href="<s:url action='logout' namespace='/roller-ui' />">
+                    <li class="nav-item">
+                        <a class="nav-link" href="<s:url action='logout' namespace='/roller-ui' />">
                             <s:text name="navigationBar.logout"/></a>
                     </li>
                 </s:if>
                 <s:else>
-                    <li>
-                        <a href="<s:url action='login-redirect' namespace='/roller-ui' />">
+                    <li class="nav-item">
+                        <a class="nav-link" href="<s:url action='login-redirect' namespace='/roller-ui' />">
                             <s:text name="navigationBar.login"/></a>
                     </li>
 
                     <s:if test="getBooleanProp('users.registration.enabled') && getProp('authentication.method') != 'ldap'">
-                        <li>
-                            <a href="<s:url action='register' namespace='/roller-ui' />">
+                        <li class="nav-item">
+                            <a class="nav-link" href="<s:url action='register' namespace='/roller-ui' />">
                                 <s:text name="navigationBar.register"/></a>
                         </li>
                     </s:if>
diff --git a/app/src/main/webapp/WEB-INF/jsps/tiles/head.jsp b/app/src/main/webapp/WEB-INF/jsps/tiles/head.jsp
index a9036862af..ea02b05451 100644
--- a/app/src/main/webapp/WEB-INF/jsps/tiles/head.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/tiles/head.jsp
@@ -12,9 +12,9 @@ You can override it with your own file via WEB-INF/tiles-def.xml
 
 <script src="<s:url value='/webjars/jquery-validation/1.20.0/jquery.validate.min.js' />"></script>
 
-<link href="<s:url value='/webjars/bootstrap/3.4.1/css/bootstrap.min.css' />" rel="stylesheet" />
-<link href="<s:url value='/webjars/bootstrap/3.4.1/css/bootstrap-theme.min.css' />" rel="stylesheet" />
-<script src="<s:url value='/webjars/bootstrap/3.4.1/js/bootstrap.min.js' />"></script>
+<link href="<s:url value='/webjars/bootstrap/5.3.8/css/bootstrap.min.css' />" rel="stylesheet" />
+<link href="<s:url value='/webjars/bootstrap-icons/1.13.1/font/bootstrap-icons.css' />" rel="stylesheet" />
+<script src="<s:url value='/webjars/bootstrap/5.3.8/js/bootstrap.bundle.min.js' />"></script>
 
 <script src="<s:url value='/webjars/clipboard.js/2.0.11/clipboard.min.js' />"></script>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/tiles/menu.jsp b/app/src/main/webapp/WEB-INF/jsps/tiles/menu.jsp
index 8055b63170..9231de0d2a 100644
--- a/app/src/main/webapp/WEB-INF/jsps/tiles/menu.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/tiles/menu.jsp
@@ -21,21 +21,21 @@
 <s:if test="#tabMenu != null">
 
     <%--
-    <nav class="navbar navbar-default">
+    <nav class="navbar navbar-light">
         <div class="container-fluid">
-            <div id="navbar" class="navbar-collapse collapse">
-                <ul class="nav navbar-nav">
+            <div id="navbar" class="collapse navbar-collapse">
+                <ul class="navbar-nav">
 
                     <s:iterator id="tab" value="#tabMenu.tabs">
-                        <li class="dropdown">
-                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 
-                                aria-haspopup="true" aria-expanded="false">
-                                <s:text name="%{#tab.key}"/> <span class="caret"></span>
+                        <li class="nav-item dropdown">
+                            <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button"
+                                aria-expanded="false">
+                                <s:text name="%{#tab.key}"/>
                             </a>
                             <ul class="dropdown-menu">
                                 <s:iterator id="tabItem" value="#tab.items" status="stat">
                                     <li>
-                                        <a href="<s:url action="%{#tabItem.action}"><s:param name="weblog" value="actionWeblog.handle"/></s:url>">
+                                        <a class="dropdown-item" href="<s:url action="%{#tabItem.action}"><s:param name="weblog" value="actionWeblog.handle"/></s:url>">
                                             <s:text name="%{#tabItem.key}"/>
                                         </a>
                                     </li>
@@ -43,7 +43,7 @@
                             </ul>
                         </li>
                     </s:iterator>
-                    
+
                 </ul>
             </div> <!--/.nav-collapse -->
         </div> <!--/.container-fluid -->
diff --git a/app/src/main/webapp/WEB-INF/jsps/tiles/messages.jsp b/app/src/main/webapp/WEB-INF/jsps/tiles/messages.jsp
index 5f2bed2fd8..6ddafe2a4b 100644
--- a/app/src/main/webapp/WEB-INF/jsps/tiles/messages.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/tiles/messages.jsp
@@ -38,20 +38,16 @@
 
 <%-- Success Messages --%>
 <s:if test="!actionMessages.isEmpty">
-    <div id="messages" class="alert alert-success">
-        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-        </button>
+    <div id="messages" class="alert alert-success alert-dismissible fade show">
         <s:actionmessage />
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
     </div>
 </s:if>
 
 <%-- Error Messages --%>
 <s:if test="!actionErrors.isEmpty || !fieldErrors.isEmpty">
-    <div id="errors" class="alert alert-danger">
-        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-        </button>
+    <div id="errors" class="alert alert-danger alert-dismissible fade show">
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         <ul>
 
             <s:iterator var="actionError" value="actionErrors">
diff --git a/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-mainmenupage.jsp b/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-mainmenupage.jsp
index 145bbcb672..be826264ef 100644
--- a/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-mainmenupage.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-mainmenupage.jsp
@@ -39,8 +39,8 @@
 
         <div class="col-md-3 roller-column-left">
 
-            <div class="panel panel-default">
-                <div class="panel-body" style="text-align: center">
+            <div class="card">
+                <div class="card-body" style="text-align: center">
 
                     <img src='<s:url value="/roller-ui/images/feather.svg" />'
                          alt="ASF feat" height="100" align="center"/>
@@ -49,8 +49,8 @@
                 </div>
             </div>
 
-            <div class="panel panel-default">
-                <div class="panel-body">
+            <div class="card">
+                <div class="card-body">
 
                     <tiles:insertAttribute name="sidebar"/>
 
@@ -61,8 +61,8 @@
 
         <div class="col-md-9 roller-column-right">
 
-            <div class="panel panel-default">
-                <div class="panel-body">
+            <div class="card">
+                <div class="card-body">
 
                     <h2 class="roller-page-title"><s:property value="pageTitle"/></h2>
                     <tiles:insertAttribute name="messages"/>
diff --git a/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-simple-tabbedpage.jsp b/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-simple-tabbedpage.jsp
index 1b7227e6e2..f671d62c9a 100644
--- a/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-simple-tabbedpage.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-simple-tabbedpage.jsp
@@ -36,8 +36,8 @@
 
     <div class="row">
         <div class="col-md-12 roller-column-left">
-            <div class="panel panel-default">
-                <div class="panel-body">
+            <div class="card">
+                <div class="card-body">
                     <tiles:insertAttribute name="messages"/>
                     <h2 class="roller-page-title"><s:property value="pageTitle"/></h2>
                     <tiles:insertAttribute name="content"/>
diff --git a/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-simplepage.jsp b/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-simplepage.jsp
index 9219b4980e..ae910ae455 100644
--- a/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-simplepage.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-simplepage.jsp
@@ -41,8 +41,8 @@
 
             <h1 class="roller-page-title"><s:property value="pageTitle"/></h1>
             <p><tiles:insertAttribute name="messages"/>
-            <div class="panel">
-                <div class="panel-body">
+            <div class="card">
+                <div class="card-body">
                     <tiles:insertAttribute name="content"/>
                 </div>
             </div>
diff --git a/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-tabbedpage.jsp b/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-tabbedpage.jsp
index 8d5556f7a1..8946a26f4e 100644
--- a/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-tabbedpage.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-tabbedpage.jsp
@@ -41,8 +41,8 @@
 
         <div class="col-md-3 roller-column-left">
 
-            <div class="panel panel-default">
-                <div class="panel-body" style="text-align: center">
+            <div class="card">
+                <div class="card-body" style="text-align: center">
 
                     <img src='<s:url value="/roller-ui/images/feather.svg" />'
                          alt="ASF feat" height="100" align="center"/>
@@ -57,8 +57,8 @@
 
             <c:if test="${sidebar != '/WEB-INF/jsps/tiles/empty.jsp'}">
                 <s:property value="sidebar"/>
-                <div class="panel panel-default">
-                    <div class="panel-body">
+                <div class="card">
+                    <div class="card-body">
 
                         <tiles:insertAttribute name="sidebar"/>
 
@@ -69,8 +69,8 @@
         </div>
 
         <div class="col-md-9 roller-column-right">
-            <div class="panel panel-default">
-                <div class="panel-body" style="min-height: 30em">
+            <div class="card">
+                <div class="card-body" style="min-height: 30em">
 
                     <tiles:insertAttribute name="messages"/>
 
diff --git a/app/src/main/webapp/roller-ui/styles/roller.css b/app/src/main/webapp/roller-ui/styles/roller.css
index 2fb6c6d21a..605a72e713 100644
--- a/app/src/main/webapp/roller-ui/styles/roller.css
+++ b/app/src/main/webapp/roller-ui/styles/roller.css
@@ -49,14 +49,6 @@ p {
     margin: 10px;
 }
 
-.fade {
-    opacity: 0;
-    -webkit-transition: opacity 1.25s linear;
-    -moz-transition: opacity 1.25s linear;
-    -ms-transition: opacity 1.25s linear;
-    -o-transition: opacity 1.25s linear;
-    transition: opacity 1.25s linear;
-}
 
 /* bootstrap tweaks */
 
@@ -347,3 +339,38 @@ tr.rollertable_pending {
 
 
 
+
+/* Bootstrap 3 rendered all labels bold; Bootstrap 5 does not. Keep the
+   original emphasis on form field labels. */
+.form-label,
+.col-form-label {
+    font-weight: 700;
+}
+
+/* Bootstrap 5 leaves readonly inputs looking editable; shade them like
+   disabled ones so fields the user cannot change read as such. */
+.form-control[readonly],
+.form-select[disabled] {
+    background-color: var(--bs-secondary-bg);
+    opacity: 1;
+}
+
+/* Field hint icons sit next to the label rather than in the text flow. */
+.s2b_tooltip {
+    margin-left: .35rem;
+    color: var(--bs-secondary-color);
+    cursor: help;
+}
+
+/* Give the form panels a little breathing room inside the surrounding card. */
+form fieldset {
+    border: 0;
+    padding: 0;
+    margin: 0;
+}
+
+/* Bootstrap 3's navbar carried a bottom margin that Bootstrap 5 dropped,
+   which left page titles butted up against the nav bar. */
+nav.navbar {
+    margin-bottom: 20px;
+}
diff --git a/app/src/main/webapp/theme/scripts/roller.js b/app/src/main/webapp/theme/scripts/roller.js
index f703a622d7..066061c3d4 100644
--- a/app/src/main/webapp/theme/scripts/roller.js
+++ b/app/src/main/webapp/theme/scripts/roller.js
@@ -234,3 +234,14 @@ $(document).ready(function () {
         regex: /^\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i
     });
 });
+
+// Bootstrap 5 tooltips are opt-in; field hints come from the form theme.
+// Titles may contain markup, hence html: true.
+document.addEventListener('DOMContentLoaded', function () {
+    if (typeof bootstrap === 'undefined' || !bootstrap.Tooltip) {
+        return;
+    }
+    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (el) {
+        new bootstrap.Tooltip(el, {html: true, placement: 'right'});
+    });
+});