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 1/4] 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'});
+    });
+});

From 0a5c0df53fc827022822fca61d175b4f89ab7d8c Mon Sep 17 00:00:00 2001
From: Matt Raible <matt@raibledesigns.com>
Date: Fri, 25 Sep 2026 10:30:53 -0600
Subject: [PATCH 2/4] Load Summernote's Bootstrap 5 build

The editor was loading Summernote's default build, which targets Bootstrap 3 and wires its toolbar dropdowns and dialogs through data-toggle attributes that Bootstrap 5 no longer reads. Summernote 0.9.1 ships a Bootstrap 5 build, so the editor now uses that.
---
 app/src/main/webapp/WEB-INF/jsps/tiles/head.jsp | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 d89fb68cf0..179527db80 100644
--- a/app/src/main/webapp/WEB-INF/jsps/tiles/head.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/tiles/head.jsp
@@ -21,8 +21,8 @@ You can override it with your own file via WEB-INF/tiles-def.xml
 
 <script src="<s:url value='/webjars/clipboard.js/2.0.11/clipboard.min.js' />"></script>
 
-<script src="<s:url value='/webjars/summernote/0.9.1/dist/summernote.min.js' />"></script>
-<link href="<s:url value='/webjars/summernote/0.9.1/dist/summernote.css' />" rel="stylesheet" />
+<script src="<s:url value='/webjars/summernote/0.9.1/dist/summernote-bs5.min.js' />"></script>
+<link href="<s:url value='/webjars/summernote/0.9.1/dist/summernote-bs5.min.css' />" rel="stylesheet" />
 
 <link rel="stylesheet" media="all" href='<s:url value="/roller-ui/styles/roller.css"/>' />
 

From 021872f17164c7335af879e8ca69e561230d8965 Mon Sep 17 00:00:00 2001
From: Matt Raible <matt@raibledesigns.com>
Date: Fri, 25 Sep 2026 12:09:04 -0600
Subject: [PATCH 3/4] Drop jQuery and jQuery Mobile from the Basic Mobile theme

The theme loaded jQuery 2.1.1 and jQuery Mobile 1.4.2 from code.jquery.com over plain http. Both versions have known XSS vulnerabilities, jQuery Mobile is no longer maintained, and the standard weblog template's own Content-Security-Policy (script-src 'self') already blocked the script, which left its View Mobile Weblog link doing nothing.

The mobile templates keep their data-role markup, which the Velocity mobile macros also emit, and basic-mobile-custom.css now styles it directly: header and footer bars, inset list views with dividers, the next/previous navbar, and buttons. The category chooser opens with CSS :target from its existing #categories link. The view switch links carry ?deviceType=standard or ?deviceType=mobile, which MobileDeviceRepository already honors, and a few lines of plain JavaScript remember the choice in the roller_user_request_type cookie as before. permalink-mobile.vm's comment list also gets its missing closing </ul>.

roller-ui/styles/jquery.mobile-theme stays, because weblogs that customized this theme have their own copies of the templates that still reference it.
---
 .../basicmobile/basic-mobile-custom.css       | 135 +++++++++++++++++-
 .../themes/basicmobile/permalink-mobile.vm    |  15 +-
 .../basicmobile/searchresults-mobile.vm       |  14 --
 .../themes/basicmobile/weblog-mobile.vm       |  31 +---
 .../main/webapp/themes/basicmobile/weblog.vm  |  17 +--
 5 files changed, 145 insertions(+), 67 deletions(-)

diff --git a/app/src/main/webapp/themes/basicmobile/basic-mobile-custom.css b/app/src/main/webapp/themes/basicmobile/basic-mobile-custom.css
index 649fbbbf02..9eb9859e9e 100644
--- a/app/src/main/webapp/themes/basicmobile/basic-mobile-custom.css
+++ b/app/src/main/webapp/themes/basicmobile/basic-mobile-custom.css
@@ -97,4 +97,137 @@ Basic theme styles
 }
 .content-textbox p {
     margin: 0 0 8px;
-}
\ No newline at end of file
+}
+
+/* mobile page layout ----------------------------------------------
+   The mobile templates keep their data-role markup; these rules style it
+   without a JavaScript framework. */
+
+body {
+    margin: 0;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+[data-role="header"], [data-role="footer"] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: .5em;
+    padding: .5em 1em;
+    background: #333;
+    color: #fff;
+}
+
+[data-role="header"] h1, [data-role="footer"] h4 {
+    flex: 1 1 100%;
+    margin: .25em 0;
+    font-size: 1.1em;
+    text-align: center;
+}
+
+[data-role="header"] a {
+    color: #fff;
+}
+
+.ui-content {
+    padding: 1em;
+}
+
+[data-role="button"], input[type="submit"] {
+    display: inline-block;
+    padding: .5em 1em;
+    border: 1px solid #ccc;
+    border-radius: .4em;
+    background: #f6f6f6;
+    color: #333;
+    font: inherit;
+    cursor: pointer;
+}
+
+[data-role="header"] [data-role="button"] {
+    border-color: #666;
+    background: #555;
+    color: #fff;
+}
+
+[data-mini="true"] {
+    padding: .2em .6em;
+    font-size: .85em;
+}
+
+[data-role="listview"] {
+    margin: 1em 0;
+    padding: 0;
+    list-style: none;
+}
+
+[data-role="listview"][data-inset="true"] {
+    overflow: hidden;
+    border: 1px solid #ddd;
+    border-radius: .5em;
+}
+
+[data-role="listview"] > li {
+    padding: .75em 1em;
+    border-top: 1px solid #ddd;
+}
+
+[data-role="listview"] > li:first-child {
+    border-top: 0;
+}
+
+[data-role="listview"] > li[data-role="list-divider"] {
+    background: #e9e9e9;
+    font-size: .9em;
+    font-weight: bold;
+}
+
+[data-role="listview"] > li > a {
+    display: block;
+    color: inherit;
+}
+
+.ui-btn-active > a {
+    font-weight: bold;
+}
+
+[data-role="navbar"] ul {
+    display: flex;
+    gap: .5em;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+[data-role="navbar"] li {
+    flex: 1;
+}
+
+[data-role="navbar"] a {
+    display: block;
+    padding: .5em;
+    border: 1px solid #ccc;
+    border-radius: .4em;
+    background: #f6f6f6;
+    text-align: center;
+}
+
+/* popups open when their id is the URL fragment, e.g. the category chooser */
+[data-role="popup"] {
+    display: none;
+}
+
+[data-role="popup"]:target {
+    display: block;
+    margin: .5em 0;
+}
+
+[data-role="collapsible"] h2 {
+    margin: 0 0 .5em;
+    font-size: 1em;
+}
diff --git a/app/src/main/webapp/themes/basicmobile/permalink-mobile.vm b/app/src/main/webapp/themes/basicmobile/permalink-mobile.vm
index b168e7651a..44825261aa 100644
--- a/app/src/main/webapp/themes/basicmobile/permalink-mobile.vm
+++ b/app/src/main/webapp/themes/basicmobile/permalink-mobile.vm
@@ -7,21 +7,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <link rel="stylesheet" href="$model.weblog.stylesheet">
-  <link rel="stylesheet" href="$url.absoluteSite/roller-ui/styles/jquery.mobile-theme/default.min.css" />
-  <link rel="stylesheet" href="$url.absoluteSite/roller-ui/styles/jquery.mobile-theme/jquery.mobile.icons.min.css" />
-  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css" />
   #showMetaDescription()
   #showAnalyticsTrackingCode($model.weblog)
-
-  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
-
-  <script>
-    $(document).bind("mobileinit", function(){
-      $.mobile.ajaxEnabled = false;
-    });
-  </script>
-
-  <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
 </head>
 <!-- permalink-mobile -->
 <body>
@@ -60,7 +47,7 @@
         <li data-theme="a">
           #showWeblogEntryCommentForm($model.weblogEntry)
         </li>
-      <ul>
+      </ul>
     
     </div>
 
diff --git a/app/src/main/webapp/themes/basicmobile/searchresults-mobile.vm b/app/src/main/webapp/themes/basicmobile/searchresults-mobile.vm
index 1d1cb29f8f..64c5ce235e 100644
--- a/app/src/main/webapp/themes/basicmobile/searchresults-mobile.vm
+++ b/app/src/main/webapp/themes/basicmobile/searchresults-mobile.vm
@@ -7,21 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <link rel="stylesheet" href="$model.weblog.stylesheet">
-  <link rel="stylesheet" href="$url.absoluteSite/roller-ui/styles/jquery.mobile-theme/default.min.css" />
-  <link rel="stylesheet" href="$url.absoluteSite/roller-ui/styles/jquery.mobile-theme/jquery.mobile.icons.min.css" />
-  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css" />
 
-  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
-
-  <script>
-
-    $(document).bind("mobileinit", function(){
-      $.mobile.ajaxEnabled = false;
-    });
-
-  </script>
-
-  <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
 </head>
 <!-- searchresults-mobile -->
 <body>
diff --git a/app/src/main/webapp/themes/basicmobile/weblog-mobile.vm b/app/src/main/webapp/themes/basicmobile/weblog-mobile.vm
index 987619d9a9..b7fc01113b 100644
--- a/app/src/main/webapp/themes/basicmobile/weblog-mobile.vm
+++ b/app/src/main/webapp/themes/basicmobile/weblog-mobile.vm
@@ -9,35 +9,14 @@
   #showAnalyticsTrackingCode($model.weblog)
 
   <link rel="stylesheet" href="$model.weblog.stylesheet">
-  <link rel="stylesheet" href="$url.absoluteSite/roller-ui/styles/jquery.mobile-theme/default.min.css" />
-  <link rel="stylesheet" href="$url.absoluteSite/roller-ui/styles/jquery.mobile-theme/jquery.mobile.icons.min.css" />
-  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css" />
-
-  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
-
-  <script>
-
-    $(document).bind("mobileinit", function(){
-      $.mobile.ajaxEnabled = false;
-    });
-
-  </script>
-
-  <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
 
   <script>
-    $(document).bind("pageinit", function(){
-      $('#btnStandard').on('click', function() {
-        setCookie("roller_user_request_type","standard",30);
-        $("#btnStandard").attr('href', '?deviceType=standard').click();
+    // remember the choice, then let the link's deviceType parameter switch views
+    document.addEventListener("DOMContentLoaded", function () {
+      document.getElementById("btnStandard").addEventListener("click", function () {
+        document.cookie = "roller_user_request_type=standard; max-age=" + 30 * 24 * 60 * 60 + "; path=/";
       });
     });
-    function setCookie(c_name, value, exdays) {
-      var exdate = new Date();
-      exdate.setDate(exdate.getDate() + exdays);
-      var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString() + "; path=/");
-      document.cookie = c_name + "=" + c_value;
-    }
   </script>
 </head>
 <!-- weblog-mobile -->
@@ -47,7 +26,7 @@
     <div data-role="header" data-theme="a">
       <h1>$model.weblog.name</h1>
       <a href="$url.absoluteSite" data-icon="home" data-theme="a">Home</a>
-      <a href="#" id="btnStandard" data-role="button">View Standard</a>
+      <a href="?deviceType=standard" id="btnStandard" data-role="button">View Standard</a>
     </div>
 
     <div role="main" class="ui-content">
diff --git a/app/src/main/webapp/themes/basicmobile/weblog.vm b/app/src/main/webapp/themes/basicmobile/weblog.vm
index 88504abad5..4ee14ea74d 100644
--- a/app/src/main/webapp/themes/basicmobile/weblog.vm
+++ b/app/src/main/webapp/themes/basicmobile/weblog.vm
@@ -7,22 +7,15 @@
     <title>$model.weblog.name</title>
     #showAutodiscoveryLinks($model.weblog)
     #showAnalyticsTrackingCode($model.weblog)
-    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
     <link rel="stylesheet" media="all" href="$model.weblog.stylesheet">
     #showMetaDescription()
     <script>
-      $(document).ready(function () {
-        $('#btnMobile').on('click', function() {
-           setCookie("roller_user_request_type","mobile",30);
-           $("#btnMobile").attr('href', '?deviceType=mobile').click();
+      // remember the choice, then let the link's deviceType parameter switch views
+      document.addEventListener("DOMContentLoaded", function () {
+        document.getElementById("btnMobile").addEventListener("click", function () {
+          document.cookie = "roller_user_request_type=mobile; max-age=" + 30 * 24 * 60 * 60 + "; path=/";
         });
       });
-      function setCookie(c_name, value, exdays) {
-        var exdate = new Date();
-        exdate.setDate(exdate.getDate() + exdays);
-        var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString() + "; path=/");
-        document.cookie = c_name + "=" + c_value;
-      }
     </script>
 </head>
 <!-- weblog -->
@@ -51,7 +44,7 @@
 <div class="rightbar_wrapper">
   <div class="rightbar">
     <div class="mobile">
-        <a id="btnMobile" href="#" alt="View Mobile Weblog">View Mobile Weblog</a>
+        <a id="btnMobile" href="?deviceType=mobile">View Mobile Weblog</a>
     </div>
     #includeTemplate($model.weblog "sidebar")
   </div>

From 7092e9150f3ce48950c46cccd2074897a3f806a1 Mon Sep 17 00:00:00 2001
From: Matt Raible <matt@raibledesigns.com>
Date: Fri, 25 Sep 2026 12:22:53 -0600
Subject: [PATCH 4/4] Fix the Basic Mobile stylesheet, entry teasers, and
 weblog script errors

The mobile templates now request their stylesheet with ?deviceType=mobile. The server picks a stylesheet rendition from the device cookie or user agent, so a mobile page reached through a ?deviceType=mobile link got the standard stylesheet; jQuery Mobile's own CSS used to hide that.

The mobile day template chose between an entry's text and its summary by testing whether the text was empty, so entries without a summary printed a literal $entry.transformedSummary or an empty teaser. It now tests the summary and uses quiet references.

roller.js is included with every weblog's comment form, but most themes don't load jQuery, so its form validation block threw "$ is not defined" on those pages. The block now runs only when jQuery Validation is present, which the admin and editor pages still load.
---
 app/src/main/webapp/theme/scripts/roller.js                 | 4 +++-
 app/src/main/webapp/themes/basicmobile/_day-mobile.vm       | 6 +++---
 app/src/main/webapp/themes/basicmobile/permalink-mobile.vm  | 2 +-
 .../main/webapp/themes/basicmobile/searchresults-mobile.vm  | 2 +-
 app/src/main/webapp/themes/basicmobile/weblog-mobile.vm     | 2 +-
 5 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/app/src/main/webapp/theme/scripts/roller.js b/app/src/main/webapp/theme/scripts/roller.js
index 066061c3d4..cecaaaddea 100644
--- a/app/src/main/webapp/theme/scripts/roller.js
+++ b/app/src/main/webapp/theme/scripts/roller.js
@@ -212,7 +212,9 @@ function validateEmail(email) {
     var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
     return re.test(email);
 }
-$(document).ready(function () {
+// weblog pages include this script with their comment form, and most themes
+// do not load jQuery, so validation only runs where jQuery Validation is loaded
+window.jQuery && jQuery.validator && jQuery(function () {
     jQuery("form.validate-form").validate();
     // Added method to check valid email address and add a custom error message
     jQuery.validator.addMethod(
diff --git a/app/src/main/webapp/themes/basicmobile/_day-mobile.vm b/app/src/main/webapp/themes/basicmobile/_day-mobile.vm
index 95b1701340..6c5362fbb9 100644
--- a/app/src/main/webapp/themes/basicmobile/_day-mobile.vm
+++ b/app/src/main/webapp/themes/basicmobile/_day-mobile.vm
@@ -22,10 +22,10 @@
         <a href="$entry.permalink" data-transition="slide">
       #end
         <h3>
-          #if($utils.isEmpty($entry.text))
-            $entry.transformedText
+          #if($utils.isEmpty($entry.summary))
+            $!entry.transformedText
           #else
-            $entry.transformedSummary
+            $!entry.transformedSummary
           #end
         </h3>
         #if($model.permalink)
diff --git a/app/src/main/webapp/themes/basicmobile/permalink-mobile.vm b/app/src/main/webapp/themes/basicmobile/permalink-mobile.vm
index 44825261aa..dd0b1f6e8e 100644
--- a/app/src/main/webapp/themes/basicmobile/permalink-mobile.vm
+++ b/app/src/main/webapp/themes/basicmobile/permalink-mobile.vm
@@ -6,7 +6,7 @@
   <title>$model.weblogEntry.title : $model.weblog.name</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <link rel="stylesheet" href="$model.weblog.stylesheet">
+  <link rel="stylesheet" href="$model.weblog.stylesheet?deviceType=mobile">
   #showMetaDescription()
   #showAnalyticsTrackingCode($model.weblog)
 </head>
diff --git a/app/src/main/webapp/themes/basicmobile/searchresults-mobile.vm b/app/src/main/webapp/themes/basicmobile/searchresults-mobile.vm
index 64c5ce235e..2599aad45c 100644
--- a/app/src/main/webapp/themes/basicmobile/searchresults-mobile.vm
+++ b/app/src/main/webapp/themes/basicmobile/searchresults-mobile.vm
@@ -6,7 +6,7 @@
   <title>Search Results for '$model.term' : $model.weblog.name</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <link rel="stylesheet" href="$model.weblog.stylesheet">
+  <link rel="stylesheet" href="$model.weblog.stylesheet?deviceType=mobile">
 
 </head>
 <!-- searchresults-mobile -->
diff --git a/app/src/main/webapp/themes/basicmobile/weblog-mobile.vm b/app/src/main/webapp/themes/basicmobile/weblog-mobile.vm
index b7fc01113b..2cb9bc3a36 100644
--- a/app/src/main/webapp/themes/basicmobile/weblog-mobile.vm
+++ b/app/src/main/webapp/themes/basicmobile/weblog-mobile.vm
@@ -8,7 +8,7 @@
   #showMetaDescription()
   #showAnalyticsTrackingCode($model.weblog)
 
-  <link rel="stylesheet" href="$model.weblog.stylesheet">
+  <link rel="stylesheet" href="$model.weblog.stylesheet?deviceType=mobile">
 
   <script>
     // remember the choice, then let the link's deviceType parameter switch views