Upgrade to bootstrap 5

flaskbb/templates/auth/account_activation.html

@@ -3,18 +3,18 @@
 
 {% extends theme("layout.html") %}
 {% block content %}
-{% from theme("macros.html") import horizontal_field %}
+{% from theme("_macros/form.html") import horizontal_field %}
 
-<div class="panel page-panel">
-    <div class="panel-heading page-head">
+<div class="card page">
+    <div class="card-header page-header">
         {% trans %}Account Activation{% endtrans %}
     </div>
 
-    <div class="panel-body">
-        <form class="form-horizontal" role="form" method="POST">
+    <div class="card-body page-body">
+        <form role="form" method="POST">
             {{ form.hidden_tag() }}
             {{ horizontal_field(form.token) }}
-            {{ horizontal_field(form.submit)}}
+            {{ horizontal_field(form.submit, div_class="offset-3 col-4")}}
         </form>
     </div>
 </div>

flaskbb/templates/auth/forgot_password.html

@@ -3,15 +3,15 @@
 
 {% extends theme("layout.html") %}
 {% block content %}
-{% from theme("macros.html") import horizontal_field %}
+{% from theme("_macros/form.html") import horizontal_field %}
 
-<div class="panel page-panel">
-    <div class="panel-heading page-head">
+<div class="card page">
+    <div class="card-header page-header">
         {% trans %}Forgot Password{% endtrans %}
     </div>
 
-    <div class="panel-body">
-        <form class="form-horizontal" role="form" method="POST">
+    <div class="card-body page-header">
+        <form role="form" method="POST">
             {{ form.hidden_tag() }}
             {{ horizontal_field(form.email) }}
 
@@ -19,7 +19,7 @@
                 {{ horizontal_field(form.recaptcha) }}
             {% endif %}
 
-            {{ horizontal_field(form.submit)}}
+            {{ horizontal_field(form.submit, div_class="offset-3 col-4")}}
         </form>
     </div>
 </div>

flaskbb/templates/auth/login.html

@@ -2,30 +2,30 @@
 {% set active_forum_nav=True %}
 
 {% extends theme("layout.html") %}
-{% from theme("macros.html") import horizontal_field %}
+{% from theme("_macros/form.html") import horizontal_field %}
 {% block content %}
 
-<div class="panel page-panel">
-    <div class="panel-heading page-head">
+<div class="card page">
+    <div class="card-header page-header">
         {% trans %}Login{% endtrans %}
     </div>
 
-    <div class="panel-body">
-        <form class="form-horizontal" role="form" method="POST">
+    <div class="card-body page-body">
+        <form role="form" method="POST">
             {{ form.hidden_tag() }}
             {{ horizontal_field(form.login)}}
             {{ horizontal_field(form.password)}}
-            {{ horizontal_field(form.remember_me) }}
+            {{ horizontal_field(form.remember_me, div_class="offset-3 col-4") }}
             {% if flaskbb_config["RECAPTCHA_ENABLED"] %}
                 {{ horizontal_field(form.recaptcha) }}
             {% endif %}
 
-            {{ horizontal_field(form.submit) }}
+            {{ horizontal_field(form.submit, div_class="offset-3 col-4") }}
 
-            <div class="form-group">
-                <div class="col-sm-offset-3 col-sm-4">
-                    <a class="pull-left" href="{{ url_for('auth.register') }}"><small>{% trans %}Not a member yet?{% endtrans %}</small></a>
-                    <a class="pull-right" href="{{ url_for('auth.forgot_password') }}"><small>{% trans %}Forgot your Password?{% endtrans %}</small></a>
+            <div class="row mb-3">
+                <div class="offset-3 col-4">
+                    <a href="{{ url_for('auth.register') }}"><small>{% trans %}Not a member yet?{% endtrans %}</small></a>
+                    <a class="float-end" href="{{ url_for('auth.forgot_password') }}"><small>{% trans %}Forgot your Password?{% endtrans %}</small></a>
                 </div>
             </div>
         </form>

flaskbb/templates/auth/reauth.html

@@ -3,18 +3,18 @@
 
 {% extends theme("layout.html") %}
 {% block content %}
-{% from theme("macros.html") import horizontal_field %}
+{% from theme("_macros/form.html") import horizontal_field %}
 
-<div class="panel page-panel">
-    <div class="panel-heading page-head">
+<div class="card page">
+    <div class="card-header page-header">
         {% trans %}Refresh Login{% endtrans %}
     </div>
 
-    <div class="panel-body">
-        <form class="form-horizontal" role="form" method="POST">
+    <div class="card-body page-body">
+        <form role="form" method="POST">
             {{ form.hidden_tag() }}
             {{ horizontal_field(form.password)}}
-            {{ horizontal_field(form.submit)}}
+            {{ horizontal_field(form.submit, div_class="offset-3 col-4")}}
         </form>
     </div>
 </div>

flaskbb/templates/auth/register.html

@@ -3,15 +3,15 @@
 
 {% extends theme("layout.html") %}
 {% block content %}
-{% from theme("macros.html") import horizontal_field %}
+{% from theme("_macros/form.html") import horizontal_field %}
 
-<div class="panel page-panel">
-    <div class="panel-heading page-head">
+<div class="card page">
+    <div class="card-header page-header">
         {% trans %}Register{% endtrans %}
     </div>
 
-    <div class="panel-body">
-        <form class="form-horizontal" role="form" method="POST">
+    <div class="card-body page-body">
+        <form role="form" method="POST">
             {{ form.hidden_tag() }}
             {{ run_hook('flaskbb_tpl_form_registration_before', form=form) }}
             {{ horizontal_field(form.username)}}
@@ -24,9 +24,9 @@
             {% endif %}
 
             {{ horizontal_field(form.language) }}
-            {{ horizontal_field(form.accept_tos)}}
+            {{ horizontal_field(form.accept_tos, div_class="offset-3 col-4")}}
             {{ run_hook('flaskbb_tpl_form_registration_after', form=form) }}
-            {{ horizontal_field(form.submit)}}
+            {{ horizontal_field(form.submit, div_class="offset-3 col-4")}}
         </form>
     </div>
 </div>

flaskbb/templates/auth/request_account_activation.html

@@ -3,19 +3,19 @@
 
 {% extends theme("layout.html") %}
 {% block content %}
-{% from theme("macros.html") import horizontal_field %}
+{% from theme("_macros/form.html") import horizontal_field %}
 
-<div class="panel page-panel">
-    <div class="panel-heading page-head">
+<div class="card page">
+    <div class="card-header page-header">
         {% trans %}Request Account Activation{% endtrans %}
     </div>
 
-    <div class="panel-body">
-        <form class="form-horizontal" role="form" method="POST">
+    <div class="card-body page-body">
+        <form role="form" method="POST">
             {{ form.hidden_tag() }}
             {{ horizontal_field(form.username) }}
             {{ horizontal_field(form.email) }}
-            {{ horizontal_field(form.submit)}}
+            {{ horizontal_field(form.submit, div_class="offset-3 col-4")}}
         </form>
     </div>
 </div>

flaskbb/templates/auth/reset_password.html

@@ -3,21 +3,21 @@
 
 {% extends theme("layout.html") %}
 {% block content %}
-{% from theme("macros.html") import horizontal_field %}
+{% from theme("_macros/form.html") import horizontal_field %}
 
-<div class="panel page-panel">
-    <div class="panel-heading page-head">
+<div class="card page">
+    <div class="card-header page-header">
         {% trans %}Reset Password{% endtrans %}
     </div>
 
-    <div class="panel-body">
-        <form class="form-horizontal" role="form" method="POST">
+    <div class="card-body page-body">
+        <form role="form" method="POST">
             {{ form.hidden_tag() }}
             {{ form.token }}
             {{ horizontal_field(form.email) }}
             {{ horizontal_field(form.password) }}
             {{ horizontal_field(form.confirm_password)}}
-            {{ horizontal_field(form.submit)}}
+            {{ horizontal_field(form.submit, div_class="offset-3 col-4")}}
         </form>
     </div>
 </div>

flaskbb/templates/errors/forbidden_page.html

@@ -3,8 +3,8 @@
 {% extends theme("layout.html") %}
 {% block content %}
 
-<div class="panel page-panel">
-    <div class="panel-body page-body">
+<div class="card page">
+    <div class="card-body page-body">
         <div class="col-md-12 col-sm-12 col-xs-12">
             <h1>{% trans %}403 - Forbidden Page{% endtrans %}</h1>
             <p>{% trans %}You do not have the permission to view this page.{% endtrans %}</p>

flaskbb/templates/errors/page_not_found.html

@@ -3,8 +3,8 @@
 {% extends theme("layout.html") %}
 {% block content %}
 
-<div class="panel page-panel">
-    <div class="panel-body page-body">
+<div class="card page">
+    <div class="card-body page-body">
         <div class="col-md-12 col-sm-12 col-xs-12">
             <h1>{% trans %}404 - Page not found!{% endtrans %}</h1>
             <p>{% trans %}The page you were looking for does not exist.{% endtrans %}</p>

flaskbb/templates/errors/server_error.html

@@ -3,8 +3,8 @@
 {% extends theme("layout.html") %}
 {% block content %}
 
-<div class="panel page-panel">
-    <div class="panel-body page-body">
+<div class="card page">
+    <div class="card-body page-body">
         <div class="col-md-12 col-sm-12 col-xs-12">
             <h1>{% trans %}500 - Server Error{% endtrans %}</h1>
             <p>{% trans %}Something went wrong!{% endtrans %}</p>

flaskbb/templates/errors/too_many_logins.html

@@ -3,8 +3,8 @@
 {% extends theme("layout.html") %}
 {% block content %}
 
-<div class="panel page-panel">
-    <div class="panel-body page-body">
+<div class="card page">
+    <div class="card-body page-body">
         <div class="col-md-12 col-sm-12 col-xs-12">
             <h1>{% trans %}429 - Too Many Requests{% endtrans %}</h1>
             <p>{% trans %}In order to prevent brute force attacks on accounts we have limited the amount of requests on this route.{% endtrans %}</p>

flaskbb/templates/forum/category.html

@@ -5,9 +5,9 @@
 {% block content %}
 
 <div class="index-view">
-    <ol class="breadcrumb flaskbb-breadcrumb">
-        <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-        <li class="active">{{ category.title }}</li>
+    <ol class="breadcrumb flaskbb-breadcrumb bg-light">
+        <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+        <li class="breadcrumb-item active">{{ category.title }}</li>
     </ol>
 
     {% include theme("forum/category_layout.html") %}

flaskbb/templates/forum/category_layout.html

@@ -1,104 +1,96 @@
-<div class="panel category-panel">
-    <div class="panel-heading category-head">
+<div class="card category mt-3">
+    <div class="card-header category-header">
         <a href="{{ category.url }}">{{ category.title }}</a>
     </div>
 
-    <div class="panel-body category-body">
-        <div class="category-meta">
-            <div class="col-md-5 col-sm-5 col-xs-8 forum-name">{% trans %}Forum{% endtrans %}</div>
-            <div class="col-md-2 col-sm-2 hidden-xs forum-stats">{% trans %}Topics{% endtrans %}</div>
-            <div class="col-md-2 col-sm-2 hidden-xs forum-stats">{% trans %}Posts{% endtrans %}</div>
-            <div class="col-md-3 col-sm-3 col-xs-4 forum-last-post">{% trans %}Last Post{% endtrans %}</div>
+    <div class="card-body category-body">
+        <div class="category-meta row m-0 ps-0">
+            <div class="col-md-5 col-sm-5 col-8 forum-name">{% trans %}Forum{% endtrans %}</div>
+            <div class="col-md-2 col-sm-2 d-none d-sm-block forum-stats">{% trans %}Topics{% endtrans %}</div>
+            <div class="col-md-2 col-sm-2 d-none d-sm-block forum-stats">{% trans %}Posts{% endtrans %}</div>
+            <div class="col-md-3 col-sm-3 col-4 forum-last-post">{% trans %}Last Post{% endtrans %}</div>
         </div>
         {% for forum, forumsread in forums %}
         <div class="row category-row hover">
 
             {% if forum.external %}
-            <div class="col-md-5 col-sm-5 col-xs-8 forum-info">
-                <div class="row">
-                    <!-- Icon -->
-                    <div class="col-md-1 col-sm-2 col-xs-2 forum-status">
-                        <span class="fa fa-external-link fa-fw forum-external"></span>
-                    </div>
-
-                    <div class="col-md-11 col-sm-10 col-xs-10">
-                        <!-- Forum Name -->
-                        <div class="forum-name">
-                            <span class="forum-link">{% trans %}Link to{% endtrans %}:</span> <a href="{{ forum.url }}">{{ forum.title }}</a>
-                        </div>
-
-                        <!-- Forum Description -->
-                        <div class="forum-description">
-                            {{ forum.description|nonpost_markup }}
-                        </div>
-                    </div>
+            <div class="col-md-5 col-sm-5 col-8 forum-info ps-3">
+                <!-- Icon -->
+                <div class="forum-status">
+                    <span class="fa fa-external-link fa-fw forum-external"></span>
+                </div>
+
+                <!-- Forum Name -->
+                <div class="forum-name">
+                    <span class="forum-link">{% trans %}Link to{% endtrans %}:</span> <a href="{{ forum.url }}">{{ forum.title }}</a>
+                </div>
+
+                <!-- Forum Description -->
+                <div class="forum-description">
+                    {{ forum.description|nonpost_markup }}
                 </div>
             </div> <!-- end forum-info -->
 
             <!-- Post Count -->
-            <div class="col-md-2 col-sm-2 hidden-xs forum-posts">
+            <div class="col-md-2 col-sm-2 d-none d-sm-block forum-posts">
                 -
             </div>
 
             <!-- Topic Count -->
-            <div class="col-md-2 col-sm-2 hidden-xs forum-topics">
+            <div class="col-md-2 col-sm-2 d-none d-sm-block forum-topics">
                 -
             </div>
 
             <!-- Last Post -->
-            <div class="col-md-3 col-sm-3 col-xs-4 forum-last-post">
+            <div class="col-md-3 col-sm-3 col-4 forum-last-post">
                 ---
             </div>
             {% else %}
-            <div class="col-md-5 col-sm-5 col-xs-8 forum-info">
-                <div class="row">
-                    <!-- Icon -->
-                    <div class="col-md-1 col-sm-2 col-xs-2 forum-status">
-                        {% if forum.locked %}
-                            <span class="fa fa-lock fa-fw forum-locked"></span>
-                        {% elif forum|forum_is_unread(forumsread, current_user) %}
-                            <span class="fa fa-comments fa-fw forum-unread"></span>
-                        {% else %}
-                            <span class="fa fa-comments-o fa-fw forum-read"></span>
-                        {% endif %}
-                    </div>
-
-                    <div class="col-md-11 col-sm-10 col-xs-10">
-                        <!-- Forum Name -->
-                        <div class="forum-name">
-                            <a href="{{ forum.url }}">{{ forum.title }}</a>
-                        </div>
-
-                        <!-- Forum Description -->
-                        <div class="forum-description">
-                            {{ forum.description|nonpost_markup }}
-                        </div>
-
-                        <!-- Forum Moderators -->
-                        {% if forum.show_moderators %}
-                        <div class="forum-moderators">
-                            {% trans %}Moderators{% endtrans %}:
-                            {% for moderator in forum.moderators %}
-                            <a href="{{ url_for('user.profile', username=moderator.username) }}">{{ moderator.username }}</a>{% if not loop.last %}, {% endif %}
-                            {% endfor %}
-                        </div>
-                        {% endif %}
-                    </div>
+            <div class="col-md-5 col-sm-5 col-8 forum-info ps-2">
+                <!-- Icon -->
+                <div class="forum-status">
+                    {% if forum.locked %}
+                        <span class="fa fa-lock fa-fw forum-locked"></span>
+                    {% elif forum|forum_is_unread(forumsread, current_user) %}
+                        <span class="fas fa-comments fa-fw forum-unread"></span>
+                    {% else %}
+                        <span class="far fa-comments fa-fw forum-read"></span>
+                    {% endif %}
+                </div>
+
+                <!-- Forum Name -->
+                <div class="forum-name">
+                    <a href="{{ forum.url }}">{{ forum.title }}</a>
+                </div>
+
+                <!-- Forum Description -->
+                <div class="forum-description">
+                    {{ forum.description|nonpost_markup }}
+                </div>
+
+                <!-- Forum Moderators -->
+                {% if forum.show_moderators %}
+                <div class="forum-moderators">
+                    {% trans %}Moderators{% endtrans %}:
+                    {% for moderator in forum.moderators %}
+                    <a href="{{ url_for('user.profile', username=moderator.username) }}">{{ moderator.username }}</a>{% if not loop.last %}, {% endif %}
+                    {% endfor %}
                 </div>
+                {% endif %}
             </div> <!-- end forum-info -->
 
             <!-- Post Count -->
-            <div class="col-md-2 col-sm-2 hidden-xs forum-topics">
+            <div class="col-md-2 col-sm-2 d-none d-sm-block forum-topics">
             {{ forum.topic_count }}
             </div>
 
             <!-- Topic Count -->
-            <div class="col-md-2 col-sm-2 hidden-xs forum-posts">
+            <div class="col-md-2 col-sm-2 d-none d-sm-block forum-posts">
             {{ forum.post_count }}
             </div>
 
             <!-- Last Post -->
-            <div class="col-md-3 col-sm-3 col-xs-4 forum-last-post">
+            <div class="col-md-3 col-sm-3 col-4 forum-last-post">
                 {% if forum.last_post_id %}
                 <div class="last-post-title">
                     <a href="{{ forum.last_post_url }}" title="{{ forum.last_post_title }}">

flaskbb/templates/forum/edit_forum.html

@@ -3,88 +3,87 @@
 
 {% extends theme("layout.html") %}
 {% block content %}
-{% from theme('macros.html') import render_pagination, topic_pages %}
+{% from theme('_macros/pagination.html') import render_pagination, topic_pages %}
 
 <form class="form" role="form" method="POST">
-    <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="{{ csrf_token() }}"></div>
+    <div class="d-none"><input id="csrf_token" name="csrf_token" type="hidden" value="{{ csrf_token() }}"></div>
 
     <div class="forum-view">
-        <ol class="breadcrumb flaskbb-breadcrumb">
-            <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-            <li><a href="{{ forum.category.url }}">{{ forum.category.title }}</a></li>
-            <li class="active">{{ forum.title }}</li>
+        <ol class="breadcrumb flaskbb-breadcrumb bg-light">
+            <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+            <li class="breadcrumb-item"><a href="{{ forum.category.url }}">{{ forum.category.title }}</a></li>
+            <li class="breadcrumb-item active">{{ forum.title }}</li>
         </ol>
 
-        <div class="row controls-row">
-            <div class="pull-left">
+        <div class="row controls-row pt-0">
+            <div class="col me-auto g-0">
                 {{ render_pagination(topics, forum.url) }}
             </div> <!-- end span pagination -->
         </div>
 
-        <div class="panel forum-panel">
-            <div class="panel-heading forum-head">
+        <div class="card forum">
+            <div class="card-header forum-header">
                 <a href="{{ forum.url }}">{{ forum.title }}</a>
             </div>
 
-            <div class="panel-body forum-body">
-                <div class="forum-meta">
-                    <div class="col-md-4 col-sm-4 col-xs-6 topic-name">{% trans %}Topic{% endtrans %}</div>
-                    <div class="col-md-2 col-sm-2 hidden-xs topic-stats">{% trans %}Posts{% endtrans %}</div>
-                    <div class="col-md-2 col-sm-2 hidden-xs topic-stats">{% trans %}Views{% endtrans %}</div>
-                    <div class="col-md-3 col-sm-3 col-xs-4 topic-last-post">{% trans %}Last Post{% endtrans %}</div>
-                    <div class="col-md-1 col-sm-1 col-xs-2 topic-select-all"><input type="checkbox" name="rowtoggle" class="action-checkall" title="{% trans %}Select all{% endtrans %}"/></div>
+            <div class="card-body forum-body">
+                <div class="row m-0 forum-meta">
+                    <div class="col-7 col-sm-4 topic-name">{% trans %}Topic{% endtrans %}</div>
+                    <div class="col-sm-2 d-none d-sm-block topic-stats">{% trans %}Posts{% endtrans %}</div>
+                    <div class="col-sm-2 d-none d-sm-block topic-stats">{% trans %}Views{% endtrans %}</div>
+                    <div class="col-4 col-sm-3 topic-last-post">{% trans %}Last Post{% endtrans %}</div>
+                    <div class="col-1 topic-select-all"><input type="checkbox" name="rowtoggle" class="action-checkall" title="{% trans %}Select all{% endtrans %}"/></div>
                 </div>
 
                 {% for topic, last_post, topicread in topics.items %}
-                <div class="row forum-row hover clearfix">
-
-                    <div class="col-md-4 col-sm-4 col-xs-6 topic-info">
-                        <div class="row">
-                            <div class="col-md-1 col-sm-2 col-xs-2 topic-status">
-                            {% if topic.locked %}
-                                <span class="fa fa-lock fa-fw topic-locked"></span>
-                            {% elif topic.important %}
-                                {% if topic|topic_is_unread(topicread, current_user, forumsread) %}
-                                    <span class="fa fa-star fa-fw topic-starred-unread"></span>
-                                {% else %}
-                                    <span class="fa fa-star-o fa-fw topic-starred-read"></span>
-                                {% endif %}
+                <div class="row forum-row hover">
+                    <div class="col-7 col-sm-4 topic-info">
+                        <div class="col-auto topic-status">
+                        {% if topic.locked %}
+                            <span class="fas fa-lock fa-fw topic-locked"></span>
+                        {% elif topic.hidden %}
+                            <span class="far fa-eye"></span>
+                        {% elif topic.important %}
+                            {% if topic|topic_is_unread(topicread, current_user, forumsread) %}
+                                <span class="far fa-star fa-fw topic-starred-unread"></span>
                             {% else %}
-                                {% if topic|topic_is_unread(topicread, current_user, forumsread) %}
-                                    <span class="fa fa-comment fa-fw topic-unread"></span>
-                                {% else %}
-                                    <span class="fa fa-comment-o fa-fw topic-read"></span>
-                                {% endif %}
+                                <span class="fas fa-star fa-fw topic-starred-read"></span>
+                            {% endif %}
+                        {% else %}
+                            {% if topic|topic_is_unread(topicread, current_user, forumsread) %}
+                                <span class="fas fa-comment fa-fw topic-unread"></span>
+                            {% else %}
+                                <span class="far fa-comment fa-fw topic-read"></span>
+                            {% endif %}
+                        {% endif %}
+                        </div>
+
+                        <div class="topic-name">
+                            <a href="{{ topic.url }}">{{ topic.title }}</a>
+                            <!-- Topic Pagination -->
+                            <span class="topic-pages">{{ topic_pages(topic, flaskbb_config["POSTS_PER_PAGE"]) }}</span>
+                        </div>
+
+                        <div class="topic-author">
+                            {% trans %}by{% endtrans %}
+                            {% if topic.user_id %}
+                             <a href="{{ topic.user.url }}">{{ topic.user.username }}</a>
+                            {% else %}
+                            {{ topic.username }}
                             {% endif %}
-                            </div>
-                            <div class="col-md-11 col-sm-10 col-xs-10">
-                                <div class="topic-name">
-                                    <a href="{{ topic.url }}">{{ topic.title }}</a>
-                                    <!-- Topic Pagination -->
-                                    <span class="topic-pages">{{ topic_pages(topic, flaskbb_config["POSTS_PER_PAGE"]) }}</span>
-                                </div>
-
-                                <div class="topic-author">
-                                    {% trans %}by{% endtrans %}
-                                    {% if topic.user_id %}
-                                     <a href="{{ topic.user.url }}">{{ topic.user.username }}</a>
-                                    {% else %}
-                                    {{ topic.username }}
-                                    {% endif %}
-                                </div>
-                            </div>
                         </div>
+
                     </div>
 
-                    <div class="col-md-2 col-sm-2 hidden-xs topic-stats">
+                    <div class="col-sm-2 d-none d-sm-block topic-stats">
                         {{ topic.post_count }}
                     </div>
 
-                    <div class="col-md-2 col-sm-2 hidden-xs topic-stats">
+                    <div class="col-sm-2 d-none d-sm-block topic-stats">
                         {{ topic.views }}
                     </div>
 
-                    <div class="col-md-3 col-sm-3 col-xs-4 topic-last-post">
+                    <div class="col-4 col-sm-3 topic-last-post">
                         <a href="{{ last_post.url }}">{{ last_post.date_created|time_since }}</a><br />
 
                         <div class="topic-author">
@@ -97,90 +96,81 @@
                         </div>
                     </div>
 
-                    <div class="col-md-1 col-sm-1 col-xs-2 topic-select">
+                    <div class="col-1 topic-select">
                         <input type="checkbox" name="rowid" class="action-checkbox" value="{{ topic.id }}" title="{% trans %}Select topic{% endtrans %}"/>
                     </div>
                 </div>
                 {% else %}
-                <div class="row forum-row clearfix">
-                    <div class="col-md-12 col-sm-12 col-xs-12">
+                <div class="row forum-row">
+                    <div class="col-12">
                         {% trans %}No Topics.{% endtrans %}
                     </div>
                 </div> <!-- end forum-row -->
                 {% endfor %}
             </div>
         </div>
-        <div class="row controls-row">
-            <div class="col-md-2 col-sm-2 col-xs-2 controls-col">
-                <div class="pull-left">
-                    <a class="btn btn-default" href="{{ forum.url }}">
-                        <span class="fa fa-arrow-left"></span> {% trans %}Back{% endtrans %}
-                    </a>
-                </div>
+        <div class="row g-0 pt-2">
+            <div class="col-2">
+                <a class="btn btn-outline-dark" href="{{ forum.url }}">
+                    <span class="fas fa-arrow-left"></span> {% trans %}Back{% endtrans %}
+                </a>
             </div>
 
-            <div class="col-md-10 col-sm-8 col-xs-8 controls-col">
-                <div class="pull-right">
-                    <div class="form-group">
-
-                        <div class="btn-group" role="group">
-                            <button name="lock" class="btn btn-warning">
-                                <span class="fa fa-lock fa-fw"></span> {% trans %}Lock{% endtrans %}
-                            </button>
-                            <button name="unlock" class="btn btn-warning">
-                                <span class="fa fa-unlock fa-fw"></span> {% trans %}Unlock{% endtrans %}
-                            </button>
-                        </div>
+            <div class="col-10">
+                <div class="form-group float-end">
 
-                        <div class="btn-group" role="group">
-                            <button name="highlight" class="btn btn-success">
-                                <span class="fa fa-star fa-fw"></span> {% trans %}Highlight{% endtrans %}
-                            </button>
-                            <button name="trivialize" class="btn btn-success">
-                                <span class="fa fa-star-o fa-fw"></span> {% trans %}Trivialize{% endtrans %}
-                            </button>
-                        </div>
+                    <div class="btn-group" role="group">
+                        <button name="lock" class="btn btn-warning">
+                            <span class="fas fa-lock fa-fw"></span> {% trans %}Lock{% endtrans %}
+                        </button>
+                        <button name="unlock" class="btn btn-warning">
+                            <span class="fas fa-unlock fa-fw"></span> {% trans %}Unlock{% endtrans %}
+                        </button>
+                    </div>
 
-                        <button name="delete" class="btn btn-danger">
-                            <span class="fa fa-trash-o fa-fw"></span> {% trans %}Delete{% endtrans %}
+                    <div class="btn-group" role="group">
+                        <button name="highlight" class="btn btn-success">
+                            <span class="fas fa-star fa-fw"></span> {% trans %}Highlight{% endtrans %}
                         </button>
+                        <button name="trivialize" class="btn btn-success">
+                            <span class="far fa-star fa-fw"></span> {% trans %}Trivialize{% endtrans %}
+                        </button>
+                    </div>
 
-                        {% if current_user.permissions.get('makehidden') %}
-                        <div class="btn-group" role="group">
-                            <button name="hide" class="btn btn-info">
-                                <span class="fa fa-user-secret fa-fw"></span> {% trans %}Hide{% endtrans %}
-                            </button>
-                            <button name="unhide" class="btn btn-info">
-                                <span class="fa fa-user fa-fw"></span> {% trans %}Unhide{% endtrans %}
-                            </button>
-                        </div>
-                        {% endif %}
+                    <button name="delete" class="btn btn-danger">
+                        <span class="fas fa-trash fa-fw"></span> {% trans %}Delete{% endtrans %}
+                    </button>
 
+                    {% if current_user.permissions.get('makehidden') %}
+                    <div class="btn-group" role="group">
+                        <button name="hide" class="btn btn-info">
+                            <span class="fas fa-eye-slash fa-fw"></span> {% trans %}Hide{% endtrans %}
+                        </button>
+                        <button name="unhide" class="btn btn-info">
+                            <span class="fas fa-eye fa-fw"></span> {% trans %}Unhide{% endtrans %}
+                        </button>
                     </div>
+                    {% endif %}
+
                 </div>
             </div>
-
-            <div class="col-md-12 col-sm-12 col-xs-12 controls-col">
-                <div class="pull-right">
-                    <div class="form-group ">
-
-                        <div class="form-inline">
-                            <select class="form-control" id="forum" name="forum">
-                                <option selected value="">{% trans %}Move to...{% endtrans %}</option>
-                                {% for forum in available_forums %}
-                                    <option value={{forum.id}}>{{ forum.title }}</option>
-                                {% endfor %}
-                            </select>
-
-                            <button name="move" class="btn btn-info">
-                                <span class="fa fa-plane"></span> {% trans %}Move{% endtrans %}
-                            </button>
-                        </div>
-
-                    </div>
+        </div>
+        <div class="row">
+            <div class="col-auto ms-auto pt-2">
+                <div class="input-group">
+                    <select class="form-select" id="forum" name="forum">
+                        <option selected value="">{% trans %}Move to...{% endtrans %}</option>
+                        {% for forum in available_forums %}
+                        <option value={{forum.id}}>{{ forum.title }}</option>
+                        {% endfor %}
+                    </select>
+
+                    <button name="move" class="btn btn-outline-dark">
+                        <span class="fas fa-plane"></span> {% trans %}Move{% endtrans %}
+                    </button>
                 </div>
             </div>
-        </div> <!-- end controls-row -->
+        </div>
     </div> <!-- end forum-view -->
 </form>
 {% endblock %}

flaskbb/templates/forum/forum.html

@@ -3,112 +3,110 @@
 
 {% extends theme("layout.html") %}
 {% block content %}
-{% from theme('macros.html') import render_pagination, topic_pages %}
+{% from theme('_macros/pagination.html') import render_pagination, topic_pages %}
 
 <div class="forum-view">
-    <ol class="breadcrumb flaskbb-breadcrumb">
-        <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-        <li><a href="{{ forum.category.url }}">{{ forum.category.title }}</a></li>
-        <li class="active">{{ forum.title }}</li>
+    <ol class="breadcrumb flaskbb-breadcrumb bg-light">
+        <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+        <li class="breadcrumb-item"><a href="{{ forum.category.url }}">{{ forum.category.title }}</a></li>
+        <li class="breadcrumb-item active">{{ forum.title }}</li>
     </ol>
 
-    <div class="row controls-row">
-        <div class="pull-left">
+    <div class="row controls-row pt-0">
+        <div class="col me-auto g-0">
             {{ render_pagination(topics, forum.url) }}
         </div> <!-- end span pagination -->
 
         {% if current_user|post_topic(forum) %}
-        <div class="pull-right">
+        <div class="col-auto g-0">
             <form class="inline-form" method="post" action="{{ url_for('forum.markread', forum_id=forum.id, slug=forum.slug) }}">
                 <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                <button class="btn btn-default">
-                    <span class="fa fa-check fa-fw"></span> {% trans %}Mark as Read{% endtrans %}
+                <button class="btn btn-white">
+                    <span class="fas fa-check fa-fw"></span> {% trans %}Mark as Read{% endtrans %}
                 </button>
             </form>
 
             {% if forum.locked %}
             <span class="btn btn-primary">
-                <span class="fa fa-lock fa-fw"></span> {% trans %}Locked{% endtrans %}
+                <span class="fas fa-lock fa-fw"></span> {% trans %}Locked{% endtrans %}
             </span>
             {% else %}
             <a href="{{ url_for('forum.new_topic', forum_id=forum.id, slug=forum.slug) }}" class="btn btn-primary">
-                <span class="fa fa-pencil fa-fw"></span> {% trans %}New Topic{% endtrans %}
+                <span class="fas fa-plus fa-fw"></span> {% trans %}New Topic{% endtrans %}
             </a>
             {% endif %}
         </div>
         {% endif %}
     </div>
 
-    <div class="panel forum-panel">
-        <div class="panel-heading forum-head">
+    <div class="card forum">
+        <div class="card-header forum-header">
             <a href="{{ forum.url }}">{{ forum.title }}</a>
         </div>
 
-        <div class="panel-body forum-body">
-            <div class="forum-meta">
-                <div class="col-md-5 col-sm-5 col-xs-8 topic-name">{% trans %}Topic{% endtrans %}</div>
-                <div class="col-md-2 col-sm-2 hidden-xs topic-stats">{% trans %}Posts{% endtrans %}</div>
-                <div class="col-md-2 col-sm-2 hidden-xs topic-stats">{% trans %}Views{% endtrans %}</div>
-                <div class="col-md-3 col-sm-3 col-xs-4 topic-last-post">{% trans %}Last Post{% endtrans %}</div>
+        <div class="card-body forum-body">
+            <div class="row m-0 forum-meta">
+                <div class="col-8 col-sm-4 topic-name">{% trans %}Topic{% endtrans %}</div>
+                <div class="col-sm-2 d-none d-sm-block topic-stats">{% trans %}Posts{% endtrans %}</div>
+                <div class="col-sm-2 d-none d-sm-block topic-stats">{% trans %}Views{% endtrans %}</div>
+                <div class="col-4 col-sm-3 topic-last-post">{% trans %}Last Post{% endtrans %}</div>
             </div>
 
             {% for topic, last_post, topicread in topics.items %}
-            <div class="row forum-row hover clearfix">
-
-                <div class="col-md-5 col-sm-5 col-xs-8 topic-info">
-                    <div class="row">
-                        <div class="col-md-1 col-sm-2 col-xs-2 topic-status">
-                        {% if topic.locked %}
-                            <span class="fa fa-lock fa-fw topic-locked"></span>
-                        {% elif topic.hidden %}
-                            <span class="fa fa-user-secret"></span>
-                        {% elif topic.important %}
-                            {% if topic|topic_is_unread(topicread, current_user, forumsread) %}
-                                <span class="fa fa-star fa-fw topic-starred-unread"></span>
-                            {% else %}
-                                <span class="fa fa-star-o fa-fw topic-starred-read"></span>
-                            {% endif %}
+            <div class="row forum-row hover">
+
+                <div class="col-8 col-sm-4 topic-info">
+                    <div class="topic-status">
+                    {% if topic.locked %}
+                        <span class="fas fa-lock fa-fw topic-locked"></span>
+                    {% elif topic.hidden %}
+                        <span class="far fa-eye"></span>
+                    {% elif topic.important %}
+                        {% if topic|topic_is_unread(topicread, current_user, forumsread) %}
+                            <span class="far fa-star fa-fw topic-starred-unread"></span>
+                        {% else %}
+                            <span class="fas fa-star fa-fw topic-starred-read"></span>
+                        {% endif %}
+                    {% else %}
+                        {% if topic|topic_is_unread(topicread, current_user, forumsread) %}
+                            <span class="fas fa-comment fa-fw topic-unread"></span>
+                        {% else %}
+                            <span class="far fa-comment fa-fw topic-read"></span>
+                        {% endif %}
+                    {% endif %}
+                    </div>
+
+                    <div class="topic-name">
+                        <a href="{{ topic.first_unread(topicread, current_user, forumsread) }}">{{ topic.title }}</a>
+                        <!-- Topic Pagination -->
+                        <span class="topic-pages">{{ topic_pages(topic, flaskbb_config["POSTS_PER_PAGE"]) }}</span>
+                    </div>
+
+                    <div class="topic-author">
+                        {% trans %}by{% endtrans %}
+                        {% if topic.user_id %}
+                         <a href="{{ topic.user.url }}">{{ topic.user.username }}</a>
                         {% else %}
-                            {% if topic|topic_is_unread(topicread, current_user, forumsread) %}
-                                <span class="fa fa-comment fa-fw topic-unread"></span>
-                            {% else %}
-                                <span class="fa fa-comment-o fa-fw topic-read"></span>
-                            {% endif %}
+                        {{ topic.username }}
                         {% endif %}
-                        </div>
-                        <div class="col-md-11 col-sm-10 col-xs-10">
-                            <div class="topic-name">
-                                <a href="{{ topic.first_unread(topicread, current_user, forumsread) }}">{{ topic.title }}</a>
-                                <!-- Topic Pagination -->
-                                <span class="topic-pages">{{ topic_pages(topic, flaskbb_config["POSTS_PER_PAGE"]) }}</span>
-                            </div>
-
-                            <div class="topic-author">
-                                {% trans %}by{% endtrans %}
-                                {% if topic.user_id %}
-                                 <a href="{{ topic.user.url }}">{{ topic.user.username }}</a>
-                                {% else %}
-                                {{ topic.username }}
-                                {% endif %}
-                            </div>
-
-                            {% if topic.hidden %}
-                            <div class="topic-author">
-                                {{ gettext("Hidden on %(when)s  by %(who)s", who=topic.hidden_by.username, when=format_date(topic.hidden_at)) }}
-                            </div>
-                            {% endif %}
-                        </div>
                     </div>
+
+                    {% if topic.hidden %}
+                    <div class="topic-author">
+                        {{ gettext("Hidden on %(when)s  by %(who)s", who=topic.hidden_by.username, when=format_date(topic.hidden_at)) }}
+                    </div>
+                    {% endif %}
                 </div>
-                <div class="col-md-2 col-sm-2 hidden-xs topic-stats">
+
+                <div class="col-md-2 col-sm-2 d-none d-sm-block topic-stats">
                     {{ topic.post_count }}
                 </div>
 
-                <div class="col-md-2 col-sm-2 hidden-xs topic-stats">
+                <div class="col-md-2 col-sm-2 d-none d-sm-block topic-stats">
                     {{ topic.views }}
                 </div>
 
-                <div class="col-md-3 col-sm-3 col-xs-4 topic-last-post">
+                <div class="col-4 col-sm-3 topic-last-post">
                     <a href="{{ last_post.url }}">{{ last_post.date_created|time_since }}</a><br />
 
                     <div class="topic-author">
@@ -134,9 +132,11 @@
 
     {% if current_user|can_moderate(forum) %}
     <div class="row controls-row">
-        <a class="btn btn-default" href="{{ url_for('forum.manage_forum', forum_id=forum.id, slug=forum.slug) }}">
-            <span class="fa fa-tasks fa-fw"></span> {% trans %}Moderation Mode{% endtrans %}
+        <div class="col-auto ms-auto g-0">
+        <a class="btn btn-outline-dark" href="{{ url_for('forum.manage_forum', forum_id=forum.id, slug=forum.slug) }}">
+            <span class="fas fa-tasks fa-fw"></span> {% trans %}Moderation Mode{% endtrans %}
         </a>
+        </div>
     </div>
     {% endif %}
 </div>

flaskbb/templates/forum/index.html

@@ -6,12 +6,12 @@
         {% include theme("forum/category_layout.html") %}
     {% endfor %}
 
-    <div class="panel page-panel">
-        <div class="panel-heading page-head">
+    <div class="card page-panel mt-3">
+        <div class="card-header page-header">
             {% trans %}Board Statistics{% endtrans %}
             [<a href="{{ url_for('forum.who_is_online') }}" onclick="window.open(this.href, 'wio_window','width=500,height=500'); return false;">{% trans %}Who is online?{% endtrans %}</a>]
         </div>
-        <div class="panel-body page-body">
+        <div class="card-body page-body">
             <div class="row page-row">
                 <div class="col-md-6 col-sm-6 col-xs-12">
                     <p class="flaskbb-stats">{% trans %}Total number of registered users{% endtrans %}: <strong>{{ user_count }}</strong></p>

flaskbb/templates/forum/memberlist.html

@@ -2,63 +2,58 @@
 
 {% extends theme("layout.html") %}
 {% block content %}
-{% from theme('macros.html') import render_pagination, input_group_field %}
+{% from theme('_macros/pagination.html') import render_pagination %}
+{% from theme('_macros/form.html') import render_input_field %}
 
 {% set order_by = 'desc' if request.args.get('order_by') == 'asc' else 'asc' %}
 {% set sort_by = request.args.get('sort_by') %}
 
 <div class="page-view">
-    <ol class="breadcrumb flaskbb-breadcrumb">
-        <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-        <li class="active">{% trans %}Memberlist{% endtrans %}</li>
+    <ol class="breadcrumb flaskbb-breadcrumb bg-light">
+        <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+        <li class="breadcrumb-item active">{% trans %}Memberlist{% endtrans %}</li>
     </ol>
 
-    <div class="row controls-row">
-        <div class="col-md-8 col-sm-8 col-xs-8 controls-col">
-            <div class="pull-left">
-                {{ render_pagination(users, url_for('forum.memberlist'), sort_by=sort_by, asc=(order_by == 'desc')) }}
-            </div>
+    <div class="row controls-row pt-0">
+        <div class="col me-auto g-0">
+            {{ render_pagination(users, url_for('forum.memberlist'), sort_by=sort_by, asc=(order_by == 'desc')) }}
         </div>
-        <div class="col-md-4 col-sm-4 col-xs-4 controls-col">
-            <div class="pull-right">
-                <form class="inline-form" role="form" method="post">
-                    {{ search_form.hidden_tag() }}
-                    <div class="input-group">
-                        {{ input_group_field(search_form.search_query) }}
-                        <span class="input-group-btn">
-                            <button class="btn btn-primary" type="submit">{% trans %}Search{% endtrans %}</button>
-                        </span>
-                    </div>
-                </form>
-            </div>
+        <div class="col-auto g-0">
+            <form class="d-inline" role="form" method="post">
+                {{ search_form.hidden_tag() }}
+                <div class="input-group mb-3">
+                    {{ render_input_field(search_form.search_query) }}
+                    <button class="btn btn-primary" type="submit">{% trans %}Search{% endtrans %}</button>
+                </div>
+            </form>
         </div>
     </div>
 
-    <div class="panel page-panel">
-        <div class="panel-heading page-head">
+    <div class="card page">
+        <div class="card-header page-header">
             <a href="{{ url_for('forum.memberlist') }}">{% trans %}Memberlist{% endtrans %}</a>
         </div>
-        <div class="panel-body page-body">
-            <div class="page-meta">
-                <div class="col-md-1 col-sm-1 col-xs-1 meta-item">#</div>
-                <div class="col-md-3 col-sm-3 col-xs-5 meta-item">
+        <div class="card-body page-body">
+            <div class="row m-0 page-meta">
+                <div class="col-md-1 col-sm-1 col-1 ps-3 meta-item">#</div>
+                <div class="col-md-3 col-sm-3 col-5 meta-item">
                     <a href="{{ url_for('forum.memberlist') }}?sort_by=username&order_by={{ order_by }}">{% trans %}Username{% endtrans %}</a>
                 </div>
-                <div class="col-md-3 col-sm-3 hidden-xs meta-item">
+                <div class="col-md-3 col-sm-3 d-none d-sm-block meta-item">
                     <a href="{{ url_for('forum.memberlist') }}?sort_by=reg_date&order_by={{ order_by }}">{% trans %}Date registered{% endtrans %}</a>
                 </div>
-                <div class="col-md-3 col-sm-3 col-xs-5 meta-item">{% trans %}Group{% endtrans %}</div>
-                <div class="col-md-2 col-sm-2 hidden-xs meta-item">
+                <div class="col-md-3 col-sm-3 col-5 meta-item">{% trans %}Group{% endtrans %}</div>
+                <div class="col-md-2 col-sm-2 d-none d-sm-block meta-item">
                     <a href="{{ url_for('forum.memberlist') }}?sort_by=post_count&order_by={{ order_by }}">{% trans %}Posts{% endtrans %}</a>
                 </div>
             </div>
             {% for user in users.items %}
-            <div class="row page-row hover clearfix">
-                <div class="col-md-1 col-sm-1 col-xs-1">{{ user.id }}</div>
-                <div class="col-md-3 col-sm-3 col-xs-5"><a href="{{ user.url }}">{{ user.username }}</a></div>
-                <div class="col-md-3 col-sm-3 hidden-xs">{{ user.date_joined|format_datetime }}</div>
-                <div class="col-md-3 col-sm-3 col-xs-5">{{ user.primary_group.name }}</div>
-                <div class="col-md-2 col-sm-2 hidden-xs">{{ user.post_count }}</div>
+            <div class="row page-row hover">
+                <div class="col-md-1 col-sm-1 col-1 ps-3">{{ user.id }}</div>
+                <div class="col-md-3 col-sm-3 col-5"><a href="{{ user.url }}">{{ user.username }}</a></div>
+                <div class="col-md-3 col-sm-3 d-none d-sm-block">{{ user.date_joined|format_datetime }}</div>
+                <div class="col-md-3 col-sm-3 col-5">{{ user.primary_group.name }}</div>
+                <div class="col-md-2 col-sm-2 d-none d-sm-block">{{ user.post_count }}</div>
             </div>
             {% endfor %}
         </div>

flaskbb/templates/forum/new_post.html

@@ -10,45 +10,39 @@
 {% extends theme("layout.html") %}
 
 {% block content %}
-{% from theme("macros.html") import render_field, render_submit_field, render_quickreply, render_boolean_field %}
+{% from theme("_macros/form.html") import render_field, render_input_field, render_submit_field %}
 
 <div class="page-view">
-    <ol class="breadcrumb flaskbb-breadcrumb">
-        <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-        <li><a href="{{ topic.forum.url }}">{{ topic.forum.title }}</a></li>
-        <li><a href="{{ topic.url }}">{{ topic.title }}</a></li>
-        <li class="active">
+    <ol class="breadcrumb flaskbb-breadcrumb bg-light">
+        <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+        <li class="breadcrumb-item"><a href="{{ topic.forum.url }}">{{ topic.forum.title }}</a></li>
+        <li class="breadcrumb-item"><a href="{{ topic.url }}">{{ topic.title }}</a></li>
+        <li class="breadcrumb-item active">
             {{ title }}
         </li>
     </ol>
 
     <form class="form-horizontal" role="form" method="post">
         {{ form.hidden_tag() }}
-        <div class="panel page-panel">
-            <div class="panel-heading page-head">
+        <div class="card page">
+            <div class="card-header page-header">
                 {{ title }}
             </div>
 
-            <div class="panel-body page-body">
-                <div class="col-md-12 col-sm-12 col-xs-12">
+            <div class="card-body page-body">
 
-                    <div class="form-group">
-                        <div class="col-md-12 col-sm-12 col-xs-12">
-                            {{ run_hook("flaskbb_tpl_form_new_post_before", form=form) }}
+                <div class="row p-3">
+                    {{ run_hook("flaskbb_tpl_form_new_post_before", form=form) }}
 
-                            {{ form.content(class="flaskbb-editor", style="display: none") }}
+                    {{ render_input_field(form.content, class='flaskbb-editor', style="display: none", required="required") }}
+                    {{ render_field(form.track_topic) }}
 
-                            {{ render_boolean_field(form.track_topic) }}
+                    {{ run_hook("flaskbb_tpl_form_new_post_after", form=form) }}
 
-                            {{ run_hook("flaskbb_tpl_form_new_post_after", form=form) }}
-
-                            {{ render_submit_field(form.submit, input_class="btn btn-success pull-right") }}
-                        </div>
-                    </div>
+                    {{ render_field(form.submit) }}
                 </div>
             </div>
         </div>
-        {% include theme('editor_help.html') %}
     </form>
 </div>
 

flaskbb/templates/forum/new_topic.html

@@ -10,45 +10,41 @@
 {% extends theme("layout.html") %}
 
 {% block content %}
-{% from theme("macros.html") import render_field, render_submit_field, render_quickreply, render_boolean_field %}
+{% from theme("_macros/form.html") import render_field, render_input_field, render_submit_field %}
 
 <div class="page-view">
-    <ol class="breadcrumb flaskbb-breadcrumb">
-        <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-        <li><a href="{{ forum.url }}">{{ forum.title }}</a></li>
-        <li class="active">{{ title }}</li>
+    <ol class="breadcrumb flaskbb-breadcrumb bg-light">
+        <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+        <li class="breadcrumb-item"><a href="{{ forum.url }}">{{ forum.title }}</a></li>
+        <li class="breadcrumb-item active">
+            {{ title }}
+        </li>
     </ol>
 
 
     <form class="form-horizontal" role="form" method="post">
         {{ form.hidden_tag() }}
-        <div class="panel page-panel">
-            <div class="panel-heading page-head">
+        <div class="card page">
+            <div class="card-header page-header">
                 {{ title }}
             </div>
 
-            <div class="panel-body page-body">
-                <div class="col-md-12 col-sm-12 col-xs-12">
+            <div class="card-body page-body">
+                <div class="row p-3">
+                    {{ render_field(form.title) }}
 
-                    {{ render_field(form.title, div_class="col-md-12 col-sm-12 col-xs-12") }}
+                    {{ run_hook("flaskbb_tpl_form_new_topic_before", form=form) }}
 
-                    <div class="form-group">
-                        <div class="col-md-12 col-sm-12 col-xs-12">
-                            {{ run_hook("flaskbb_tpl_form_new_topic_before", form=form) }}
+                    {{ render_input_field(form.content, class='flaskbb-editor', style="display: none", required="required") }}
+                    {{ render_field(form.track_topic) }}
 
-                            {{ form.content(class="flaskbb-editor", style="display: none") }}
+                    {{ run_hook("flaskbb_tpl_form_new_topic_after", form=form) }}
 
-                            {{ render_boolean_field(form.track_topic) }}
-
-                            {{ run_hook("flaskbb_tpl_form_new_topic_after", form=form) }}
-
-                            {{ render_submit_field(form.submit, input_class="btn btn-success pull-right") }}
-                        </div>
-                    </div>
+                    {{ render_field(form.submit) }}
                 </div>
             </div>
         </div>
-        {% include theme('editor_help.html') %}
+
     </form>
 </div>
 {% endblock %}

flaskbb/templates/forum/online_users.html

@@ -20,3 +20,6 @@
 {% endfor %}
 
 {% endblock %}
+
+{% block footer %}
+{% endblock %}

flaskbb/templates/forum/report_post.html

@@ -11,7 +11,7 @@
 {% block content %}
 {% from theme("macros.html") import render_field %}
 
-<form class="form" role="form" method="post">
+<form role="form" method="post">
     {{ form.hidden_tag() }}
     <h3>{% trans %}Report Post{% endtrans %}</h3>
 

flaskbb/templates/forum/search_form.html

@@ -2,12 +2,12 @@
 
 {% extends theme("layout.html") %}
 {% block content %}
-{% from theme("macros.html") import horizontal_field %}
+{% from theme("_macros/form.html") import horizontal_field %}
 
 <div class="page-view">
-    <ol class="breadcrumb flaskbb-breadcrumb">
-        <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-        <li class="active">{% trans %}Search{% endtrans %}</li>
+    <ol class="breadcrumb flaskbb-breadcrumb bg-light">
+        <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+        <li class="breadcrumb-item active">{% trans %}Search{% endtrans %}</li>
     </ol>
 
     <div class="panel page-panel">

flaskbb/templates/forum/search_result.html

@@ -2,12 +2,12 @@
 
 {% extends theme("layout.html") %}
 {% block content %}
-{% from theme('macros.html') import render_pagination, group_field, topic_pages %}
+{% from theme("_macros/form.html") import render_pagination, group_field, topic_pages %}
 
 <div class="page-view">
-    <ol class="breadcrumb flaskbb-breadcrumb">
-        <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-        <li class="active">{% trans %}Search{% endtrans %}</li>
+    <ol class="breadcrumb flaskbb-breadcrumb bg-light">
+        <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+        <li class="breadcrumb-item active">{% trans %}Search{% endtrans %}</li>
     </ol>
 
     {% if result['post'] %}

flaskbb/templates/forum/topic.html

@@ -3,32 +3,34 @@
 {% set active_forum_nav=True %}
 
 {% block content %}
-{% from theme('macros.html') import render_pagination, form_field, generate_obj_id, generate_post_url %}
+{% from theme('_macros/pagination.html') import render_pagination, generate_obj_id, generate_post_url %}
+{% from theme('_macros/form.html') import render_input_field, render_submit_field %}
 
 <div class="topic-view">
-    <ol class="breadcrumb flaskbb-breadcrumb">
-        <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-        <li><a href="{{ topic.forum.category.url }}">{{ topic.forum.category.title }}</a></li>
-        <li><a href="{{ topic.forum.url }}">{{ topic.forum.title }}</a></li>
-        <li class="active">{{ topic.title }}</li>
+    <ol class="breadcrumb flaskbb-breadcrumb bg-light">
+        <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+        <li class="breadcrumb-item"><a href="{{ topic.forum.category.url }}">{{ topic.forum.category.title }}</a></li>
+        <li class="breadcrumb-item"><a href="{{ topic.forum.url }}">{{ topic.forum.title }}</a></li>
+        <li class="breadcrumb-item active">{{ topic.title }}</li>
     </ol>
 
     {% include theme('forum/topic_controls.html') %}
+
     {% if topic.hidden %}
     <div class="alert alert-warning">
-        <span class="fa fa-user-secret"></span>
+        <span class="fas fa-user-secret"></span>
         {{ gettext("This topic is hidden (%(when)s by %(who)s)", who=topic.hidden_by.username, when=format_date(topic.hidden_at)) }}
     </div>
     {% endif %}
 
 
-    <div class="panel topic-panel">
-        <div class="panel-heading topic-head">
+    <div class="card topic">
+        <div class="card-header topic-header">
             <a href="{{ topic.url }}">{{ topic.title }}</a>
         </div>
-        <div class="panel-body topic-body">
+        <div class="card-body topic-body">
             {% for post, user in posts.items %}
-            <div id="{{ post.id }}" class="row post-row clearfix">
+            <div id="{{ post.id }}" class="row post-row">
 
                 <div class="author col-md-2 col-sm-3 col-xs-12">
                     <!-- Registered User -->
@@ -37,9 +39,9 @@
 
                     <!-- check if user is online or not -->
                     {% if user|is_online %}
-                    <div class="author-online" data-toggle="tooltip" data-placement="top" title="{% trans %}online{% endtrans %}"></div>
+                    <div class="author-online" tabindex="0" data-bs-toggle="tooltip" title="{% trans %}online{% endtrans %}"></div>
                     {% else %}
-                    <div class="author-offline" data-toggle="tooltip" data-placement="top" title="{% trans %}offline{% endtrans %}"></div>
+                    <div class="author-offline" data-bs-toggle="tooltip" title="{% trans %}offline{% endtrans %}"></div>
                     {% endif %}
                     <div class="author-title"><h5>{{ user.primary_group.name }}</h5></div>
 
@@ -66,8 +68,8 @@
                         {% if current_user|can_ban_user and not user.permissions['banned'] %}
                         <form class="inline-form" method="post" action="{{ url_for('management.ban_user', user_id=user.id) }}">
                             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                            <button class="btn btn-xs btn-danger">
-                                <i class="fa fa-ban"></i> {% trans %}Ban{% endtrans %}
+                            <button class="btn btn-sm btn-danger">
+                                <span class="fas fa-ban"></span> {% trans %}Ban{% endtrans %}
                             </button>
                         </form>
                         {% endif %}
@@ -76,14 +78,16 @@
                         {% if current_user|can_ban_user and user.permissions['banned'] %}
                         <form class="inline-form" method="post" action="{{ url_for('management.unban_user', user_id=user.id) }}">
                             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                            <button class="btn btn-xs btn-warning">
-                                <i class="fa fa-ban"></i> {% trans %}Unban{% endtrans %}
+                            <button class="btn btn-sm btn-warning">
+                                <span class="fas fa-ban"></span> {% trans %}Unban{% endtrans %}
                             </button>
                         </form>
                         {% endif %}
 
                         {% if current_user|can_edit_user %}
-                        <a class="btn btn-xs btn-primary" href="{{ url_for('management.edit_user', user_id=user.id)}}"><i class="fa fa-pencil"></i> {% trans %}Edit{% endtrans %}</a>
+                        <a class="btn btn-primary btn-sm" href="{{ url_for('management.edit_user', user_id=user.id)}}" role="button">
+                            <span class="fas fa-edit"></span> {% trans %}Edit{% endtrans %}
+                        </a>
                         {% endif %}
                     </div>
                     {% endif %}
@@ -91,8 +95,8 @@
 
                 <div class="post-box col-md-10 col-sm-9 col-xs-12">
 
-                    <div class="post-meta clearfix">
-                        <div class="pull-left">
+                    <div class="post-meta row">
+                        <div class="col-auto me-auto g-0">
                             <!-- Creation date / Date modified -->
                             <a href="{{ post.url }}">
                                 {{ post.date_created|format_datetime }}
@@ -105,12 +109,12 @@
                         </div>
 
                         <!-- Post number -->
-                        <div class="pull-right">
+                        <div class="col-auto g-0">
                             <strong>#{{ generate_obj_id(posts, loop.index, flaskbb_config["POSTS_PER_PAGE"]) }}</strong>
                         </div>
                     </div>
 
-                        <div class="post-content clearfix" id="pid{{ post.id }}">
+                        <div class="post-content" id="pid{{ post.id }}">
                             {% if post.hidden %}
                             <div class="alert alert-warning">
                                 <span class="fa fa-user-secret"></span>
@@ -134,42 +138,42 @@
                         <!-- Signature End -->
                     </div>
 
-                        <div class="post-footer clearfix">
+                        <div class="post-footer">
 
                             <!-- Report/Edit/Delete/Quote Post-->
-                            <div class="post-menu pull-right">
+                            <div class="post-menu float-end">
                             {{ run_hook("flaskbb_tpl_post_menu_before", post=post) }}
 
                             {% if current_user|post_reply(topic) %}
                                 <!-- Quick quote -->
-                                <a href="#" class="btn btn-icon fas fa-reply text-blue quote-btn" data-post-id="{{ post.id }}" data-toggle="tooltip" data-placement="top" title="{% trans %}Quote this post{% endtrans %}"></a>
+                                <a href="#" class="btn btn-icon fas fa-reply text-blue quote-btn" data-post-id="{{ post.id }}" data-bs-toggle="tooltip" title="{% trans %}Quote this post{% endtrans %}"></a>
                                 <!-- Full quote/reply -->
-                                <a href="{{ url_for('forum.reply_post', topic_id=topic.id, post_id=post.id) }}" class="btn btn-icon fas fa-reply-all text-light-blue" data-toggle="tooltip" data-placement="top" title="{% trans %}Full Reply{% endtrans %}"></a>
+                                <a href="{{ url_for('forum.reply_post', topic_id=topic.id, post_id=post.id) }}" class="btn btn-icon fas fa-reply-all text-light-blue" data-bs-toggle="tooltip" title="{% trans %}Full Reply{% endtrans %}"></a>
                             {% endif %}
 
                             {% if current_user|edit_post(post) %}
                                 {% if topic.first_post_id == post.id %}
                                 <!-- Edit Topic -->
-                                <a href="{{ url_for('forum.edit_topic', topic_id=topic.id) }}" class="btn btn-icon far fa-edit text-green" data-toggle="tooltip" data-placement="top" title="{% trans %}Edit this topic{% endtrans %}"></a>
+                                <a href="{{ url_for('forum.edit_topic', topic_id=topic.id) }}" class="btn btn-icon far fa-edit text-green" data-bs-toggle="tooltip" title="{% trans %}Edit this topic{% endtrans %}"></a>
                                 {% else %}
                                 <!-- Edit Post -->
-                                <a href="{{ url_for('forum.edit_post', post_id=post.id) }}" class="btn btn-icon far fa-edit text-green" data-toggle="tooltip" data-placement="top" title="{% trans %}Edit this post{% endtrans %}"></a>
+                                <a href="{{ url_for('forum.edit_post', post_id=post.id) }}" class="btn btn-icon far fa-edit text-green" data-bs-toggle="tooltip" title="{% trans %}Edit this post{% endtrans %}"></a>
                                 {% endif %}
                             {% endif %}
 
+                            <!-- Delete Post/Topic -->
                             {% if topic.first_post_id == post.id %}
                                 {% if current_user|delete_topic(topic) %}
                                 <form class="inline-form" method="post" action="{{ url_for('forum.delete_topic', topic_id=topic.id, slug=topic.slug) }}">
                                     <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                                    <button class="btn btn-icon far fa-trash-alt text-red" name="confirmDialog" data-toggle="tooltip" data-placement="top" title="{% trans %}Delete this topic{% endtrans %}"></button>
+                                    <button class="btn btn-icon far fa-trash-alt text-red" name="confirmDialog" data-bs-toggle="tooltip" title="{% trans %}Delete this topic{% endtrans %}"></button>
                                 </form>
                                 {% endif %}
                             {% else %}
                                 {% if current_user|delete_post(post) %}
-                            <!-- Delete Post -->
                                 <form class="inline-form" method="post" action="{{ url_for('forum.delete_post', post_id=post.id) }}">
                                     <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                                    <button  class="btn btn-icon far fa-trash-alt text-red" name="confirmDialog" data-toggle="tooltip" data-placement="top" title="{% trans %}Delete this post{% endtrans %}"></button>
+                                    <button  class="btn btn-icon far fa-trash-alt text-red" name="confirmDialog" data-bs-toggle="tooltip" title="{% trans %}Delete this post{% endtrans %}"></button>
                                 </form>
                                 {% endif %}
 
@@ -177,32 +181,33 @@
 
                             {% if current_user.is_authenticated %}
                             <!-- Report post -->
-                                <a href="{{ url_for('forum.report_post', post_id=post.id) }}" onclick="window.open(this.href, 'wio_window','width=500,height=500'); return false;" class="btn btn-icon far fa-flag text-orange" data-toggle="tooltip" data-placement="top" title="{% trans %}Report this post{% endtrans %}"></a>
+                                <a href="{{ url_for('forum.report_post', post_id=post.id) }}" onclick="window.open(this.href, 'wio_window','width=500,height=500'); return false;" class="btn btn-icon far fa-flag text-orange" data-bs-toggle="tooltip" title="{% trans %}Report this post{% endtrans %}"></a>
                             {% endif %}
 
+                            <!-- Hide Post -->
                             {% if current_user.permissions.get('makehidden') %}
                                 {% if topic.first_post_id == post.id %}
                                     {% if topic.hidden %}
                                     <form class="inline-form" method="post" action="{{ url_for('forum.unhide_topic', topic_id=topic.id) }}">
                                         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                                        <button class="btn btn-icon far fa-eye" name="unhide" data-toggle="tooltip" data-placement="top" title="{% trans %}Unhide this topic{% endtrans %}"></button>
+                                        <button class="btn btn-icon far fa-eye" type="button" data-bs-toggle="modal" data-bs-target="#confirmModal" name="unhide" title="{% trans %}Unhide this topic{% endtrans %}"></button>
                                     </form>
                                     {% else %}
                                     <form class="inline-form" method="post" action="{{ url_for('forum.hide_topic', topic_id=topic.id) }}">
                                         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                                        <button class="btn btn-icon far fa-eye-slash" name="hide" data-toggle="tooltip" data-placement="top" title="{% trans %}Hide this topic{% endtrans %}"></button>
+                                        <button class="btn btn-icon far fa-eye-slash" type="button" data-bs-toggle="modal" data-bs-target="#confirmModal" name="hide" title="{% trans %}Hide this topic{% endtrans %}"></button>
                                     </form>
                                     {% endif %}
                                 {% else %}
                                     {% if post.hidden %}
                                     <form class="inline-form" method="post" action="{{ url_for('forum.unhide_post', post_id=post.id) }}">
                                         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                                        <button class="btn btn-icon far fa-eye" name="unhide" data-toggle="tooltip" data-placement="top" title="{% trans %}Unhide this post{% endtrans %}"></button>
+                                        <button class="btn btn-icon far fa-eye" type="button" data-bs-toggle="modal" data-bs-target="#confirmModal" name="unhide" title="{% trans %}Unhide this post{% endtrans %}"></button>
                                     </form>
                                     {% else %}
                                     <form class="inline-form" method="post" action="{{ url_for('forum.hide_post', post_id=post.id) }}">
                                         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                                        <button class="btn btn-icon far fa-eye-slash" name="hide" data-toggle="tooltip" data-placement="top" title="{% trans %}Hide this post{% endtrans %}"></button>
+                                        <button class="btn btn-icon far fa-eye-slash" type="button" data-bs-toggle="modal" data-bs-target="#confirmModal" name="hide" title="{% trans %}Hide this post{% endtrans %}"></button>
                                     </form>
                                     {% endif %}
                                 {% endif %}
@@ -219,21 +224,21 @@
         </div> <!-- end topic-body -->
     </div> <!-- end topic-panel -->
 
-    {% include theme('forum/topic_controls.html') %}
-    {% from theme("macros.html") import render_field, render_submit_field %}
+    <div class="pt-2">
+        {% include theme('forum/topic_controls.html') %}
+    </div>
+
     {% if form %}
-    <form class="form" action="#" method="post">
+    <form class="form" method="post">
         {{ form.hidden_tag() }}
         <div class="row">
-            <div class="col-md-offset-2 col-sm-offset-3 col-md-10 col-sm-9 col-xs-12">
-                {{ form.content(class='flaskbb-editor', style="display:none") }}
-                {{ render_submit_field(form.submit, input_class="btn btn-success pull-right") }}
+            <div class="offset-md-2 offset-sm-3 col-md-10 col-sm-9 col-xs-12">
+                {{ render_input_field(form.content, class='flaskbb-editor', style="display: none", required="required") }}
+                {{ render_submit_field(form.submit, div_class="mt-2 float-end") }}
             </div>
         </div>
     </form>
-    {% include theme('editor_help.html') %}
     {% endif %}
 
 </div>
-{% include theme('confirm_dialog.html') %}
 {% endblock %}

flaskbb/templates/forum/topic_controls.html

@@ -1,123 +1,119 @@
-<div class="row controls-row">
-    <div class ="col-md-6 col-sm-6 col-xs-12 controls-col">
-        <div class="pull-left">
-            {{ render_pagination(posts, topic.url) }}
-        </div>
+<div class="row controls-row pt-0">
+    <div class="col me-auto g-0">
+        {{ render_pagination(posts, topic.url) }}
     </div> <!-- end span pagination -->
 
 {% if current_user.is_authenticated %}
-    <div class="col-md-6 col-sm-6 col-xs-12 controls-col">
-        <div class="pull-right">
-            {% if current_user|can_moderate(topic.forum) or current_user|delete_topic(topic)%}
-            <!-- Moderation buttons -->
-            <div class="btn-group">
-                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    <span class="fa fa-bars fa-fw" aria-hidden="true"></span> {% trans %}Moderate{% endtrans %} <span class="caret"></span>
-                </button>
-                <ul class="dropdown-menu">
+    <div class="col-auto g-0">
+        {% if current_user|can_moderate(topic.forum) or current_user|delete_topic(topic)%}
+        <!-- Moderation buttons -->
+        <div class="btn-group">
+            <button class="btn btn-outline-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                <span class="fas fa-bars fa-fw" aria-hidden="true"></span> {% trans %}Moderate{% endtrans %}
+            </button>
+            <ul class="dropdown-menu">
+
+            {% if current_user|delete_topic(topic) %}
+            <li>
+                <form class="inline-form" method="post" action="{{ url_for('forum.delete_topic', topic_id=topic.id, slug=topic.slug) }}">
+                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+                    <button class="btn btn-link">
+                        <span class="fas fa-trash fa-fw"></span> {% trans %}Delete Topic{% endtrans %}
+                    </button>
+                </form>
+            </li>
+            {% endif %}
 
-                {% if current_user|delete_topic(topic) %}
+            {% if current_user|can_moderate(topic.forum) %}
+                {% if not topic.locked %}
+                <li>
+                    <form class="d-inline" method="post" action="{{ url_for('forum.lock_topic', topic_id=topic.id, slug=topic.slug) }}">
+                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+                        <button class="btn btn-link">
+                            <span class="fas fa-lock fa-fw"></span> {% trans %}Lock Topic{% endtrans %}
+                        </button>
+                    </form>
+                </li>
+                {% else %}
                 <li>
-                    <form class="inline-form" method="post" action="{{ url_for('forum.delete_topic', topic_id=topic.id, slug=topic.slug) }}">
+                    <form class="d-inline" method="post" action="{{ url_for('forum.unlock_topic', topic_id=topic.id, slug=topic.slug) }}">
                         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                         <button class="btn btn-link">
-                            <span class="fa fa-trash-o fa-fw"></span> {% trans %}Delete Topic{% endtrans %}
+                            <span class="fas fa-unlock fa-fw"></span> {% trans %}Unlock Topic{% endtrans %}
                         </button>
                     </form>
                 </li>
                 {% endif %}
 
-                {% if current_user|can_moderate(topic.forum) %}
-                    {% if not topic.locked %}
-                    <li>
-                        <form class="inline-form" method="post" action="{{ url_for('forum.lock_topic', topic_id=topic.id, slug=topic.slug) }}">
-                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                            <button class="btn btn-link">
-                                <span class="fa fa-lock fa-fw"></span> {% trans %}Lock Topic{% endtrans %}
-                            </button>
-                        </form>
-                    </li>
-                    {% else %}
-                    <li>
-                        <form class="inline-form" method="post" action="{{ url_for('forum.unlock_topic', topic_id=topic.id, slug=topic.slug) }}">
-                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                            <button class="btn btn-link">
-                                <span class="fa fa-unlock fa-fw"></span> {% trans %}Unlock Topic{% endtrans %}
-                            </button>
-                        </form>
-                    </li>
-                    {% endif %}
-
-                    {% if not topic.important %}
-                    <li>
-                        <form class="inline-form" method="post" action="{{ url_for('forum.highlight_topic', topic_id=topic.id, slug=topic.slug) }}">
-                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                            <button class="btn btn-link">
-                                <span class="fa fa-star fa-fw"></span> {% trans %}Highlight Topic{% endtrans %}
-                            </button>
-                        </form>
-                    </li>
-                    {% else %}
-                    <li>
-                        <form class="inline-form" method="post" action="{{ url_for('forum.trivialize_topic', topic_id=topic.id, slug=topic.slug) }}">
-                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                            <button class="btn btn-link">
-                                <span class="fa fa-star-o fa-fw"></span> {% trans %}Trivialize Topic{% endtrans %}
-                            </button>
-                        </form>
-                    </li>
-                    {% endif %}
-                {% endif %}
-                {% if current_user | can_moderate(topic.forum) and current_user.permissions.get('makehidden', False) %}
+                {% if not topic.important %}
                 <li>
-                    {% if topic.hidden %}
-                    <form class="inline-form" method="post" action="{{ url_for('forum.unhide_topic', topic_id=topic.id, slug=topic.slug) }}">
+                    <form class="d-inline" method="post" action="{{ url_for('forum.highlight_topic', topic_id=topic.id, slug=topic.slug) }}">
                         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                         <button class="btn btn-link">
-                            <span class="fa fa-user fa-fw"></span> {% trans %}Unhide Topic{% endtrans %}
+                            <span class="fas fa-star fa-fw"></span> {% trans %}Highlight Topic{% endtrans %}
                         </button>
                     </form>
-                    {% else %}
-                    <form class="inline-form" method="post" action="{{ url_for('forum.hide_topic', topic_id=topic.id, slug=topic.slug) }}">
+                </li>
+                {% else %}
+                <li>
+                    <form class="d-inline" method="post" action="{{ url_for('forum.trivialize_topic', topic_id=topic.id, slug=topic.slug) }}">
                         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                         <button class="btn btn-link">
-                            <span class="fa fa-user-secret fa-fw"></span> {% trans %}Hide Topic{% endtrans %}
+                            <span class="far fa-star fa-fw"></span> {% trans %}Trivialize Topic{% endtrans %}
                         </button>
                     </form>
-                    {% endif %}
                 </li>
                 {% endif %}
-                </ul>
-            </div>
-            <!-- end Moderation buttons -->
             {% endif %}
-
-            {% if current_user.is_tracking_topic(topic) %}
-            <form class="inline-form" method="post" action="{{ url_for('forum.untrack_topic', topic_id=topic.id, slug=topic.slug) }}">
-                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                <button class="btn btn-default">
-                    <span class="fa fa-tag fa-fw" aria-hidden="true"></span> {% trans %}Untrack Topic{% endtrans %}
-                </button>
-            </form>
-            {% else %}
-            <form class="inline-form" method="post" action="{{ url_for('forum.track_topic', topic_id=topic.id, slug=topic.slug) }}">
-                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                <button class="btn btn-default">
-                    <span class="fa fa-tag fa-fw" aria-hidden="true"></span> {% trans %}Track Topic{% endtrans %}
-                </button>
-            </form>
+            {% if current_user | can_moderate(topic.forum) and current_user.permissions.get('makehidden', False) %}
+            <li>
+                {% if topic.hidden %}
+                <form class="d-inline" method="post" action="{{ url_for('forum.unhide_topic', topic_id=topic.id, slug=topic.slug) }}">
+                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+                    <button class="btn btn-link">
+                        <span class="fas fa-user fa-fw"></span> {% trans %}Unhide Topic{% endtrans %}
+                    </button>
+                </form>
+                {% else %}
+                <form class="d-inline" method="post" action="{{ url_for('forum.hide_topic', topic_id=topic.id, slug=topic.slug) }}">
+                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+                    <button class="btn btn-link">
+                        <span class="fas fa-user-secret fa-fw"></span> {% trans %}Hide Topic{% endtrans %}
+                    </button>
+                </form>
+                {% endif %}
+            </li>
             {% endif %}
+            </ul>
+        </div>
+        <!-- end Moderation buttons -->
+        {% endif %}
 
-            {% if current_user|post_reply(topic) %}
-            <a href="{{ url_for('forum.new_post', topic_id=topic.id, slug=topic.slug) }}" class="btn btn-primary">
-                <span class="fa fa-pencil fa-fw"></span> {% trans %}Reply{% endtrans %}
-            </a>
-            {% else %}
-            <div class="btn btn-primary"><span class="fa fa-lock fa-fw"></span> {% trans %}Locked{% endtrans %}</div>
-            {% endif %}
+        {% if current_user.is_tracking_topic(topic) %}
+        <form class="d-inline" method="post" action="{{ url_for('forum.untrack_topic', topic_id=topic.id, slug=topic.slug) }}">
+            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+            <button class="btn btn-outline-dark">
+                <span class="fas fa-tag fa-fw" aria-hidden="true"></span> {% trans %}Untrack Topic{% endtrans %}
+            </button>
+        </form>
+        {% else %}
+        <form class="d-inline" method="post" action="{{ url_for('forum.track_topic', topic_id=topic.id, slug=topic.slug) }}">
+            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+            <button class="btn btn-outline-dark">
+                <span class="fas fa-tag fa-fw" aria-hidden="true"></span> {% trans %}Track Topic{% endtrans %}
+            </button>
+        </form>
+        {% endif %}
 
-            {{ run_hook("flaskbb_tpl_topic_controls", topic=topic) }}
-        </div>
+        {% if current_user|post_reply(topic) %}
+        <a href="{{ url_for('forum.new_post', topic_id=topic.id, slug=topic.slug) }}" class="btn btn-primary">
+            <span class="fas fa-reply fa-fw"></span> {% trans %}Reply{% endtrans %}
+        </a>
+        {% else %}
+        <div class="btn btn-primary"><span class="fa fa-lock fa-fw"></span> {% trans %}Locked{% endtrans %}</div>
+        {% endif %}
+
+        {{ run_hook("flaskbb_tpl_topic_controls", topic=topic) }}
     </div>
 {% endif %} {# end current_user.is_authenticated #}
 </div>

flaskbb/templates/forum/topic_horizontal.html

@@ -6,11 +6,11 @@
 {% from theme('macros.html') import render_pagination, form_field, generate_obj_id, generate_post_url %}
 
 <div class="topic-view">
-    <ol class="breadcrumb flaskbb-breadcrumb">
-        <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-        <li><a href="{{ topic.forum.category.url }}">{{ topic.forum.category.title }}</a></li>
-        <li><a href="{{ topic.forum.url }}">{{ topic.forum.title }}</a></li>
-        <li class="active">{{ topic.title }}</li>
+    <ol class="breadcrumb flaskbb-breadcrumb bg-light">
+        <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+        <li class="breadcrumb-item"><a href="{{ topic.forum.category.url }}">{{ topic.forum.category.title }}</a></li>
+        <li class="breadcrumb-item"><a href="{{ topic.forum.url }}">{{ topic.forum.title }}</a></li>
+        <li class="breadcrumb-item active">{{ topic.title }}</li>
     </ol>
 
     {% include theme('forum/topic_controls.html') %}

flaskbb/templates/forum/topictracker.html

@@ -3,88 +3,87 @@
 
 {% extends theme("layout.html") %}
 {% block content %}
-{% from theme('macros.html') import render_pagination, topic_pages %}
+{% from theme('_macros/pagination.html') import render_pagination, topic_pages %}
 
-<form class="form" role="form" method="POST">
+<form role="form" method="POST">
     <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="{{ csrf_token() }}"></div>
 
     <div class="forum-view">
 
-        <ol class="breadcrumb flaskbb-breadcrumb">
-            <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-            <li class="active">{% trans %}Topic Tracker{% endtrans %}</li>
+        <ol class="breadcrumb flaskbb-breadcrumb bg-light">
+            <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+            <li class="breadcrumb-item active">{% trans %}Topic Tracker{% endtrans %}</li>
         </ol>
 
-        <div class="row controls-row">
-            <div class="pull-left">
+        <div class="row controls-row pt-0">
+            <div class="col me-auto g-0">
                 {{ render_pagination(topics, url_for('forum.topictracker')) }}
-            </div> <!-- end span pagination -->
+            </div>
         </div>
 
-        <div class="panel forum-panel">
-            <div class="panel-heading forum-head">
+        <div class="card forum">
+            <div class="card-header forum-header">
                 <a href="{{ url_for('forum.topictracker') }}">{% trans %}Topic Tracker{% endtrans %}</a>
             </div>
 
-            <div class="panel-body forum-body">
-                <div class="forum-meta">
-                    <div class="col-md-4 col-sm-4 col-xs-6 topic-name">{% trans %}Topic{% endtrans %}</div>
-                    <div class="col-md-2 col-sm-2 hidden-xs topic-stats">{% trans %}Posts{% endtrans %}</div>
-                    <div class="col-md-2 col-sm-2 hidden-xs topic-stats">{% trans %}Views{% endtrans %}</div>
-                    <div class="col-md-3 col-sm-3 col-xs-4 topic-last-post">{% trans %}Last Post{% endtrans %}</div>
-                    <div class="col-md-1 col-sm-1 col-xs-2 topic-select-all"><input type="checkbox" name="rowtoggle" class="action-checkall" title="{% trans %}Select all{% endtrans %}"/></div>
+            <div class="card-body forum-body">
+                <div class="row m-0 forum-meta">
+                    <div class="col-7 col-sm-4 topic-name">{% trans %}Topic{% endtrans %}</div>
+                    <div class="col-sm-2 d-none d-sm-block topic-stats">{% trans %}Posts{% endtrans %}</div>
+                    <div class="col-sm-2 d-none d-sm-block topic-stats">{% trans %}Views{% endtrans %}</div>
+                    <div class="col-4 col-sm-3 topic-last-post">{% trans %}Last Post{% endtrans %}</div>
+                    <div class="col-1 topic-select-all"><input type="checkbox" name="rowtoggle" class="action-checkall" title="{% trans %}Select all{% endtrans %}"/></div>
                 </div>
 
                 {% for topic, last_post, topicread, forumsread in topics.items %}
-                <div class="row forum-row hover clearfix">
-
-                    <div class="col-md-4 col-sm-4 col-xs-6 topic-info">
-                        <div class="row">
-                            <div class="col-md-1 col-sm-2 col-xs-2 topic-status">
-                            {% if topic.locked %}
-                                <span class="fa fa-lock topic-locked"></span>
-                            {% elif topic.important %}
-                                {% if topic|topic_is_unread(topicread, current_user, forumsread) %}
-                                    <span class="fa fa-star topic-starred-unread"></span>
-                                {% else %}
-                                    <span class="fa fa-star-o topic-starred-read"></span>
-                                {% endif %}
+                <div class="row forum-row hover">
+                    <div class="col-7 col-sm-4 topic-info">
+                        <div class="col-auto topic-status">
+                        {% if topic.locked %}
+                            <span class="fas fa-lock fa-fw topic-locked"></span>
+                        {% elif topic.hidden %}
+                            <span class="far fa-eye"></span>
+                        {% elif topic.important %}
+                            {% if topic|topic_is_unread(topicread, current_user, forumsread) %}
+                                <span class="far fa-star fa-fw topic-starred-unread"></span>
+                            {% else %}
+                                <span class="fas fa-star fa-fw topic-starred-read"></span>
+                            {% endif %}
+                        {% else %}
+                            {% if topic|topic_is_unread(topicread, current_user, forumsread) %}
+                                <span class="fas fa-comment fa-fw topic-unread"></span>
+                            {% else %}
+                                <span class="far fa-comment fa-fw topic-read"></span>
+                            {% endif %}
+                        {% endif %}
+                        </div>
+
+                        <div class="topic-name">
+                            <a href="{{ topic.url }}">{{ topic.title }}</a>
+                            <!-- Topic Pagination -->
+                            <span class="topic-pages">{{ topic_pages(topic, flaskbb_config["POSTS_PER_PAGE"]) }}</span>
+                        </div>
+
+                        <div class="topic-author">
+                            {% trans %}by{% endtrans %}
+                            {% if topic.user_id %}
+                             <a href="{{ topic.user.url }}">{{ topic.user.username }}</a>
                             {% else %}
-                                {% if topic|topic_is_unread(topicread, current_user, forumsread) %}
-                                    <span class="fa fa-comment topic-unread"></span>
-                                {% else %}
-                                    <span class="fa fa-comment-o topic-read"></span>
-                                {% endif %}
+                            {{ topic.username }}
                             {% endif %}
-                            </div>
-                            <div class="col-md-11 col-sm-10 col-xs-10">
-                                <div class="topic-name">
-                                    <a href="{{ topic.url }}">{{ topic.title }}</a>
-                                    <!-- Topic Pagination -->
-                                    <span class="topic-pages">{{ topic_pages(topic, flaskbb_config["POSTS_PER_PAGE"]) }}</span>
-                                </div>
-
-                                <div class="topic-author">
-                                    {% trans %}by{% endtrans %}
-                                    {% if topic.user_id %}
-                                     <a href="{{ topic.user.url }}">{{ topic.user.username }}</a>
-                                    {% else %}
-                                    {{ topic.username }}
-                                    {% endif %}
-                                </div>
-                            </div>
                         </div>
+
                     </div>
 
-                    <div class="col-md-2 col-sm-2 hidden-xs topic-stats">
+                    <div class="col-sm-2 d-none d-sm-block topic-stats">
                         {{ topic.post_count }}
                     </div>
 
-                    <div class="col-md-2 col-sm-2 hidden-xs topic-stats">
+                    <div class="col-sm-2 d-none d-sm-block topic-stats">
                         {{ topic.views }}
                     </div>
 
-                    <div class="col-md-3 col-sm-3 col-xs-4 topic-last-post">
+                    <div class="col-4 col-sm-3 topic-last-post">
                         <a href="{{ last_post.url }}">{{ last_post.date_created|time_since }}</a><br />
 
                         <div class="topic-author">
@@ -97,26 +96,24 @@
                         </div>
                     </div>
 
-                    <div class="col-md-1 col-sm-1 col-xs-2 topic-select">
+                    <div class="col-1 topic-select">
                         <input type="checkbox" name="rowid" class="action-checkbox" value="{{ topic.id }}" title="{% trans %}Select topic{% endtrans %}"/>
                     </div>
-                </div>  <!-- end forum-row -->
+                </div>
                 {% else %}
-                <div class="row forum-row clearfix">
-                    <div class="col-md-12 col-sm-12 co-xs-12">
+                <div class="row forum-row">
+                    <div class="col-12">
                         {% trans %}No Topics.{% endtrans %}
                     </div>
                 </div> <!-- end forum-row -->
                 {% endfor %}
             </div>
         </div>
-        <div class="row controls-row">
-            <div class="col-md-12 col-sm-12 col-xs-12 controls-col">
-                <div class="pull-right">
-                    <button name="untrack" class="btn btn-info">
-                        <span class="fa fa-tag"></span> {% trans %}Untrack Topics{% endtrans %}
-                    </button>
-                </div>
+        <div class="row pt-2">
+            <div class="col-auto ms-auto">
+                <button name="untrack" class="btn btn-primary">
+                    <span class="fas fa-tag"></span> {% trans %}Untrack Topics{% endtrans %}
+                </button>
             </div>
         </div> <!-- end controls-row -->
     </div>

flaskbb/templates/layout.html

@@ -1,187 +1,222 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="FlaskBB is a forum software written in Flask">
-        <meta name="author" content="FlaskBB Team">
-        <meta name="csrf-token" content="{{ csrf_token() }}">
-        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
-
-        <title>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="FlaskBB is a forum software written in Flask">
+    <meta name="author" content="FlaskBB Team">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
+
+    <title>
         {% block title %}
-            {%- if not page_title -%}
-                {{ flaskbb_config["PROJECT_TITLE"] }} - {{ flaskbb_config["PROJECT_SUBTITLE"] }}
-            {%- else -%}
-                {{ page_title }} - {{ flaskbb_config["PROJECT_TITLE"] }}
-            {%- endif -%}
-        {% endblock %}
-        </title>
-
-        {% block stylesheets %}
-        <!-- style -->
-        <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}">
-        <!-- lato font -->
-        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
-        <!-- emoji -->
-        <script src="https://twemoji.maxcdn.com/2/twemoji.min.js?2.5"></script>
+        {%- if not page_title -%}
+        {{ flaskbb_config["PROJECT_TITLE"] }} - {{ flaskbb_config["PROJECT_SUBTITLE"] }}
+        {%- else -%}
+        {{ page_title }} - {{ flaskbb_config["PROJECT_TITLE"] }}
+        {%- endif -%}
         {% endblock %}
+    </title>
 
-        {# for extra stylesheets. e.q. a template has to add something #}
-        {% block css %}
-        {% endblock %}
+    {% block stylesheets %}
+    <!-- style -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}">
 
-        {# for various extra things #}
-        {% block head_extra %}
-        {% endblock %}
-    </head>
+    <!-- emoji -->
+    <script src="https://twemoji.maxcdn.com/2/twemoji.min.js?2.5"></script>
+    {% endblock %}
 
-    <body>
+    {# for extra stylesheets. e.q. a template has to add something #}
+    {% block css %}
+    {% endblock %}
 
-        <!-- main forum layout -->
-        <div class="flaskbb-layout">
-            <div class="container">
+    {# for various extra things #}
+    {% block head_extra %}
+    {% endblock %}
+</head>
 
-                <!-- forum header - place for the project title and subtitle -->
-                {% block header %}
-                <div class="flaskbb-header">
-                    <div class="flaskbb-meta">
-                        <div class="flaskbb-title">{{ flaskbb_config["PROJECT_TITLE"] }}</div>
-                        <div class="flaskbb-subtitle">{{ flaskbb_config["PROJECT_SUBTITLE"] }}</div>
-                    </div>
+<body>
+
+    <!-- main forum layout -->
+    <div class="flaskbb-layout">
+        <div class="container">
+
+            <!-- forum header - place for the project title and subtitle -->
+            {% block header %}
+            <div class="flaskbb-header">
+                <div class="flaskbb-meta">
+                    <div class="flaskbb-title">{{ flaskbb_config["PROJECT_TITLE"] }}</div>
+                    <div class="flaskbb-subtitle">{{ flaskbb_config["PROJECT_SUBTITLE"] }}</div>
                 </div>
-                {% endblock %}
-
-                <!-- forum menu - contains all the navigation items -->
-                {% block navigation %}
-                <div class="navbar navbar-default" role="navigation">
-                    <!-- Brand and toggle get grouped for better mobile display -->
-                    <div class="navbar-header">
-                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
-                        <span class="sr-only">Toggle navigation</span>
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
-                      </button>
-                    </div>
+            </div>
+            {% endblock %}
 
-                    <div class="collapse navbar-collapse" id="navbar-collapse">
-                        <!-- navbar left -->
-                        <ul class="nav navbar-nav forum-nav">
-                            {%- from theme("macros.html") import is_active, topnav with context -%}
+            <!-- forum menu - contains all the navigation items -->
+            {% block navigation %}
+
+            <nav class="navbar navbar-expand-lg navbar-light bg-light flaskbb-navbar">
+                <div class="container-fluid">
+                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+                        <span class="navbar-toggler-icon"></span>
+                    </button>
+                    <div class="collapse navbar-collapse" id="navbarNavDropdown">
+                        <ul class="navbar-nav me-auto">
+                            {%- from theme("_macros/navigation.html") import is_active, topnav with context -%}
 
                             {{ run_hook("flaskbb_tpl_navigation_before") }}
-                            {{ topnav(endpoint='forum.index', name=_('Forum'), icon='fa fa-comment', active=active_forum_nav) }}
-                            {{ topnav(endpoint='forum.memberlist', name=_('Memberlist'), icon='fa fa-user') }}
-                            {{ topnav(endpoint='forum.search', name=_('Search'), icon='fa fa-search') }}
+                            {{ topnav(endpoint='forum.index', name=_('Forum'), icon='far fa-comment', active=active_forum_nav) }}
+                            {{ topnav(endpoint='forum.memberlist', name=_('Memberlist'), icon='far fa-user') }}
+                            {{ topnav(endpoint='forum.search', name=_('Search'), icon='fas fa-search') }}
                             {{ run_hook("flaskbb_tpl_navigation_after") }}
                         </ul>
 
-                        <!-- navbar right -->
-                        <ul class="nav navbar-nav navbar-right">
-                            {% if current_user and current_user.is_authenticated %}
-
+                        <ul class="navbar-nav">
                             {{ run_hook("flaskbb_tpl_user_nav_loggedin_before") }}
 
+                            {% if current_user and current_user.is_authenticated %}
                             <!-- User Menu -->
-                            <li>
-                                <div class="btn-group navbar-btn user-btn">
+                            <li class="nav-item">
+                                <div class="btn-group">
                                     <a class="btn btn-primary" href="{{ url_for('user.profile', username=current_user.username) }}">
-                                        <span class="fa fa-user fa-fw"></span> {{ current_user.username }}
+                                        <span class="far fa-user fa-fw"></span> {{ current_user.username }}
                                     </a>
-                                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
-                                    <ul class="dropdown-menu" role="menu">
-                                        <li><a href="{{ url_for('forum.topictracker') }}"><span class="fa fa-book fa-fw"></span> {% trans %}Topic Tracker{% endtrans %}</a></li>
-                                        <li class="divider"></li>
+                                    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+                                        <span class="visually-hidden">Toggle Dropdown</span>
+                                    </button>
+                                    <ul class="dropdown-menu">
+                                        <li>
+                                            <a class="dropdown-item" href="{{ url_for('forum.topictracker') }}">
+                                                <span class="fa fa-book fa-fw"></span> {% trans %}Topic Tracker{% endtrans %}
+                                            </a>
+                                        </li>
+
+                                        <li>
+                                            <hr class="dropdown-divider">
+                                        </li>
+
+                                        <li>
+                                            <a class="dropdown-item" href="{{ url_for('user.settings') }}"><span
+                                                    class="fa fa-cog fa-fw"></span> {% trans %}Settings{% endtrans %}
+                                            </a>
+                                        </li>
 
-                                        <li><a href="{{ url_for('user.settings') }}"><span class="fa fa-cogs fa-fw"></span> {% trans %}Settings{% endtrans %}</a></li>
                                         {% if current_user|is_admin_or_moderator %}
-                                        <li><a href="{{ url_for('management.overview') }}"><span class="fa fa-cog fa-fw"></span> {% trans %}Management{% endtrans %}</a></li>
-                                        <li class="divider"></li>
+                                        <li>
+                                            <a class="dropdown-item" href="{{ url_for('management.overview') }}">
+                                                <span class="fa fa-lock fa-fw"></span> {% trans %}Management{% endtrans %}
+                                            </a>
+                                        </li>
+
+                                        <li>
+                                            <hr class="dropdown-divider">
+                                        </li>
                                         {% endif %}
 
-                                        <li><a href="{{ url_for('auth.logout') }}"><span class="fa fa-power-off fa-fw"></span> {% trans %}Logout{% endtrans %}</a></li>
+                                        <li>
+                                            <a class="dropdown-item" href="{{ url_for('auth.logout') }}">
+                                                <span class="fa fa-power-off fa-fw"></span> {% trans %}Logout{% endtrans %}
+                                            </a>
+                                        </li>
                                     </ul>
                                 </div>
                             </li>
-
                             {{ run_hook("flaskbb_tpl_user_nav_loggedin_after") }}
 
                             {% else %}
                             <!-- Not logged in - Login/Register -->
-                            <li>
-                                <div class="btn-group navbar-btn user-btn">
+                            <li class="nav-item">
+                                <div class="btn-group">
                                     <a class="btn btn-primary" href="{{ url_for('auth.login') }}">
                                         <span class="fa fa-user fa-fw"></span> {% trans %}Login{% endtrans %}
                                     </a>
-                                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
-                                    <ul class="dropdown-menu" role="menu">
+                                    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+                                        <span class="visually-hidden">Toggle Dropdown</span>
+                                    </button>
+                                    <ul class="dropdown-menu">
                                         {# MAYBE(anr): Move this into a hook?? #}
                                         {% if flaskbb_config["REGISTRATION_ENABLED"] %}
-                                        <li><a href="{{ url_for('auth.register') }}"><span class="fa fa-user-plus fa-fw"></span> {% trans %}Register{% endtrans %}</a></li>
+                                        <li>
+                                            <a class="dropdown-item" href="{{ url_for('auth.register') }}">
+                                                <span class="fas fa-user-plus fa-fw"></span> {% trans %}Register{% endtrans %}
+                                            </a>
+                                        </li>
                                         {% endif %}
-                                        <li><a href="{{ url_for('auth.forgot_password') }}"><span class="fa fa-undo fa-fw"></span> {% trans %}Reset Password{% endtrans %}</a></li>
+                                        <li>
+                                            <a class="dropdown-item" href="{{ url_for('auth.forgot_password') }}">
+                                                <span class="fas fa-undo fa-fw"></span> {% trans %}Reset Password{% endtrans %}
+                                            </a>
+                                        </li>
                                         {% if flaskbb_config["ACTIVATE_ACCOUNT"] %}
-                                        <li><a href="{{ url_for('auth.request_activation_token') }}"><span class="fa fa-fw fa-ticket"></span> {% trans %}Activate Account{% endtrans %}</a></li>
+                                        <li>
+                                            <a class="dropdown-item"
+                                                href="{{ url_for('auth.request_activation_token') }}">
+                                                <span class="fas fa-fw fa-user-check"></span> {% trans %}Activate Account{% endtrans %}
+                                            </a>
+                                        </li>
                                         {% endif %}
+
                                     </ul>
                                 </div>
                             </li>
                             {% endif %}
+                        </ul>
 
-                        </ul> <!-- end navbar right -->
-                    </div> <!-- end navbar-collapse -->
-                </div> <!-- end navbar -->
-                {% endblock %}
-
-                <!-- Place for all the (flashed) messages -->
-                {% block messages %}
-                <div id="flashed-messages">
-                    {% include theme('flashed_messages.html') %}
+                    </div>
                 </div>
-                {% endblock %}
-
-                <!-- the actual content block -->
-                {% block content %}
-                {% endblock %}
-            </div> <!-- end container -->
-
-            <!-- the forum footer -->
-            {% block footer %}
-            <footer class="flaskbb-footer">
-                <div class="container">
-                    <div class="row">
-                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
-                            <div class="text-muted text-left">{{ flaskbb_config["PROJECT_COPYRIGHT"] | safe }}</div>
+            </nav>
+
+            {% endblock %}
+
+            <!-- Place for all the (flashed) messages -->
+            {% block messages %}
+            <div id="flashed-messages">
+                {% include theme('_partials/flashed_messages.html') %}
+            </div>
+            {% endblock %}
+
+            <!-- the actual content block -->
+            {% block content %}
+            {% endblock %}
+
+            {% include theme('_partials/confirm_dialog.html') %}
+        </div> <!-- end container -->
+
+        <!-- the forum footer -->
+        {% block footer %}
+        <footer class="flaskbb-footer footer mt-auto">
+            <div class="container">
+                <div class="row">
+                    <div class="col-4 col-sm-6">
+                        <div class="text-muted text-start">{{ flaskbb_config["PROJECT_COPYRIGHT"] | safe }}</div>
+                    </div>
+                    <div class="col-8 col-sm-6">
+                        <div class="text-muted text-end">
+                            powered by <a href="https://flaskbb.org">FlaskBB</a>
                         </div>
-                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
-                            <div class="text-muted text-right">powered by <a href="https://flaskbb.org">FlaskBB</a></div>
-                            <div class="text-muted text-right">&copy; 2013 - {{ now.year }} <a href="https://flaskbb.org">FlaskBB Team</a></div>
+                        <div class="text-muted text-end">
+                            &copy; 2013 - {{ now.year }} <a href="https://flaskbb.org">FlaskBB Team</a>
                         </div>
                     </div>
                 </div>
-            </footer>
-            {% endblock %}
+            </div>
+        </footer>
+        {% endblock %}
 
-        </div> <!-- end flaskbb-layout -->
+    </div> <!-- end flaskbb-layout -->
 
-        {% block javascript %}
-        <!-- jquery and bootstrap and flaskbb.js -->
-        <script src="{{ url_for('static', filename='vendors.js') }}"></script>
-        <script src="{{ url_for('static', filename='app.js') }}"></script>
+    {% block javascript %}
+    <script src="{{ url_for('static', filename='vendors.js') }}"></script>
+    <script src="{{ url_for('static', filename='app.js') }}"></script>
 
-        <script type="text/javascript">
-        var FORUM_URL_PREFIX="{{ config['FORUM_URL_PREFIX'] }}";
+    <script type="text/javascript">
+        const FORUM_URL_PREFIX = "{{ config['FORUM_URL_PREFIX'] }}";
+    </script>
+    {% endblock %}
 
-        $(function () {
-            $('[data-toggle="tooltip"]').tooltip()
-        })
-        </script>
-        {% endblock %}
+    {# for extra scripts in other templates. #}
+    {% block scripts %}
+    {% endblock %}
+</body>
 
-        {# for extra scripts in other templates. #}
-        {% block scripts %}
-        {% endblock %}
-    </body>
 </html>