From f3b4308cb59bf4b21ff186f8479c82239446d139 Mon Sep 17 00:00:00 2001
From: Mario <mario@mariovavti.com>
Date: Mon, 7 Jun 2021 12:56:27 +0200
Subject: upgrade to bootstrap 5.0.1 and first batch of fixes

---
 view/tpl/abook_edit.tpl              | 114 ++++-----
 view/tpl/acl_selector.tpl            |  10 +-
 view/tpl/admin_accounts.tpl          |   4 +-
 view/tpl/admin_plugins.tpl           |   8 +-
 view/tpl/admin_plugins_addrepo.tpl   |   2 +-
 view/tpl/admin_profiles.tpl          |   2 +-
 view/tpl/admin_settings_features.tpl |   2 +-
 view/tpl/album_edit.tpl              |   8 +-
 view/tpl/app_create.tpl              |   2 +-
 view/tpl/attach_edit.tpl             |   8 +-
 view/tpl/blocklist.tpl               |   2 +-
 view/tpl/cal_calendar.tpl            |   2 +-
 view/tpl/cdav_addressbook.tpl        | 124 +++++-----
 view/tpl/cdav_calendar.tpl           |  18 +-
 view/tpl/cdav_widget_addressbook.tpl |  16 +-
 view/tpl/cdav_widget_calendar.tpl    |  34 +--
 view/tpl/channel.tpl                 |   2 +-
 view/tpl/channel_rename.tpl          |   2 +-
 view/tpl/channels.tpl                |   2 +-
 view/tpl/chat.tpl                    |  16 +-
 view/tpl/chatroom_new.tpl            |   4 +-
 view/tpl/chatroomlist.tpl            |   2 +-
 view/tpl/chatrooms.tpl               |   6 +-
 view/tpl/cloud_actionspanel.tpl      |  14 +-
 view/tpl/cloud_directory.tpl         |  30 +--
 view/tpl/cloud_header.tpl            |   2 +-
 view/tpl/comment_item.tpl            |  10 +-
 view/tpl/common_friends.tpl          |   2 +-
 view/tpl/common_tabs.tpl             |   2 +-
 view/tpl/connection_template.tpl     |   2 +-
 view/tpl/connections.tpl             |   6 +-
 view/tpl/contact_slider.tpl          |   2 +-
 view/tpl/conv_frame.tpl              |   2 +-
 view/tpl/conv_item.tpl               |  30 +--
 view/tpl/conv_list.tpl               |  26 +-
 view/tpl/cover_photo.tpl             |   2 +-
 view/tpl/defperms.tpl                |   2 +-
 view/tpl/directory_header.tpl        |   6 +-
 view/tpl/direntry.tpl                |   2 +-
 view/tpl/dreport.tpl                 |   4 +-
 view/tpl/edpost_head.tpl             |   2 +-
 view/tpl/email_validation.tpl        |   2 +-
 view/tpl/event_form.tpl              |  16 +-
 view/tpl/events-js.tpl               |   4 +-
 view/tpl/events_cal-js.tpl           |   2 +-
 view/tpl/events_tools_side.tpl       |   2 +-
 view/tpl/field_checkbox.tpl          |   6 +-
 view/tpl/field_colorinput.tpl        |   2 +-
 view/tpl/field_combobox.tpl          |   2 +-
 view/tpl/field_custom.tpl            |   2 +-
 view/tpl/field_duration.qmc.tpl      |   2 +-
 view/tpl/field_input.tpl             |   4 +-
 view/tpl/field_intcheckbox.tpl       |   4 +-
 view/tpl/field_password.tpl          |   2 +-
 view/tpl/field_radio.tpl             |   2 +-
 view/tpl/field_select.tpl            |   4 +-
 view/tpl/field_select_disabled.tpl   |   2 +-
 view/tpl/field_select_grouped.tpl    |   2 +-
 view/tpl/field_select_raw.tpl        |   2 +-
 view/tpl/field_textarea.tpl          |   2 +-
 view/tpl/field_themeselect.tpl       |   2 +-
 view/tpl/field_yesno.tpl             |  10 +-
 view/tpl/filer_dialog.tpl            |   5 +-
 view/tpl/generic_addon_settings.tpl  |   2 +-
 view/tpl/generic_modal.tpl           |   4 +-
 view/tpl/group_edit.tpl              |   4 +-
 view/tpl/group_selection.tpl         |   2 +-
 view/tpl/groupeditor.tpl             |   4 +-
 view/tpl/help.tpl                    |   4 +-
 view/tpl/invite.tpl                  |   6 +-
 view/tpl/jot-header.tpl              |   2 +-
 view/tpl/jot.tpl                     |  42 ++--
 view/tpl/layoutlist.tpl              |   2 +-
 view/tpl/locmanage.tpl               |   2 +-
 view/tpl/login.tpl                   |  22 +-
 view/tpl/mail_conv.tpl               |   8 +-
 view/tpl/mail_display.tpl            |   2 +-
 view/tpl/menuedit.tpl                |   4 +-
 view/tpl/menulist.tpl                |   2 +-
 view/tpl/mitemedit.tpl               |   4 +-
 view/tpl/mitemlist.tpl               |   4 +-
 view/tpl/mood_content.tpl            |   2 +-
 view/tpl/myapps.tpl                  |   4 +-
 view/tpl/nav_login.tpl               |   4 +-
 view/tpl/navbar_default.tpl          | 451 +++++++++++++++++++----------------
 view/tpl/navbar_tucson.tpl           |  18 +-
 view/tpl/notifications.tpl           |   2 +-
 view/tpl/notifications_widget.tpl    |   6 +-
 view/tpl/notify.tpl                  |   2 +-
 view/tpl/peoplefind.tpl              |   2 +-
 view/tpl/permcats.tpl                |   6 +-
 view/tpl/photo_album.tpl             |   4 +-
 view/tpl/photo_albums.tpl            |   2 +-
 view/tpl/photo_item.tpl              |   2 +-
 view/tpl/photo_view.tpl              |  36 +--
 view/tpl/photos_recent.tpl           |   4 +-
 view/tpl/photos_upload.tpl           |  14 +-
 view/tpl/pinned_item.tpl             |  24 +-
 view/tpl/poke_content.tpl            |   4 +-
 view/tpl/privacy_groups.tpl          |   4 +-
 view/tpl/profile_advanced.tpl        |   8 +-
 view/tpl/profile_edit.tpl            |  48 ++--
 view/tpl/profile_listing_header.tpl  |   2 +-
 view/tpl/profile_photo.tpl           |   2 +-
 view/tpl/profile_tabs.tpl            |   2 -
 view/tpl/profile_vcard.tpl           |   4 +-
 view/tpl/prv_message.tpl             |  16 +-
 view/tpl/rating_slider.tpl           |   2 +-
 view/tpl/regate.tpl                  |   2 +-
 view/tpl/removeaccount.tpl           |   2 +-
 view/tpl/removeme.tpl                |   2 +-
 view/tpl/rmagic.tpl                  |   2 +-
 view/tpl/search_item.tpl             |  12 +-
 view/tpl/settings.tpl                |  20 +-
 view/tpl/settings_account.tpl        |   2 +-
 view/tpl/settings_display.tpl        |   6 +-
 view/tpl/settings_features.tpl       |   2 +-
 view/tpl/sharedwithme.tpl            |   2 +-
 view/tpl/thing_edit.tpl              |   2 +-
 view/tpl/thing_input.tpl             |   2 +-
 view/tpl/tokens.tpl                  |   6 +-
 view/tpl/usermenu.tpl                |   2 +-
 view/tpl/viewcontact_template.tpl    |   2 +-
 view/tpl/webpage_export_list.tpl     |   4 +-
 view/tpl/webpage_import.tpl          |   4 +-
 view/tpl/webpagelist.tpl             |   4 +-
 view/tpl/website_portation_tools.tpl |  16 +-
 view/tpl/wiki.tpl                    |  42 ++--
 view/tpl/wiki_page_list.tpl          |   2 +-
 view/tpl/wiki_page_not_found.tpl     |   2 +-
 view/tpl/wikilist.tpl                |  12 +-
 131 files changed, 802 insertions(+), 762 deletions(-)

(limited to 'view/tpl')

diff --git a/view/tpl/abook_edit.tpl b/view/tpl/abook_edit.tpl
index 6ff7bffcd..5520a7a45 100644
--- a/view/tpl/abook_edit.tpl
+++ b/view/tpl/abook_edit.tpl
@@ -1,9 +1,9 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
 		{{if $notself}}
-		<div class="pull-right">
+		<div class="float-end">
 			<div class="btn-group">
-				<button id="connection-dropdown" class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+				<button id="connection-dropdown" class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 					<i class="fa fa-cog"></i>&nbsp;{{$tools_label}}
 				</button>
 				<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
@@ -25,7 +25,7 @@
 			<div class="btn-group">
 				<a href="connedit/{{$abook_prev}}{{if $section}}?f=&section={{$section}}{{/if}}" class="btn btn-outline-secondary btn-sm{{if ! $abook_prev}} disabled{{/if}}" ><i class="fa fa-backward"></i></a>
 				<div class="btn-group" >
-					<button class="btn btn-outline-secondary btn-sm{{if $is_pending}} disabled{{/if}}" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-bars"></i></button>
+					<button class="btn btn-outline-secondary btn-sm{{if $is_pending}} disabled{{/if}}" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-bars"></i></button>
 					<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
 						{{foreach $sections as $s}}
 						<a class="dropdown-item" href="{{$s.url}}" title="{{$s.title}}">{{$s.label}}</a>
@@ -52,7 +52,7 @@
 		{{/foreach}}
 		<div class="section-content-info-wrapper">
 			<div>
-				{{$addr_text}} <strong>'{{if $addr}}{{$addr}}{{else}}{{$primeurl}}{{/if}}'</strong>			
+				{{$addr_text}} <strong>'{{if $addr}}{{$addr}}{{else}}{{$primeurl}}{{/if}}'</strong>
 			</div>
 			{{if $locstr}}
 			<div>
@@ -85,7 +85,7 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper" role="tab" id="pending-tool">
 					<h3>
-						<a data-toggle="collapse" data-parent="#contact-edit-tools" href="#pending-tool-collapse" aria-expanded="true" aria-controls="pending-tool-collapse">
+						<a data-bs-toggle="collapse" data-parent="#contact-edit-tools" href="#pending-tool-collapse" aria-expanded="true" aria-controls="pending-tool-collapse">
 							{{$pending_label}}
 						</a>
 					</h3>
@@ -101,21 +101,21 @@
 			</div>
 			{{/if}}
 			{{if ! $is_pending}}
-			<div id="template-form-vcard-org" class="form-group form-vcard-org">
-				<div class="form-group form-vcard-org">
+			<div id="template-form-vcard-org" class="mb-3 form-vcard-org">
+				<div class="mb-3 form-vcard-org">
 					<input type="text" name="org" value="" placeholder="{{$org_label}}">
 					<i data-remove="vcard-org" data-id="" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 				</div>
 			</div>
 
-			<div id="template-form-vcard-title" class="form-group form-vcard-title">
-				<div class="form-group form-vcard-title">
+			<div id="template-form-vcard-title" class="mb-3 form-vcard-title">
+				<div class="mb-3 form-vcard-title">
 					<input type="text" name="title" value="" placeholder="{{$title_label}}">
 					<i data-remove="vcard-title" data-id="" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 				</div>
 			</div>
 
-			<div id="template-form-vcard-tel" class="form-group form-vcard-tel">
+			<div id="template-form-vcard-tel" class="mb-3 form-vcard-tel">
 				<select name="tel_type[]">
 					<option value="CELL">{{$mobile}}</option>
 					<option value="HOME">{{$home}}</option>
@@ -126,7 +126,7 @@
 				<i data-remove="vcard-tel" data-id="" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 			</div>
 
-			<div id="template-form-vcard-email" class="form-group form-vcard-email">
+			<div id="template-form-vcard-email" class="mb-3 form-vcard-email">
 				<select name="email_type[]">
 					<option value="HOME">{{$home}}</option>
 					<option value="WORK">{{$work}}</option>
@@ -136,7 +136,7 @@
 				<i data-remove="vcard-email" data-id="" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 			</div>
 
-			<div id="template-form-vcard-impp" class="form-group form-vcard-impp">
+			<div id="template-form-vcard-impp" class="mb-3 form-vcard-impp">
 				<select name="impp_type[]">
 					<option value="HOME">{{$home}}</option>
 					<option value="WORK">{{$work}}</option>
@@ -146,7 +146,7 @@
 				<i data-remove="vcard-impp" data-id="" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 			</div>
 
-			<div id="template-form-vcard-url" class="form-group form-vcard-url">
+			<div id="template-form-vcard-url" class="mb-3 form-vcard-url">
 				<select name="url_type[]">
 					<option value="HOME">{{$home}}</option>
 					<option value="WORK">{{$work}}</option>
@@ -156,8 +156,8 @@
 				<i data-remove="vcard-url" data-id="" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 			</div>
 
-			<div id="template-form-vcard-adr" class="form-group form-vcard-adr">
-				<div class="form-group">
+			<div id="template-form-vcard-adr" class="mb-3 form-vcard-adr">
+				<div class="mb-3">
 					<select name="adr_type[]">
 						<option value="HOME">{{$home}}</option>
 						<option value="WORK">{{$work}}</option>
@@ -166,30 +166,30 @@
 					<label>{{$adr_label}}</label>
 					<i data-remove="vcard-adr" data-id="" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 				</div>
-				<div class="form-group">
+				<div class="mb-3">
 					<input type="text" name="" value="" placeholder="{{$po_box}}">
 				</div>
-				<div class="form-group">
+				<div class="mb-3">
 					<input type="text" name="" value="" placeholder="{{$extra}}">
 				</div>
-				<div class="form-group">
+				<div class="mb-3">
 					<input type="text" name="" value="" placeholder="{{$street}}">
 				</div>
-				<div class="form-group">
+				<div class="mb-3">
 					<input type="text" name="" value="" placeholder="{{$locality}}">
 				</div>
-				<div class="form-group">
+				<div class="mb-3">
 					<input type="text" name="" value="" placeholder="{{$region}}">
 				</div>
-				<div class="form-group">
+				<div class="mb-3">
 					<input type="text" name="" value="" placeholder="{{$zip_code}}">
 				</div>
-				<div class="form-group">
+				<div class="mb-3">
 					<input type="text" name="" value="" placeholder="{{$country}}">
 				</div>
 			</div>
 
-			<div id="template-form-vcard-note" class="form-group form-vcard-note">
+			<div id="template-form-vcard-note" class="mb-3 form-vcard-note">
 				<label>{{$note_label}}</label>
 				<i data-remove="vcard-note" data-id="" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 				<textarea name="note" class="form-control"></textarea>
@@ -197,8 +197,8 @@
 
 			<div class="section-content-wrapper-np">
 				<div id="vcard-cancel-{{$vcard.id}}" class="vcard-cancel vcard-cancel-btn" data-id="{{$vcard.id}}" data-action="cancel"><i class="fa fa-close"></i></div>
-				<div id="vcard-add-field-{{$vcard.id}}" class="dropdown pull-right vcard-add-field">
-					<button data-toggle="dropdown" type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle"><i class="fa fa-plus"></i> {{$add_field}}</button>
+				<div id="vcard-add-field-{{$vcard.id}}" class="dropdown float-end vcard-add-field">
+					<button data-bs-toggle="dropdown" type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle"><i class="fa fa-plus"></i> {{$add_field}}</button>
 					<ul class="dropdown-menu">
 						<li class="add-vcard-org"{{if $vcard.org}} style="display: none"{{/if}}><a href="#" data-add="vcard-org" data-id="{{$vcard.id}}" class="add-field" onclick="return false;">{{$org_label}}</a></li>
 						<li class="add-vcard-title"{{if $vcard.title}} style="display: none"{{/if}}><a href="#" data-add="vcard-title" data-id="{{$vcard.id}}" class="add-field" onclick="return false;">{{$title_label}}</a></li>
@@ -222,10 +222,10 @@
 			</div>
 			<div id="vcard-info-{{$vcard.id}}" class="vcard-info section-content-wrapper">
 
-				<div class="vcard-org form-group">
+				<div class="vcard-org mb-3">
 					<div class="form-vcard-org-wrapper">
 						{{if $vcard.org}}
-						<div class="form-group form-vcard-org">
+						<div class="mb-3 form-vcard-org">
 							<input type="text" name="org" value="{{$vcard.org}}" size="{{$vcard.org|count_characters:true}}" placeholder="{{$org_label}}">
 							<i data-remove="vcard-org" data-id="{{$vcard.id}}" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 						</div>
@@ -233,10 +233,10 @@
 					</div>
 				</div>
 
-				<div class="vcard-title form-group">
+				<div class="vcard-title mb-3">
 					<div class="form-vcard-title-wrapper">
 						{{if $vcard.title}}
-						<div class="form-group form-vcard-title">
+						<div class="mb-3 form-vcard-title">
 							<input type="text" name="title" value="{{$vcard.title}}" size="{{$vcard.title|count_characters:true}}" placeholder="{{$title_label}}">
 							<i data-remove="vcard-title" data-id="{{$vcard.id}}" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 						</div>
@@ -245,11 +245,11 @@
 				</div>
 
 
-				<div class="vcard-tel form-group">
+				<div class="vcard-tel mb-3">
 					<div class="form-vcard-tel-wrapper">
 						{{if $vcard.tels}}
 						{{foreach $vcard.tels as $tel}}
-						<div class="form-group form-vcard-tel">
+						<div class="mb-3 form-vcard-tel">
 							<select name="tel_type[]">
 								<option value=""{{if $tel.type.0 != 'CELL' && $tel.type.0 != 'HOME' && $tel.type.0 != 'WORK' && $tel.type.0 != 'OTHER'}} selected="selected"{{/if}}>{{$tel.type.1}}</option>
 								<option value="CELL"{{if $tel.type.0 == 'CELL'}} selected="selected"{{/if}}>{{$mobile}}</option>
@@ -266,11 +266,11 @@
 				</div>
 
 
-				<div class="vcard-email form-group">
+				<div class="vcard-email mb-3">
 					<div class="form-vcard-email-wrapper">
 						{{if $vcard.emails}}
 						{{foreach $vcard.emails as $email}}
-						<div class="form-group form-vcard-email">
+						<div class="mb-3 form-vcard-email">
 							<select name="email_type[]">
 								<option value=""{{if $email.type.0 != 'HOME' && $email.type.0 != 'WORK' && $email.type.0 != 'OTHER'}} selected="selected"{{/if}}>{{$email.type.1}}</option>
 								<option value="HOME"{{if $email.type.0 == 'HOME'}} selected="selected"{{/if}}>{{$home}}</option>
@@ -285,11 +285,11 @@
 					</div>
 				</div>
 
-				<div class="vcard-impp form-group">
+				<div class="vcard-impp mb-3">
 					<div class="form-vcard-impp-wrapper">
 						{{if $vcard.impps}}
 						{{foreach $vcard.impps as $impp}}
-						<div class="form-group form-vcard-impp">
+						<div class="mb-3 form-vcard-impp">
 							<select name="impp_type[]">
 								<option value=""{{if $impp.type.0 != 'HOME' && $impp.type.0 != 'WORK' && $impp.type.0 != 'OTHER'}} selected="selected"{{/if}}>{{$impp.type.1}}</option>
 								<option value="HOME"{{if $impp.type.0 == 'HOME'}} selected="selected"{{/if}}>{{$home}}</option>
@@ -304,11 +304,11 @@
 					</div>
 				</div>
 
-				<div class="vcard-url form-group">
+				<div class="vcard-url mb-3">
 					<div class="form-vcard-url-wrapper">
 						{{if $vcard.urls}}
 						{{foreach $vcard.urls as $url}}
-						<div class="form-group form-vcard-url">
+						<div class="mb-3 form-vcard-url">
 							<select name="url_type[]">
 								<option value=""{{if $url.type.0 != 'HOME' && $url.type.0 != 'WORK' && $url.type.0 != 'OTHER'}} selected="selected"{{/if}}>{{$url.type.1}}</option>
 								<option value="HOME"{{if $url.type.0 == 'HOME'}} selected="selected"{{/if}}>{{$home}}</option>
@@ -323,12 +323,12 @@
 					</div>
 				</div>
 
-				<div class="vcard-adr form-group">
+				<div class="vcard-adr mb-3">
 					<div class="form-vcard-adr-wrapper">
 						{{if $vcard.adrs}}
 						{{foreach $vcard.adrs as $adr}}
-						<div class="form-group form-vcard-adr">
-							<div class="form-group">
+						<div class="mb-3 form-vcard-adr">
+							<div class="mb-3">
 								<label>{{$adr_label}}</label>
 								<select name="adr_type[]">
 									<option value=""{{if $adr.type.0 != 'HOME' && $adr.type.0 != 'WORK' && $adr.type.0 != 'OTHER'}} selected="selected"{{/if}}>{{$adr.type.1}}</option>
@@ -338,25 +338,25 @@
 								</select>
 								<i data-remove="vcard-adr" data-id="{{$vcard.id}}" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 							</div>
-							<div class="form-group">
+							<div class="mb-3">
 								<input type="text" name="adr[{{$adr@index}}][]" value="{{$adr.address.0}}" size="{{$adr.address.0|count_characters:true}}" placeholder="{{$po_box}}">
 							</div>
-							<div class="form-group">
+							<div class="mb-3">
 								<input type="text" name="adr[{{$adr@index}}][]" value="{{$adr.address.1}}" size="{{$adr.address.1|count_characters:true}}" placeholder="{{$extra}}">
 							</div>
-							<div class="form-group">
+							<div class="mb-3">
 								<input type="text" name="adr[{{$adr@index}}][]" value="{{$adr.address.2}}" size="{{$adr.address.2|count_characters:true}}" placeholder="{{$street}}">
 							</div>
-							<div class="form-group">
+							<div class="mb-3">
 								<input type="text" name="adr[{{$adr@index}}][]" value="{{$adr.address.3}}" size="{{$adr.address.3|count_characters:true}}" placeholder="{{$locality}}">
 							</div>
-							<div class="form-group">
+							<div class="mb-3">
 								<input type="text" name="adr[{{$adr@index}}][]" value="{{$adr.address.4}}" size="{{$adr.address.4|count_characters:true}}" placeholder="{{$region}}">
 							</div>
-							<div class="form-group">
+							<div class="mb-3">
 								<input type="text" name="adr[{{$adr@index}}][]" value="{{$adr.address.5}}" size="{{$adr.address.5|count_characters:true}}" placeholder="{{$zip_code}}">
 							</div>
-							<div class="form-group">
+							<div class="mb-3">
 								<input type="text" name="adr[{{$adr@index}}][]" value="{{$adr.address.6}}" size="{{$adr.address.6|count_characters:true}}" placeholder="{{$country}}">
 							</div>
 						</div>
@@ -365,7 +365,7 @@
 					</div>
 				</div>
 
-				<div class="vcard-note form-group form-vcard-note">
+				<div class="vcard-note mb-3 form-vcard-note">
 					<div class="form-vcard-note-wrapper">
 						{{if $vcard.note}}
 						<label>{{$note_label}}</label>
@@ -387,7 +387,7 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper" role="tab" id="affinity-tool">
 					<h3>
-						<a data-toggle="collapse" data-parent="#contact-edit-tools" href="#affinity-tool-collapse" aria-expanded="true" aria-controls="affinity-tool-collapse">
+						<a data-bs-toggle="collapse" data-parent="#contact-edit-tools" href="#affinity-tool-collapse" aria-expanded="true" aria-controls="affinity-tool-collapse">
 							{{$affinity}}
 						</a>
 					</h3>
@@ -395,13 +395,13 @@
 				<div id="affinity-tool-collapse" class="panel-collapse collapse{{if $section == 'affinity'}} show{{/if}}" role="tabpanel" aria-labelledby="affinity-tool">
 					<div class="section-content-tools-wrapper">
 						{{if $slide}}
-						<div class="form-group"><strong>{{$lbl_slider}}</strong></div>
+						<div class="mb-3"><strong>{{$lbl_slider}}</strong></div>
 						{{$slide}}
 						<input id="contact-closeness-mirror" type="hidden" name="closeness" value="{{$close}}" />
 						{{/if}}
 
 						{{if $multiprofs}}
-						<div class="form-group">
+						<div class="mb-3">
 							<strong>{{$lbl_vis2}}</strong>
 							{{$profile_select}}
 						</div>
@@ -418,7 +418,7 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper" role="tab" id="fitert-tool">
 					<h3>
-						<a data-toggle="collapse" data-parent="#contact-edit-tools" href="#fitert-tool-collapse" aria-expanded="true" aria-controls="fitert-tool-collapse">
+						<a data-bs-toggle="collapse" data-parent="#contact-edit-tools" href="#fitert-tool-collapse" aria-expanded="true" aria-controls="fitert-tool-collapse">
 							{{$connfilter_label}}
 						</a>
 					</h3>
@@ -442,7 +442,7 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper" role="tab" id="rating-tool">
 					<h3>
-						<a data-toggle="collapse" data-parent="#contact-edit-tools" href="#rating-tool-collapse" aria-expanded="true" aria-controls="rating-tool-collapse">
+						<a data-bs-toggle="collapse" data-parent="#contact-edit-tools" href="#rating-tool-collapse" aria-expanded="true" aria-controls="rating-tool-collapse">
 							{{$lbl_rating}}
 						</a>
 					</h3>
@@ -452,7 +452,7 @@
 						<div class="section-content-warning-wrapper">
 							{{$rating_info}}
 						</div>
-						<div class="form-group"><strong>{{$lbl_rating_label}}</strong></div>
+						<div class="mb-3"><strong>{{$lbl_rating_label}}</strong></div>
 						{{$rating}}
 						{{include file="field_textarea.tpl" field=$rating_text}}
 						<input id="contact-rating-mirror" type="hidden" name="rating" value="{{$rating_val}}" />
@@ -471,7 +471,7 @@
 				{{if $notself}}
 				<div class="section-subtitle-wrapper" role="tab" id="perms-tool">
 					<h3>
-						<a data-toggle="collapse" data-parent="#contact-edit-tools" href="#perms-tool-collapse" aria-expanded="true" aria-controls="perms-tool-collapse">
+						<a data-bs-toggle="collapse" data-parent="#contact-edit-tools" href="#perms-tool-collapse" aria-expanded="true" aria-controls="perms-tool-collapse">
 							{{$permlbl}}
 						</a>
 					</h3>
@@ -485,11 +485,11 @@
 						</div>
 
 						{{if $permcat_enable}}
-						<a href="permcats" class="pull-right"><i class="fa fa-plus"></i>&nbsp;{{$permcat_new}}</a>
+						<a href="permcats" class="float-end"><i class="fa fa-plus"></i>&nbsp;{{$permcat_new}}</a>
 						{{include file="field_select.tpl" field=$permcat}}
 						{{/if}}
 
-						<table id="perms-tool-table" class=form-group>
+						<table id="perms-tool-table" class=mb-3>
 							<tr>
 								<td></td>
 								{{if $notself}}
diff --git a/view/tpl/acl_selector.tpl b/view/tpl/acl_selector.tpl
index c58a345e5..bc33b8b6f 100644
--- a/view/tpl/acl_selector.tpl
+++ b/view/tpl/acl_selector.tpl
@@ -9,14 +9,14 @@
 					<a target="hubzilla-help" href="{{$helpUrl}}" class="contextual-help-tool" title="Help and documentation"><i class="fa fa-fw fa-question"></i></a>
 					{{/if}}
 				</h4>
-				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
 			</div>
 			<div class="section-content-wrapper">
 				{{if $aclModalDesc}}
 				<div id="acl-dialog-description" class="section-content-info-wrapper">{{$aclModalDesc}}</div>
 				{{/if}}
 				<label for="acl-select">{{if $aclModalDesc}}<i class="fa fa-send-o"></i> {{/if}}{{$select_label}}</label>
-				<select id="acl-select" name="optionsRadios" class="form-control form-group">
+				<select id="acl-select" name="optionsRadios" class="form-control mb-3">
 					<option id="acl-showall" value="public" {{$public_selected}}>{{$showall}}</option>
 					<option id="acl-onlyme" value="onlyme" {{$justme_selected}}>{{$onlyme}}</option>
 					{{$groups}}
@@ -26,7 +26,7 @@
 				</select>
 
 				{{if $showallOrigin}}
-				<div id="acl-info" class="form-group">
+				<div id="acl-info" class="mb-3">
 					<i class="fa fa-info-circle"></i>&nbsp;{{$showallOrigin}}
 				</div>
 				{{/if}}
@@ -50,7 +50,7 @@
 				</div>
 			</div>
 			<div class="modal-footer clear">
-				<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{$aclModalDismiss}}</button>
+				<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{$aclModalDismiss}}</button>
 			</div>
 		</div><!-- /.modal-content -->
 	</div><!-- /.modal-dialog -->
@@ -58,7 +58,7 @@
 </form>
 <script>
 	// compatibility issue with bootstrap v4
-	//$('[data-toggle="popover"]').popover(); // Init the popover, if present
+	//$('[data-bs-toggle="popover"]').popover(); // Init the popover, if present
 
 	if(typeof acl=="undefined"){
 		acl = new ACL(
diff --git a/view/tpl/admin_accounts.tpl b/view/tpl/admin_accounts.tpl
index f4865f7a0..78a68a8a1 100644
--- a/view/tpl/admin_accounts.tpl
+++ b/view/tpl/admin_accounts.tpl
@@ -36,7 +36,7 @@
 			{{/foreach}}
 			</tbody>
 		</table>
-		<div class="float-right">
+		<div class="float-end">
 			<a id="zar2sat" class="btn btn-sm btn-primary" href="javascript:;">{{$sel_tall}}</a>
 			<a id="zar2aas" class="zar2xas btn btn-sm btn-success" href="javascript:;"><i class="fa fa-check"></i> {{$sel_aprv}}</a>
 			<a id="zar2das" class="zar2xas btn btn-sm btn-danger" href="javascript:;"><i class="fa fa-close"></i> {{$sel_deny}}</a>
@@ -46,7 +46,7 @@
 		{{$no_pending}}
 		</div>
 		{{/if}}
-		<div class="float-left">
+		<div class="float-start">
 			<a class="btn btn-sm btn-link" href="{{$get_all_link}}">{{$get_all}}</a>
 		</div>
 		<div class="clearfix"></div>
diff --git a/view/tpl/admin_plugins.tpl b/view/tpl/admin_plugins.tpl
index d8e1a6711..7d413d085 100644
--- a/view/tpl/admin_plugins.tpl
+++ b/view/tpl/admin_plugins.tpl
@@ -1,7 +1,7 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
 		{{if $allowManageRepos}}
-		<div class="pull-right">
+		<div class="float-end">
 			<button class="btn btn-success btn-sm" onclick="openClose('form');">{{$managerepos}}</button>
 		</div>
 		{{/if}}
@@ -20,13 +20,13 @@
         {{foreach $addonrepos as $repo}}
         <tr>
             <td style="width: 70%;">
-				<span class="pull-left">{{$repo.name}}</span><span id="update-message-{{$repo.name}}" style="margin-left: 20px;"></span>
+				<span class="float-start">{{$repo.name}}</span><span id="update-message-{{$repo.name}}" style="margin-left: 20px;"></span>
             </td>
             <td style="width: 15%;">
-              <button class="btn btn-sm btn-primary pull-right" style="margin-left: 10px; margin-right: 10px;" onclick="updateAddonRepo('{{$repo.name}}'); return false;"><i class='fa fa-download'></i>&nbsp;{{$repoUpdateButton}}</button>
+              <button class="btn btn-sm btn-primary float-end" style="margin-left: 10px; margin-right: 10px;" onclick="updateAddonRepo('{{$repo.name}}'); return false;"><i class='fa fa-download'></i>&nbsp;{{$repoUpdateButton}}</button>
             </td>
             <td style="width: 15%;">
-              <button class="btn btn-sm btn-danger pull-right" style="margin-left: 10px; margin-right: 0px;" onclick="removeAddonRepo('{{$repo.name}}'); return false;"><i class='fa fa-trash-o'></i>&nbsp;{{$repoRemoveButton}}</button>
+              <button class="btn btn-sm btn-danger float-end" style="margin-left: 10px; margin-right: 0px;" onclick="removeAddonRepo('{{$repo.name}}'); return false;"><i class='fa fa-trash-o'></i>&nbsp;{{$repoRemoveButton}}</button>
             </td>
         <div class="clear"></div>
         </td></tr>
diff --git a/view/tpl/admin_plugins_addrepo.tpl b/view/tpl/admin_plugins_addrepo.tpl
index de7b465bb..e0e271d5a 100644
--- a/view/tpl/admin_plugins_addrepo.tpl
+++ b/view/tpl/admin_plugins_addrepo.tpl
@@ -3,7 +3,7 @@
     <p class="descriptive-text">{{$desc}}</p>
     {{include file="field_input.tpl" field=$repoURL}}
     {{include file="field_input.tpl" field=$repoName}}
-    <div class="btn-group pull-right">
+    <div class="btn-group float-end">
 		<button id="add-plugin-repo-submit" class="btn btn-primary" type="submit" name="submit" onclick="adminPluginsAddRepo(); return false;">{{$submit}}</button>
 	</div>
 </form>
diff --git a/view/tpl/admin_profiles.tpl b/view/tpl/admin_profiles.tpl
index b3bb687c0..1df3f5492 100644
--- a/view/tpl/admin_profiles.tpl
+++ b/view/tpl/admin_profiles.tpl
@@ -1,5 +1,5 @@
 <div class="generic-content-wrapper">
-<div class="section-title-wrapper"><a title="{{$new}}" class="btn btn-primary btn-sm pull-right" href="admin/profs/new"><i class="fa fa-plus-circle"></i>&nbsp;{{$new}}</a><h2>{{$title}}</h2>
+<div class="section-title-wrapper"><a title="{{$new}}" class="btn btn-primary btn-sm float-end" href="admin/profs/new"><i class="fa fa-plus-circle"></i>&nbsp;{{$new}}</a><h2>{{$title}}</h2>
 <div class="clear"></div>
 </div>
 
diff --git a/view/tpl/admin_settings_features.tpl b/view/tpl/admin_settings_features.tpl
index 86f978e08..330251dce 100644
--- a/view/tpl/admin_settings_features.tpl
+++ b/view/tpl/admin_settings_features.tpl
@@ -9,7 +9,7 @@
 		<div class="panel">
 			<div class="section-subtitle-wrapper" role="tab" id="{{$g}}-settings-title">
 				<h3>
-					<a data-toggle="collapse" data-target="#{{$g}}-settings-content" href="#" aria-expanded="true" aria-controls="{{$g}}-settings-collapse">
+					<a data-bs-toggle="collapse" data-bs-target="#{{$g}}-settings-content" href="#" aria-expanded="true" aria-controls="{{$g}}-settings-collapse">
 						{{$f.0}}
 					</a>
 				</h3>
diff --git a/view/tpl/album_edit.tpl b/view/tpl/album_edit.tpl
index f5495f149..95a6a7b14 100644
--- a/view/tpl/album_edit.tpl
+++ b/view/tpl/album_edit.tpl
@@ -1,6 +1,6 @@
 <div id="photo-album-edit-wrapper" class="section-content-tools-wrapper">
 	<form name="photo-album-edit-form" id="photo-album-edit-form" action="photos/{{$nickname}}/album/{{$hexalbum}}" method="post" >
-		<div class="form-group">
+		<div class="mb-3">
 			<label id="photo-album-edit-name-label" for="photo-album-edit-name">{{$nametext}}</label>
 			<input type="text" name="albumname" placeholder="{{$name_placeholder}}" value="{{$album}}" class="form-control" list="dl-album-edit" />
 			<datalist id="dl-album-edit">
@@ -11,9 +11,9 @@
 			{{/foreach}}
 			</datalist>
 		</div>
-		<div class="form-group">
-			<button id="photo-album-edit-submit" type="submit" name="submit" class="btn btn-primary btn-sm pull-right" />{{$submit}}</button>
-			<button id="photo-album-edit-drop" type="submit" name="dropalbum" value="{{$dropsubmit}}" class="btn btn-danger btn-sm pull-left" onclick="return confirmDelete();" />{{$dropsubmit}}</button>
+		<div class="mb-3">
+			<button id="photo-album-edit-submit" type="submit" name="submit" class="btn btn-primary btn-sm float-end" />{{$submit}}</button>
+			<button id="photo-album-edit-drop" type="submit" name="dropalbum" value="{{$dropsubmit}}" class="btn btn-danger btn-sm float-start" onclick="return confirmDelete();" />{{$dropsubmit}}</button>
 		</div>
 	</form>
 	<div id="photo-album-edit-end" class="clear"></div>
diff --git a/view/tpl/app_create.tpl b/view/tpl/app_create.tpl
index 5075ce5e2..0a455d07f 100644
--- a/view/tpl/app_create.tpl
+++ b/view/tpl/app_create.tpl
@@ -33,7 +33,7 @@
 		{{include file="field_textarea.tpl" field=$embed}}
 		{{/if}}
 
-		<button class="btn btn-primary float-right" type="submit" name="submit" value="{{$submit}}">{{$submit}}</button>
+		<button class="btn btn-primary float-end" type="submit" name="submit" value="{{$submit}}">{{$submit}}</button>
 
 		</form>
 	</div>
diff --git a/view/tpl/attach_edit.tpl b/view/tpl/attach_edit.tpl
index 62442ff7a..0de4404ec 100644
--- a/view/tpl/attach_edit.tpl
+++ b/view/tpl/attach_edit.tpl
@@ -5,7 +5,7 @@
 	<input type="hidden" name="fileid" value="{{$file.id}}" />
 	{{if !$isadir}}{{include file="field_checkbox.tpl" field=$notify}}{{/if}}
 	{{if $isadir}}{{include file="field_checkbox.tpl" field=$recurse}}{{/if}}
-	<div id="attach-edit-tools-share" class="btn-group form-group">
+	<div id="attach-edit-tools-share" class="btn-group mb-3">
 		{{if !$isadir}}
 		<a href="/rpost?attachment=[attachment]{{$file.hash}},{{$file.revision}}[/attachment]" id="attach-btn" class="btn btn-outline-secondary btn-sm" title="{{$attach_btn_title}}">
 			<i class="fa fa-share-square-o jot-icons"></i>
@@ -15,15 +15,15 @@
 			<i class="fa fa-link jot-icons"></i>
 		</button>
 	</div>
-	<div id="attach-edit-perms" class="btn-group pull-right">
-		<button id="dbtn-acl" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#aclModal" title="{{$permset}}" type="button">
+	<div id="attach-edit-perms" class="btn-group float-end">
+		<button id="dbtn-acl" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#aclModal" title="{{$permset}}" type="button">
 			<i id="jot-perms-icon" class="fa fa-{{$lockstate}} jot-icons"></i>
 		</button>
 		<button id="dbtn-submit" class="btn btn-primary btn-sm" type="submit" name="submit">
 			{{$submit}}
 		</button>
 	</div>
-	<div id="link-code" class="form-group">
+	<div id="link-code" class="mb-3">
 		<label for="">{{$cpldesc}}</label>
 		<input type="text" class="form-control" id="linkpasteinput" name="cutpasteextlink" value="{{$cloudpath}}" onclick="this.select();"/>
 	</div>
diff --git a/view/tpl/blocklist.tpl b/view/tpl/blocklist.tpl
index 7f400bba2..0d859166e 100644
--- a/view/tpl/blocklist.tpl
+++ b/view/tpl/blocklist.tpl
@@ -1,7 +1,7 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
 		{{if $editor}}
-		<div class="pull-right">
+		<div class="float-end">
 			<button id="webpage-create-btn" class="btn btn-sm btn-success" onclick="openClose('block-editor');"><i class="fa fa-pencil-square-o"></i>&nbsp;{{$create}}</button>
 		</div>
 		{{/if}}
diff --git a/view/tpl/cal_calendar.tpl b/view/tpl/cal_calendar.tpl
index 93ebaa235..a928e98f6 100644
--- a/view/tpl/cal_calendar.tpl
+++ b/view/tpl/cal_calendar.tpl
@@ -87,7 +87,7 @@ function updateSize() {
 
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		<div class="float-right">
+		<div class="float-end">
 			<div class="btn-group">
 				<button id="prev-btn" class="btn btn-outline-secondary btn-sm" title="{{$prev}}"><i class="fa fa-backward"></i></button>
 				<button id="today-btn" class="btn btn-outline-secondary btn-sm" title="{{$today}}"><div id="events-spinner" class="spinner s"></div><i class="fa fa-bullseye" style="display: none; width: 1rem;"></i></button>
diff --git a/view/tpl/cdav_addressbook.tpl b/view/tpl/cdav_addressbook.tpl
index 587a95caa..081a34011 100644
--- a/view/tpl/cdav_addressbook.tpl
+++ b/view/tpl/cdav_addressbook.tpl
@@ -69,21 +69,21 @@ $(document).ready(function() {
 
 });
 </script>
-<div id="template-form-vcard-org" class="form-group form-vcard-org">
-	<div class="form-group form-vcard-org">
+<div id="template-form-vcard-org" class="mb-3 form-vcard-org">
+	<div class="mb-3 form-vcard-org">
 		<input type="text" name="org" value="" placeholder="{{$org_label}}">
 		<i data-remove="vcard-org" data-id="" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 	</div>
 </div>
 
-<div id="template-form-vcard-title" class="form-group form-vcard-title">
-	<div class="form-group form-vcard-title">
+<div id="template-form-vcard-title" class="mb-3 form-vcard-title">
+	<div class="mb-3 form-vcard-title">
 		<input type="text" name="title" value="" placeholder="{{$title_label}}">
 		<i data-remove="vcard-title" data-id="" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 	</div>
 </div>
 
-<div id="template-form-vcard-tel" class="form-group form-vcard-tel">
+<div id="template-form-vcard-tel" class="mb-3 form-vcard-tel">
 	<select name="tel_type[]">
 		<option value="CELL">{{$mobile}}</option>
 		<option value="HOME">{{$home}}</option>
@@ -94,7 +94,7 @@ $(document).ready(function() {
 	<i data-remove="vcard-tel" data-id="" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 </div>
 
-<div id="template-form-vcard-email" class="form-group form-vcard-email">
+<div id="template-form-vcard-email" class="mb-3 form-vcard-email">
 	<select name="email_type[]">
 		<option value="HOME">{{$home}}</option>
 		<option value="WORK">{{$work}}</option>
@@ -104,7 +104,7 @@ $(document).ready(function() {
 	<i data-remove="vcard-email" data-id="" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 </div>
 
-<div id="template-form-vcard-impp" class="form-group form-vcard-impp">
+<div id="template-form-vcard-impp" class="mb-3 form-vcard-impp">
 	<select name="impp_type[]">
 		<option value="HOME">{{$home}}</option>
 		<option value="WORK">{{$work}}</option>
@@ -114,7 +114,7 @@ $(document).ready(function() {
 	<i data-remove="vcard-impp" data-id="" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 </div>
 
-<div id="template-form-vcard-url" class="form-group form-vcard-url">
+<div id="template-form-vcard-url" class="mb-3 form-vcard-url">
 	<select name="url_type[]">
 		<option value="HOME">{{$home}}</option>
 		<option value="WORK">{{$work}}</option>
@@ -124,8 +124,8 @@ $(document).ready(function() {
 	<i data-remove="vcard-url" data-id="" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 </div>
 
-<div id="template-form-vcard-adr" class="form-group form-vcard-adr">
-	<div class="form-group">
+<div id="template-form-vcard-adr" class="mb-3 form-vcard-adr">
+	<div class="mb-3">
 		<select name="adr_type[]">
 			<option value="HOME">{{$home}}</option>
 			<option value="WORK">{{$work}}</option>
@@ -134,30 +134,30 @@ $(document).ready(function() {
 		<label>{{$adr_label}}</label>
 		<i data-remove="vcard-adr" data-id="" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 	</div>
-	<div class="form-group">
+	<div class="mb-3">
 		<input type="text" name="" value="" placeholder="{{$po_box}}">
 	</div>
-	<div class="form-group">
+	<div class="mb-3">
 		<input type="text" name="" value="" placeholder="{{$extra}}">
 	</div>
-	<div class="form-group">
+	<div class="mb-3">
 		<input type="text" name="" value="" placeholder="{{$street}}">
 	</div>
-	<div class="form-group">
+	<div class="mb-3">
 		<input type="text" name="" value="" placeholder="{{$locality}}">
 	</div>
-	<div class="form-group">
+	<div class="mb-3">
 		<input type="text" name="" value="" placeholder="{{$region}}">
 	</div>
-	<div class="form-group">
+	<div class="mb-3">
 		<input type="text" name="" value="" placeholder="{{$zip_code}}">
 	</div>
-	<div class="form-group">
+	<div class="mb-3">
 		<input type="text" name="" value="" placeholder="{{$country}}">
 	</div>
 </div>
 
-<div id="template-form-vcard-note" class="form-group form-vcard-note">
+<div id="template-form-vcard-note" class="mb-3 form-vcard-note">
 	<label>{{$note_label}}</label>
 	<i data-remove="vcard-note" data-id="" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 	<textarea name="note" class="form-control"></textarea>
@@ -165,14 +165,14 @@ $(document).ready(function() {
 
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		<button type="button" class="btn btn-success btn-sm float-right" onclick="openClose('create_form')"><i class="fa fa-plus-circle"></i> {{$add_card}}</button>
+		<button type="button" class="btn btn-success btn-sm float-end" onclick="openClose('create_form')"><i class="fa fa-plus-circle"></i> {{$add_card}}</button>
 		<h2>{{$displayname}}</h2>
 	</div>
 	<div id="create_form" class="section-content-tools-wrapper">
 		<form id="card_form_new" method="post" action="">
 			<input type="hidden" name="target" value="{{$id}}">
-			<div class="dropdown pull-right">
-				<button data-toggle="dropdown" type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle"><i class="fa fa-plus"></i> {{$add_field}}</button>
+			<div class="dropdown float-end">
+				<button data-bs-toggle="dropdown" type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle"><i class="fa fa-plus"></i> {{$add_field}}</button>
 				<div class="dropdown-menu dropdown-menu-right">
 					<a class="dropdown-item add-vcard-org add-field" style="display: none" href="#" data-add="vcard-org" data-id="new">{{$org_label}}</a>
 					<a class="dropdown-item add-vcard-title add-field" style="display: none" href="#" data-add="vcard-title" data-id="new">{{$title_label}}</a>
@@ -185,35 +185,35 @@ $(document).ready(function() {
 				</div>
 			</div>
 
-			<div class="vcard-fn-create form-group">
+			<div class="vcard-fn-create mb-3">
 				<div class="form-vcard-fn-wrapper">
-					<div class="form-group form-vcard-fn">
+					<div class="mb-3 form-vcard-fn">
 						<div class="vcard-nophoto"><i class="fa fa-user"></i></div><input type="text" name="fn" value="" placeholder="{{$name_label}}">
 					</div>
 				</div>
 			</div>
 
-			<div class="vcard-org form-group">
+			<div class="vcard-org mb-3">
 				<div class="form-vcard-org-wrapper">
-					<div class="form-group form-vcard-org">
+					<div class="mb-3 form-vcard-org">
 						<input type="text" name="org" value="" placeholder="{{$org_label}}">
 						<i data-remove="vcard-org" data-id="new" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 					</div>
 				</div>
 			</div>
 
-			<div class="vcard-title form-group">
+			<div class="vcard-title mb-3">
 				<div class="form-vcard-title-wrapper">
-					<div class="form-group form-vcard-title">
+					<div class="mb-3 form-vcard-title">
 						<input type="text" name="title" value="" placeholder="{{$title_label}}">
 						<i data-remove="vcard-title" data-id="new" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 					</div>
 				</div>
 			</div>
 
-			<div class="vcard-tel form-group">
+			<div class="vcard-tel mb-3">
 				<div class="form-vcard-tel-wrapper">
-					<div class="form-group form-vcard-tel">
+					<div class="mb-3 form-vcard-tel">
 						<select name="tel_type[]">
 							<option value="CELL">{{$mobile}}</option>
 							<option value="HOME">{{$home}}</option>
@@ -227,9 +227,9 @@ $(document).ready(function() {
 			</div>
 
 
-			<div class="vcard-email form-group">
+			<div class="vcard-email mb-3">
 				<div class="form-vcard-email-wrapper">
-					<div class="form-group form-vcard-email">
+					<div class="mb-3 form-vcard-email">
 						<select name="email_type[]">
 							<option value="HOME">{{$home}}</option>
 							<option value="WORK">{{$work}}</option>
@@ -241,27 +241,27 @@ $(document).ready(function() {
 				</div>
 			</div>
 
-			<div class="vcard-impp form-group">
+			<div class="vcard-impp mb-3">
 				<div class="form-vcard-impp-wrapper">
 				</div>
 			</div>
 
-			<div class="vcard-url form-group">
+			<div class="vcard-url mb-3">
 				<div class="form-vcard-url-wrapper">
 				</div>
 			</div>
 
-			<div class="vcard-adr form-group">
+			<div class="vcard-adr mb-3">
 				<div class="form-vcard-adr-wrapper">
 				</div>
 			</div>
 
-			<div class="vcard-note form-group">
+			<div class="vcard-note mb-3">
 				<div class="form-vcard-note-wrapper">
 				</div>
 			</div>
 
-			<button type="submit" name="create" value="create_card" class="btn btn-primary btn-sm pull-right">{{$create}}</button>
+			<button type="submit" name="create" value="create_card" class="btn btn-primary btn-sm float-end">{{$create}}</button>
 			<button type="button" class="btn btn-outline-secondary btn-sm" onclick="openClose('create_form')">{{$cancel}}</button>
 			<div class="clear"></div>
 		</form>
@@ -273,8 +273,8 @@ $(document).ready(function() {
 		<input type="hidden" name="uri" value="{{$card.uri}}">
 		<div class="section-content-wrapper-np">
 			<div id="vcard-cancel-{{$card.id}}" class="vcard-cancel vcard-cancel-btn" data-id="{{$card.id}}" data-action="cancel"><i class="fa fa-close"></i></div>
-			<div id="vcard-add-field-{{$card.id}}" class="dropdown pull-right vcard-add-field">
-				<button data-toggle="dropdown" type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle"><i class="fa fa-plus"></i> {{$add_field}}</button>
+			<div id="vcard-add-field-{{$card.id}}" class="dropdown float-end vcard-add-field">
+				<button data-bs-toggle="dropdown" type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle"><i class="fa fa-plus"></i> {{$add_field}}</button>
 				<div class="dropdown-menu dropdown-menu-right">
 					<a class="dropdown-item add-vcard-org add-field"{{if $card.org}} style="display: none"{{/if}} href="#" data-add="vcard-org" data-id="{{$card.id}}">{{$org_label}}</a>
 					<a class="dropdown-item add-vcard-title add-field"{{if $card.title}} style="display: none"{{/if}} href="#" data-add="vcard-title" data-id="{{$card.id}}">{{$title_label}}</a>
@@ -298,10 +298,10 @@ $(document).ready(function() {
 		</div>
 		<div id="vcard-info-{{$card.id}}" class="vcard-info section-content-wrapper">
 
-			<div class="vcard-org form-group">
+			<div class="vcard-org mb-3">
 				<div class="form-vcard-org-wrapper">
 					{{if $card.org}}
-					<div class="form-group form-vcard-org">
+					<div class="mb-3 form-vcard-org">
 						<input type="text" name="org" value="{{$card.org}}" size="{{$card.org|count_characters:true}}" placeholder="{{$org_label}}">
 						<i data-remove="vcard-org" data-id="{{$card.id}}" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 					</div>
@@ -309,10 +309,10 @@ $(document).ready(function() {
 				</div>
 			</div>
 
-			<div class="vcard-title form-group">
+			<div class="vcard-title mb-3">
 				<div class="form-vcard-title-wrapper">
 					{{if $card.title}}
-					<div class="form-group form-vcard-title">
+					<div class="mb-3 form-vcard-title">
 						<input type="text" name="title" value="{{$card.title}}" size="{{$card.title|count_characters:true}}" placeholder="{{$title_label}}">
 						<i data-remove="vcard-title" data-id="{{$card.id}}" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 					</div>
@@ -321,11 +321,11 @@ $(document).ready(function() {
 			</div>
 
 
-			<div class="vcard-tel form-group">
+			<div class="vcard-tel mb-3">
 				<div class="form-vcard-tel-wrapper">
 					{{if $card.tels}}
 					{{foreach $card.tels as $tel}}
-					<div class="form-group form-vcard-tel">
+					<div class="mb-3 form-vcard-tel">
 						<select name="tel_type[]">
 							<option value=""{{if $tel.type.0 != 'CELL' && $tel.type.0 != 'HOME' && $tel.type.0 != 'WORK' && $tel.type.0 != 'OTHER'}} selected="selected"{{/if}}>{{$tel.type.1}}</option>
 							<option value="CELL"{{if $tel.type.0 == 'CELL'}} selected="selected"{{/if}}>{{$mobile}}</option>
@@ -342,11 +342,11 @@ $(document).ready(function() {
 			</div>
 
 
-			<div class="vcard-email form-group">
+			<div class="vcard-email mb-3">
 				<div class="form-vcard-email-wrapper">
 					{{if $card.emails}}
 					{{foreach $card.emails as $email}}
-					<div class="form-group form-vcard-email">
+					<div class="mb-3 form-vcard-email">
 						<select name="email_type[]">
 							<option value=""{{if $email.type.0 != 'HOME' && $email.type.0 != 'WORK' && $email.type.0 != 'OTHER'}} selected="selected"{{/if}}>{{$email.type.1}}</option>
 							<option value="HOME"{{if $email.type.0 == 'HOME'}} selected="selected"{{/if}}>{{$home}}</option>
@@ -361,11 +361,11 @@ $(document).ready(function() {
 				</div>
 			</div>
 
-			<div class="vcard-impp form-group">
+			<div class="vcard-impp mb-3">
 				<div class="form-vcard-impp-wrapper">
 					{{if $card.impps}}
 					{{foreach $card.impps as $impp}}
-					<div class="form-group form-vcard-impp">
+					<div class="mb-3 form-vcard-impp">
 						<select name="impp_type[]">
 							<option value=""{{if $impp.type.0 != 'HOME' && $impp.type.0 != 'WORK' && $impp.type.0 != 'OTHER'}} selected="selected"{{/if}}>{{$impp.type.1}}</option>
 							<option value="HOME"{{if $impp.type.0 == 'HOME'}} selected="selected"{{/if}}>{{$home}}</option>
@@ -380,11 +380,11 @@ $(document).ready(function() {
 				</div>
 			</div>
 
-			<div class="vcard-url form-group">
+			<div class="vcard-url mb-3">
 				<div class="form-vcard-url-wrapper">
 					{{if $card.urls}}
 					{{foreach $card.urls as $url}}
-					<div class="form-group form-vcard-url">
+					<div class="mb-3 form-vcard-url">
 						<select name="url_type[]">
 							<option value=""{{if $url.type.0 != 'HOME' && $url.type.0 != 'WORK' && $url.type.0 != 'OTHER'}} selected="selected"{{/if}}>{{$url.type.1}}</option>
 							<option value="HOME"{{if $url.type.0 == 'HOME'}} selected="selected"{{/if}}>{{$home}}</option>
@@ -399,12 +399,12 @@ $(document).ready(function() {
 				</div>
 			</div>
 
-			<div class="vcard-adr form-group">
+			<div class="vcard-adr mb-3">
 				<div class="form-vcard-adr-wrapper">
 					{{if $card.adrs}}
 					{{foreach $card.adrs as $adr}}
-					<div class="form-group form-vcard-adr">
-						<div class="form-group">
+					<div class="mb-3 form-vcard-adr">
+						<div class="mb-3">
 							<label>{{$adr_label}}</label>
 							<select name="adr_type[]">
 								<option value=""{{if $adr.type.0 != 'HOME' && $adr.type.0 != 'WORK' && $adr.type.0 != 'OTHER'}} selected="selected"{{/if}}>{{$adr.type.1}}</option>
@@ -414,25 +414,25 @@ $(document).ready(function() {
 							</select>
 							<i data-remove="vcard-adr" data-id="{{$card.id}}" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 						</div>
-						<div class="form-group">
+						<div class="mb-3">
 							<input type="text" name="adr[{{$adr@index}}][]" value="{{$adr.address.0}}" size="{{$adr.address.0|count_characters:true}}" placeholder="{{$po_box}}">
 						</div>
-						<div class="form-group">
+						<div class="mb-3">
 							<input type="text" name="adr[{{$adr@index}}][]" value="{{$adr.address.1}}" size="{{$adr.address.1|count_characters:true}}" placeholder="{{$extra}}">
 						</div>
-						<div class="form-group">
+						<div class="mb-3">
 							<input type="text" name="adr[{{$adr@index}}][]" value="{{$adr.address.2}}" size="{{$adr.address.2|count_characters:true}}" placeholder="{{$street}}">
 						</div>
-						<div class="form-group">
+						<div class="mb-3">
 							<input type="text" name="adr[{{$adr@index}}][]" value="{{$adr.address.3}}" size="{{$adr.address.3|count_characters:true}}" placeholder="{{$locality}}">
 						</div>
-						<div class="form-group">
+						<div class="mb-3">
 							<input type="text" name="adr[{{$adr@index}}][]" value="{{$adr.address.4}}" size="{{$adr.address.4|count_characters:true}}" placeholder="{{$region}}">
 						</div>
-						<div class="form-group">
+						<div class="mb-3">
 							<input type="text" name="adr[{{$adr@index}}][]" value="{{$adr.address.5}}" size="{{$adr.address.5|count_characters:true}}" placeholder="{{$zip_code}}">
 						</div>
-						<div class="form-group">
+						<div class="mb-3">
 							<input type="text" name="adr[{{$adr@index}}][]" value="{{$adr.address.6}}" size="{{$adr.address.6|count_characters:true}}" placeholder="{{$country}}">
 						</div>
 					</div>
@@ -441,7 +441,7 @@ $(document).ready(function() {
 				</div>
 			</div>
 
-			<div class="vcard-note form-group form-vcard-note">
+			<div class="vcard-note mb-3 form-vcard-note">
 				<div class="form-vcard-note-wrapper">
 					{{if $card.note}}
 					<label>{{$note_label}}</label>
@@ -452,7 +452,7 @@ $(document).ready(function() {
 			</div>
 
 
-			<button type="submit" name="update" value="update_card" class="btn btn-primary btn-sm pull-right">{{$update}}</button>
+			<button type="submit" name="update" value="update_card" class="btn btn-primary btn-sm float-end">{{$update}}</button>
 			<button type="submit" name="delete" value="delete_card" class="btn btn-danger btn-sm">{{$delete}}</button>
 			<button type="button" class="btn btn-outline-secondary btn-sm vcard-cancel-btn" data-id="{{$card.id}}" data-action="cancel">{{$cancel}}</button>
 			<div class="clear"></div>
diff --git a/view/tpl/cdav_calendar.tpl b/view/tpl/cdav_calendar.tpl
index 28cd11b2e..b2df9d892 100644
--- a/view/tpl/cdav_calendar.tpl
+++ b/view/tpl/cdav_calendar.tpl
@@ -114,7 +114,7 @@ $(document).ready(function() {
 
 			if(event.extendedProps.plink) {
 				if(! $('#l2s').length)
-					$('#id_title_wrapper').prepend('<span id="l2s" class="float-right"></span>');
+					$('#id_title_wrapper').prepend('<span id="l2s" class="float-end"></span>');
 
 				$('#l2s').html('<a href="' + event.extendedProps.plink[0] + '" target="_blank"><i class="fa fa-external-link"></i> ' + event.extendedProps.plink[1] + '</a>');
 			}
@@ -358,7 +358,7 @@ $(document).ready(function() {
 	if(resource !== null) {
 		$('.section-content-tools-wrapper, #event_form_wrapper').show();
 
-		$('#id_title_wrapper').prepend('<span id="l2s" class="float-right"></span>');
+		$('#id_title_wrapper').prepend('<span id="l2s" class="float-end"></span>');
 		$('#l2s').html('<a href="' + resource.plink[0] + '" target="_blank"><i class="fa fa-external-link"></i> ' + resource.plink[1] + '</a>');
 
 		event_id = resource.id;
@@ -573,9 +573,9 @@ function exportDate() {
 
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		<div class="float-right">
+		<div class="float-end">
 			<div class="dropdown">
-				<button id="view_selector" type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown"></button>
+				<button id="view_selector" type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown"></button>
 				<div class="dropdown-menu">
 					<a class="dropdown-item" href="#" onclick="changeView('dayGridMonth'); return false;">{{$month}}</a></li>
 					<a class="dropdown-item" href="#" onclick="changeView('timeGridWeek'); return false;">{{$week}}</a></li>
@@ -611,7 +611,7 @@ function exportDate() {
 			<form id="event_form" method="post" action="" class="acl-form" data-form_id="event_form" data-allow_cid='{{$allow_cid}}' data-allow_gid='{{$allow_gid}}' data-deny_cid='{{$deny_cid}}' data-deny_gid='{{$deny_gid}}'>
 				{{include file="field_input.tpl" field=$title}}
 				<label for="calendar_select">{{$calendar_select_label}}</label>
-				<select id="calendar_select" name="target" class="form-control form-group">
+				<select id="calendar_select" name="target" class="form-control mb-3">
 					<optgroup label="{{$calendar_optiopns_label.0}}">
 					{{foreach $channel_calendars as $channel_calendar}}
 					<option value="channel_calendar">{{$channel_calendar.displayname}}</option>
@@ -628,7 +628,7 @@ function exportDate() {
 				{{/if}}
 				<div id="more_block" style="display: none;">
 					{{if $catsenabled}}
-					<div id="id_categories_wrapper" class="form-group">
+					<div id="id_categories_wrapper" class="mb-3">
 						<label id="label_categories" for="id_categories">{{$categories_label}}</label>
 						<input name="categories" id="id_categories" class="form-control" type="text" value="{{$categories}}" data-role="cat-tagsinput" />
 					</div>
@@ -638,10 +638,10 @@ function exportDate() {
 					{{include file="field_textarea.tpl" field=$description}}
 					{{include file="field_textarea.tpl" field=$location}}
 				</div>
-				<div class="form-group">
-					<div class="pull-right">
+				<div class="mb-3">
+					<div class="float-end">
 						<button id="event_more" type="button" class="btn btn-outline-secondary btn-sm"><i class="fa fa-caret-down"></i> {{$more}}</button>
-						<button id="dbtn-acl" class="btn btn-outline-secondary btn-sm d-none" type="button" data-toggle="modal" data-target="#aclModal"><i id="jot-perms-icon" class="fa fa-{{$lockstate}}"></i></button>
+						<button id="dbtn-acl" class="btn btn-outline-secondary btn-sm d-none" type="button" data-bs-toggle="modal" data-bs-target="#aclModal"><i id="jot-perms-icon" class="fa fa-{{$lockstate}}"></i></button>
 						<button id="event_submit" type="button" value="" class="btn btn-primary btn-sm"></button>
 
 					</div>
diff --git a/view/tpl/cdav_widget_addressbook.tpl b/view/tpl/cdav_widget_addressbook.tpl
index 80b5feaf6..fdaa26710 100644
--- a/view/tpl/cdav_widget_addressbook.tpl
+++ b/view/tpl/cdav_widget_addressbook.tpl
@@ -2,9 +2,9 @@
 	<h3>{{$addressbooks_label}}</h3>
 	{{foreach $addressbooks as $addressbook}}
 	<div id="addressbook-{{$addressbook.id}}" class="ml-3">
-		<div class="form-group">
+		<div class="mb-3">
 			<i class="fa fa-user generic-icons"></i><a href="/cdav/addressbook/{{$addressbook.id}}">{{$addressbook.displayname}}</a>
-			<div class="float-right">
+			<div class="float-end">
 				<i id="edit-icon" class="fa fa-pencil fakelink generic-icons" onclick="openClose('edit-addressbook-{{$addressbook.id}}')"></i>
 				<a href="/cdav/addressbooks/{{$addressbook.ownernick}}/{{$addressbook.uri}}/?export"><i id="download-icon" class="fa fa-cloud-download fakelink generic-icons"></i></a>
 				<a href="#" onclick="dropItem('/cdav/addressbook/drop/{{$addressbook.id}}', '#addressbook-{{$addressbook.id}}'); return false;"><i class="fa fa-trash-o drop-icons"></i></a>
@@ -13,11 +13,11 @@
 		<div id="edit-addressbook-{{$addressbook.id}}" class="sub-menu" style="display: none;">
 			<form id="edit-addressbook-{{$addressbook.id}}" method="post" action="">
 				<label for="edit-{{$addressbook.id}}">{{$edit_label}}</label>
-				<div id="edit-form-{{$addressbook.id}}" class="form-group">
+				<div id="edit-form-{{$addressbook.id}}" class="mb-3">
 					<input id="id-{{$addressbook.id}}" name="id" type="hidden" value="{{$addressbook.id}}">
 					<input id="edit-{{$addressbook.id}}" name="{DAV:}displayname" type="text" value="{{$addressbook.displayname}}" class="form-control">
 				</div>
-				<div class="form-group">
+				<div class="mb-3">
 					<button type="submit" name="edit" value="edit" class="btn btn-primary btn-sm">{{$edit}}</button>
 				</div>
 			</form>
@@ -35,8 +35,8 @@
 		<div id="create-addressbook" class="sub-menu-wrapper">
 			<div class="sub-menu">
 				<form method="post" action="">
-					<div class="form-group">
-						<input id="create" name="{DAV:}displayname" type="text" placeholder="{{$create_placeholder}}" class="form-control form-group">
+					<div class="mb-3">
+						<input id="create" name="{DAV:}displayname" type="text" placeholder="{{$create_placeholder}}" class="form-control mb-3">
 						<button type="submit" name="create" value="create" class="btn btn-primary btn-sm">{{$create}}</button>
 					</div>
 				</form>
@@ -48,7 +48,7 @@
 		<div id="upload-form" class="sub-menu-wrapper">
 			<div class="sub-menu">
 				<form enctype="multipart/form-data" method="post" action="">
-					<div class="form-group">
+					<div class="mb-3">
 						<select id="import" name="target" class="form-control">
 							<option value="">{{$import_placeholder}}</option>
 							{{foreach $addressbooks as $addressbook}}
@@ -56,7 +56,7 @@
 							{{/foreach}}
 						</select>
 					</div>
-					<div class="form-group">
+					<div class="mb-3">
 						<input class="form-control-file w-100" id="addressbook-upload-choose" type="file" name="userfile" />
 					</div>
 					<button class="btn btn-primary btn-sm" type="submit" name="a_upload" value="a_upload">{{$upload}}</button>
diff --git a/view/tpl/cdav_widget_calendar.tpl b/view/tpl/cdav_widget_calendar.tpl
index 93ff50fd3..878221bf1 100644
--- a/view/tpl/cdav_widget_calendar.tpl
+++ b/view/tpl/cdav_widget_calendar.tpl
@@ -2,9 +2,9 @@
 	<h3>{{$channel_calendars_label}}</h3>
 	{{foreach $channel_calendars as $channel_calendar}}
 	<div id="calendar-{{$channel_calendar.calendarid}}">
-		<div class="ml-3{{if !$channel_calendar@last}} form-group{{/if}}">
+		<div class="ml-3{{if !$channel_calendar@last}} mb-3{{/if}}">
 			<i id="calendar-btn-{{$channel_calendar.calendarid}}" class="fa {{if $channel_calendar.switch}}fa-calendar-check-o{{else}}fa-calendar-o{{/if}} generic-icons fakelink" onclick="add_remove_json_source('{{$channel_calendar.json_source}}', '{{$channel_calendar.color}}', {{$channel_calendar.editable}})" style="color: {{$channel_calendar.color}};"></i>{{$channel_calendar.displayname}}
-			<div class="float-right">
+			<div class="float-end">
 				<a href="#" onclick="exportDate(); return false;"><i id="download-icon" class="fa fa-cloud-download fakelink generic-icons-right"></i></a>
 			</div>
 		</div>
@@ -17,9 +17,9 @@
 	<h3>{{$my_calendars_label}}</h3>
 	{{foreach $my_calendars as $calendar}}
 	<div id="calendar-{{$calendar.calendarid}}">
-		<div class="ml-3{{if !$calendar@last}} form-group{{/if}}">
+		<div class="ml-3{{if !$calendar@last}} mb-3{{/if}}">
 			<i id="calendar-btn-{{$calendar.calendarid}}" class="fa {{if $calendar.switch}}fa-calendar-check-o{{else}}fa-calendar-o{{/if}} generic-icons fakelink" onclick="add_remove_json_source('{{$calendar.json_source}}', '{{$calendar.color}}', {{$calendar.editable}})" style="color: {{$calendar.color}};"></i>{{$calendar.displayname}}
-			<div class="float-right">
+			<div class="float-end">
 				<i id="edit-icon" class="fa fa-pencil fakelink generic-icons" onclick="openClose('edit-calendar-{{$calendar.calendarid}}')"></i>
 				<a href="/cdav/calendars/{{$calendar.ownernick}}/{{$calendar.uri}}/?export"><i id="download-icon" class="fa fa-cloud-download fakelink generic-icons"></i></a>
 				<i id="share-icon" class="fa fa-share-alt fakelink generic-icons" onclick="openClose('share-calendar-{{$calendar.calendarid}}')"></i>
@@ -28,9 +28,9 @@
 			<div id="share-calendar-{{$calendar.calendarid}}" class="sub-menu" style="display: none; border-color: {{$calendar.color}};">
 				{{if $calendar.sharees}}
 				{{foreach $calendar.sharees as $sharee}}
-				<div id="sharee-{{$calendar.calendarid}}-{{$sharee@iteration}}" class="form-group">
+				<div id="sharee-{{$calendar.calendarid}}-{{$sharee@iteration}}" class="mb-3">
 					<i class="fa fa-share generic-icons"></i>{{$sharee.name}}&nbsp;{{$sharee.access}}
-					<div class="pull-right">
+					<div class="float-end">
 						<a href="#" onclick="dropItem('/cdav/calendar/dropsharee/{{$calendar.calendarid}}/{{$calendar.instanceid}}/{{$sharee.hash}}', '#sharee-{{$calendar.calendarid}}-{{$sharee@iteration}}'); return false;"><i class="fa fa-trash-o drop-icons"></i></a>
 					</div>
 				</div>
@@ -40,17 +40,17 @@
 					<label for="share-{{$calendar.calendarid}}">{{$share_label}}</label>
 					<input name="calendarid" type="hidden" value="{{$calendar.calendarid}}">
 					<input name="instanceid" type="hidden" value="{{$calendar.instanceid}}">
-					<div class="form-group">
+					<div class="mb-3">
 						<select id="share-{{$calendar.calendarid}}" name="sharee" class="form-control">
 							{{$sharee_options}}
 						</select>
 					</div>
-					<div class="form-group">
+					<div class="mb-3">
 						<select name="access" class="form-control">
 							{{$access_options}}
 						</select>
 					</div>
-					<div class="form-group">
+					<div class="mb-3">
 						<button type="submit" name="share" value="share" class="btn btn-primary btn-sm">{{$share}}</button>
 					</div>
 				</form>
@@ -60,13 +60,13 @@
 					<input id="id-{{$calendar.calendarid}}" name="id" type="hidden" value="{{$calendar.calendarid}}:{{$calendar.instanceid}}">
 					<input id="color-{{$calendar.calendarid}}" name="color" type="hidden" value="{{$calendar.color}}" class="color-edit-input">
 					<label for="edit-form-{{$calendar.calendarid}}">{{$edit_label}}</label>
-					<div id="edit-form-{{$calendar.calendarid}}" class="input-group form-group">
+					<div id="edit-form-{{$calendar.calendarid}}" class="input-group mb-3">
 						<input id="create-{{$calendar.calendarid}}" name="{DAV:}displayname" type="text" value="{{$calendar.displayname}}" class="form-control">
 						<div class="input-group-append">
 							<div class="input-group-addon p-3"></div>
 						</div>
 					</div>
-					<div class="form-group">
+					<div class="mb-3">
 						<button type="submit" name="edit" value="edit" class="btn btn-primary btn-sm">{{$edit}}</button>
 					</div>
 				</form>
@@ -81,9 +81,9 @@
 <div class="widget">
 	<h3>{{$shared_calendars_label}}</h3>
 	{{foreach $shared_calendars as $calendar}}
-	<div id="shared-calendar-{{$calendar.calendarid}}" class="ml-3{{if !$calendar@last}} form-group{{/if}}">
+	<div id="shared-calendar-{{$calendar.calendarid}}" class="ml-3{{if !$calendar@last}} mb-3{{/if}}">
 		<i id="calendar-btn-{{$calendar.calendarid}}" class="fa {{if $calendar.switch}}{{if $calendar.access == 'read-write'}}fa-calendar-check-o{{else}}fa-calendar-times-o{{/if}}{{else}}fa-calendar-o{{/if}} generic-icons fakelink" onclick="add_remove_json_source('{{$calendar.json_source}}', '{{$calendar.color}}', {{$calendar.editable}}, {{if $calendar.access == 'read-write'}}'fa-calendar-check-o'{{else}}'fa-calendar-times-o'{{/if}})"  style="color: {{$calendar.color}};"></i>{{$calendar.displayname}} ({{$calendar.sharer}})
-		<div class="pull-right">
+		<div class="float-end">
 			<a href="/cdav/calendars/{{$calendar.ownernick}}/{{$calendar.uri}}/?export"><i id="download-icon" class="fa fa-cloud-download fakelink generic-icons"></i></a>
 			<a href="#" onclick="var drop = dropItem('/cdav/calendar/drop/{{$calendar.calendarid}}/{{$calendar.instanceid}}', '#shared-calendar-{{$calendar.calendarid}}'); if(drop) { add_remove_json_source('{{$calendar.json_source}}', '{{$calendar.color}}', {{$calendar.editable}}, 'drop'); } return false;"><i class="fa fa-trash-o drop-icons"></i></a>
 		</div>
@@ -102,13 +102,13 @@
 			<div class="sub-menu">
 				<form method="post" action="" class="colorpicker-component color-edit">
 					<input id="color" name="color" type="hidden" value="#ff8f00" class="color-edit-input">
-					<div id="create-form" class="input-group form-group">
+					<div id="create-form" class="input-group mb-3">
 						<input id="create" name="{DAV:}displayname" type="text" placeholder="{{$create_placeholder}}" class="form-control">
 						<div class="input-group-append">
 							<div class="input-group-addon p-3"></div>
 						</div>
 					</div>
-					<div class="form-group">
+					<div class="mb-3">
 						<button type="submit" name="create" value="create" class="btn btn-primary btn-sm">{{$create}}</button>
 					</div>
 				</form>
@@ -120,7 +120,7 @@
 		<div id="upload-form" class="sub-menu-wrapper">
 			<div class="sub-menu">
 				<form enctype="multipart/form-data" method="post" action="">
-					<div class="form-group">
+					<div class="mb-3">
 						<select id="import" name="target" class="form-control">
 							<option value="">{{$import_placeholder}}</option>
 							<optgroup label="{{$tools_options_label.0}}">
@@ -131,7 +131,7 @@
 							{{/foreach}}
 						</select>
 					</div>
-					<div class="form-group">
+					<div class="mb-3">
 						<input class="form-control-file w-100" id="event-upload-choose" type="file" name="userfile" />
 					</div>
 					<button class="btn btn-primary btn-sm" type="submit" name="c_upload" value="c_upload">{{$upload}}</button>
diff --git a/view/tpl/channel.tpl b/view/tpl/channel.tpl
index 0ff52831d..04278fbf4 100644
--- a/view/tpl/channel.tpl
+++ b/view/tpl/channel.tpl
@@ -1,5 +1,5 @@
 <div class="section-subtitle-wrapper">
-	<div class="pull-right">
+	<div class="float-end">
 		{{if $channel.default_links}}
 		{{if $channel.default}}
 		<div>
diff --git a/view/tpl/channel_rename.tpl b/view/tpl/channel_rename.tpl
index 9948dc647..6df416a44 100644
--- a/view/tpl/channel_rename.tpl
+++ b/view/tpl/channel_rename.tpl
@@ -8,7 +8,7 @@
 	<div class="section-content-tools-wrapper">
 		<form action="{{$basedir}}/changeaddr" autocomplete="off" method="post" >
 			<input type="hidden" name="verify" value="{{$hash}}" />
-			<div class="form-group" id="rename-channel-pass-wrapper">
+			<div class="mb-3" id="rename-channel-pass-wrapper">
 				<label id="rename-channel-pass-label" for="rename-channel-pass">{{$passwd}}</label>
 				<input class="form-control" type="password" id="rename-channel-pass" autocomplete="off" name="qxz_password" value=" " />
 			</div>
diff --git a/view/tpl/channels.tpl b/view/tpl/channels.tpl
index 695b3b30f..60bc85933 100644
--- a/view/tpl/channels.tpl
+++ b/view/tpl/channels.tpl
@@ -1,6 +1,6 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		<a class="btn btn-success btn-sm pull-right" href="{{$create.0}}" title="{{$create.1}}"><i class="fa fa-plus-circle"></i>&nbsp;{{$create.2}}</a>
+		<a class="btn btn-success btn-sm float-end" href="{{$create.0}}" title="{{$create.1}}"><i class="fa fa-plus-circle"></i>&nbsp;{{$create.2}}</a>
 		<h2>{{$header}}</h2>
 	</div>
 	<div class="section-content-wrapper-np">
diff --git a/view/tpl/chat.tpl b/view/tpl/chat.tpl
index 7ef957b7e..7e09b2071 100644
--- a/view/tpl/chat.tpl
+++ b/view/tpl/chat.tpl
@@ -1,6 +1,6 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		<div class="pull-right">
+		<div class="float-end">
 			{{if $is_owner}}
 			<form id="chat-destroy" method="post" action="chat">
 				<input type="hidden" name="room_name" value="{{$room_name}}" />
@@ -25,12 +25,12 @@
 		<div id="chatBottomBar" >
 			<form id="chat-form" method="post" action="#">
 				<input type="hidden" name="room_id" value="{{$room_id}}" />
-				<div class="form-group">
+				<div class="mb-3">
 					<textarea id="chatText" name="chat_text" class="form-control"></textarea>
 				</div>
 				<div id="chat-submit-wrapper" class="clearfix">
-					<div id="chat-submit" class="dropup pull-right">
-						<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-cog"></i></button>
+					<div id="chat-submit" class="dropup float-end">
+						<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown"><i class="fa fa-cog"></i></button>
 						<button class="btn btn-primary btn-sm" type="submit" id="chat-submit" name="submit" value="{{$submit}}">{{$submit}}</button>
 						<div class="dropdown-menu dropdown-menu-right">
 							<a class="dropdown-item" href="{{$baseurl}}/chatsvc?f=&room_id={{$room_id}}&status=online"><i class="fa fa-circle online"></i>&nbsp;{{$online}}</a>
@@ -46,7 +46,7 @@
 						</div>
 					</div>
 					<div id="chat-tools" class="btn-toolbar">
-						<div class="btn-group mr-2">
+						<div class="btn-group me-2">
 							<button id="main-editor-bold" class="btn btn-outline-secondary btn-sm" title="{{$bold}}" onclick="inserteditortag('b', 'chatText'); return false;">
 								<i class="fa fa-bold jot-icons"></i>
 							</button>
@@ -63,20 +63,20 @@
 								<i class="fa fa-terminal jot-icons"></i>
 							</button>
 						</div>
-						<div class="btn-group mr-2 d-none d-md-flex">
+						<div class="btn-group me-2 d-none d-md-flex">
 							<button id="chat-link-wrapper" class="btn btn-outline-secondary btn-sm" onclick="chatJotGetLink(); return false;" >
 								<i id="chat-link" class="fa fa-link jot-icons" title="{{$insert}}" ></i>
 							</button>
 						</div>
 						{{if $feature_encrypt}}
-						<div class="btn-group mr-2 d-none d-md-flex">
+						<div class="btn-group me-2 d-none d-md-flex">
 							<button id="chat-encrypt-wrapper" class="btn btn-outline-secondary btn-sm" onclick="hz_encrypt('{{$cipher}}', '#chatText'); return false;">
 								<i id="chat-encrypt" class="fa fa-key jot-icons" title="{{$encrypt}}" ></i>
 							</button>
 						</div>
 						{{/if}}
 						<div class="btn-group dropup d-md-none">
-							<button type="button" id="more-tools" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+							<button type="button" id="more-tools" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
 								<i id="more-tools-icon" class="fa fa-cog jot-icons"></i>
 							</button>
 							<div class="dropdown-menu">
diff --git a/view/tpl/chatroom_new.tpl b/view/tpl/chatroom_new.tpl
index 1497939f6..2977563f9 100644
--- a/view/tpl/chatroom_new.tpl
+++ b/view/tpl/chatroom_new.tpl
@@ -2,8 +2,8 @@
 	<form id="chatroom-new-form" action="chat" method="post" class="acl-form" data-form_id="chatroom-new-form" data-allow_cid='{{$allow_cid}}' data-allow_gid='{{$allow_gid}}' data-deny_cid='{{$deny_cid}}' data-deny_gid='{{$deny_gid}}'>
 		{{include file="field_input.tpl" field=$name}}
 		{{include file="field_input.tpl" field=$chat_expire}}
-		<div class="btn-group pull-right">
-			<button id="dbtn-acl" class="btn btn-outline-secondary" data-toggle="modal" data-target="#aclModal" title="{{$permissions}}" onclick="return false;" ><i id="jot-perms-icon" class="fa fa-{{$lockstate}}"></i></button>
+		<div class="btn-group float-end">
+			<button id="dbtn-acl" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#aclModal" title="{{$permissions}}" onclick="return false;" ><i id="jot-perms-icon" class="fa fa-{{$lockstate}}"></i></button>
 			<button id="dbtn-submit" class="acl-submit btn btn-primary" type="submit" name="submit" value="{{$submit}}" data-formid="chatroom-new-form">{{$submit}}</button>
 		</div>
 		<div class="clear"></div>
diff --git a/view/tpl/chatroomlist.tpl b/view/tpl/chatroomlist.tpl
index a81b8ec1e..c7f2c2c6f 100644
--- a/view/tpl/chatroomlist.tpl
+++ b/view/tpl/chatroomlist.tpl
@@ -3,7 +3,7 @@
 	<ul class="nav nav-pills flex-column">
 		<li class="nav-item"><a class="nav-link" href="{{$baseurl}}/chat/{{$nickname}}">{{$overview}}</a></li>
 		{{foreach $items as $item}}
-		<li class="nav-item"><a class="nav-link" href="{{$baseurl}}/chat/{{$nickname}}/{{$item.cr_id}}"><span class="badge pull-right">{{$item.cr_inroom}}</span>{{$item.cr_name}}</a></li>
+		<li class="nav-item"><a class="nav-link" href="{{$baseurl}}/chat/{{$nickname}}/{{$item.cr_id}}"><span class="badge float-end">{{$item.cr_inroom}}</span>{{$item.cr_name}}</a></li>
 		{{/foreach}}
 	</ul>
 </div>
diff --git a/view/tpl/chatrooms.tpl b/view/tpl/chatrooms.tpl
index 0e6847608..d1151fffe 100644
--- a/view/tpl/chatrooms.tpl
+++ b/view/tpl/chatrooms.tpl
@@ -1,7 +1,7 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper clearfix">
 		{{if $is_owner}}
-		<button type="button" class="btn btn-success btn-sm pull-right acl-form-trigger" onclick="openClose('chatroom-new');" data-form_id="chatroom-new-form"><i class="fa fa-plus-circle"></i>&nbsp;{{$newroom}}</button>
+		<button type="button" class="btn btn-success btn-sm float-end acl-form-trigger" onclick="openClose('chatroom-new');" data-form_id="chatroom-new-form"><i class="fa fa-plus-circle"></i>&nbsp;{{$newroom}}</button>
 		{{/if}}
 		<h2>{{$header}}</h2>
 	</div>
@@ -21,9 +21,9 @@
 			<tr class="chatroom-index-row">
 				<td><a href="{{$baseurl}}/chat/{{$nickname}}/{{$room.cr_id}}">{{$room.cr_name}}</a></td>
 				<td>{{$room.cr_expire}}&nbsp;min</td>
-				<td class="chatrooms-index-tool{{if $room.allow_cid || $room.allow_gid || $room.deny_cid || $room.deny_gid}} dropdown float-right{{/if}}">
+				<td class="chatrooms-index-tool{{if $room.allow_cid || $room.allow_gid || $room.deny_cid || $room.deny_gid}} dropdown float-end{{/if}}">
 					{{if $room.allow_cid || $room.allow_gid || $room.deny_cid || $room.deny_gid}}
-					<i class="fa fa-lock lockview" data-toggle="dropdown" onclick="lockview('chatroom',{{$room.cr_id}});"></i>
+					<i class="fa fa-lock lockview" data-bs-toggle="dropdown" onclick="lockview('chatroom',{{$room.cr_id}});"></i>
 					<ul id="panel-{{$room.cr_id}}" class="lockview-panel dropdown-menu"></ul>
 					{{/if}}
 				</td>
diff --git a/view/tpl/cloud_actionspanel.tpl b/view/tpl/cloud_actionspanel.tpl
index 8cab175ff..53e509a83 100644
--- a/view/tpl/cloud_actionspanel.tpl
+++ b/view/tpl/cloud_actionspanel.tpl
@@ -6,15 +6,15 @@
 			<input type="hidden" name="folder" value="{{$folder}}" />
 			<input type="hidden" name="channick" value="{{$channick}}" />
 			<input type="hidden" name="return_url" value="{{$return_url}}" />
-			<input id="files-mkdir" type="text" name="filename" class="form-control form-group">
-			<div class="pull-right btn-group">
+			<input id="files-mkdir" type="text" name="filename" class="form-control mb-3">
+			<div class="float-end btn-group">
 				<div class="btn-group">
 					{{if $lockstate}}
-					<button class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#aclModal" type="button">
+					<button class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#aclModal" type="button">
 						<i class="jot-perms-icon fa fa-{{$lockstate}}"></i>
 					</button>
 					{{/if}}
-					<button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$folder_submit}}">{{$folder_submit}}</button>
+					<button class="btn btn-primary btn-sm float-end" type="submit" value="{{$folder_submit}}">{{$folder_submit}}</button>
 				</div>
 			</div>
 		</form>
@@ -33,14 +33,14 @@
 			<div class="cloud-index attach-drop attach-drop-zone text-center p-4 mb-3" data-folder="{{$folder}}">
 				<span class="text-muted">{{$drop_area_label}}</span>
 			</div>
-			<div class="pull-right btn-group">
+			<div class="float-end btn-group">
 				<div class="btn-group">
 					{{if $lockstate}}
-					<button class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#aclModal" type="button">
+					<button class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#aclModal" type="button">
 						<i class="jot-perms-icon fa fa-{{$lockstate}}"></i>
 					</button>
 					{{/if}}
-					<button id="upload-submit" class="btn btn-primary btn-sm pull-right">{{$upload_submit}}</button>
+					<button id="upload-submit" class="btn btn-primary btn-sm float-end">{{$upload_submit}}</button>
 				</div>
 			</div>
 		</form>
diff --git a/view/tpl/cloud_directory.tpl b/view/tpl/cloud_directory.tpl
index ac8304b96..a587c6cf2 100644
--- a/view/tpl/cloud_directory.tpl
+++ b/view/tpl/cloud_directory.tpl
@@ -74,7 +74,7 @@
 			<td colspan="3">
 				{{if $is_owner}}
 				<div class="dropdown">
-					<button class="btn btn-warning btn-sm" id="multi-dropdown-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+					<button class="btn btn-warning btn-sm" id="multi-dropdown-button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 						<i class="fa fa-fw fa-ellipsis-v d-table-cell"></i><span class="d-none d-md-table-cell">{{$bulk_actions_label}}</span>
 					</button>
 					<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-button">
@@ -89,7 +89,7 @@
 				</div>
 				{{else if $is_admin}}
 				<div class="dropdown">
-					<button class="btn btn-warning btn-sm" id="multi-dropdown-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+					<button class="btn btn-warning btn-sm" id="multi-dropdown-button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 						<i class="fa fa-fw fa-ellipsis-v d-table-cell"></i><span class="d-none d-md-table-cell">{{$bulk_actions_label}}</span>
 					</button>
 					<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-button">
@@ -116,13 +116,13 @@
 						{{if $is_owner}}
 						{{include file="field_checkbox.tpl" field=$recurse}}
 						{{/if}}
-						<div id="attach-multi-submit" class="form-group">
+						<div id="attach-multi-submit" class="mb-3">
 							<button id="cloud-multi-tool-cancel-btn" class="btn btn-outline-secondary btn-sm cloud-multi-tool-cancel-btn" type="button">
 									{{$cancel_label}}
 							</button>
-							<div id="attach-multi-edit-perms" class="btn-group float-right">
+							<div id="attach-multi-edit-perms" class="btn-group float-end">
 								{{if $is_owner}}
-								<button id="multi-dbtn-acl" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#aclModal" title="{{$permset}}" type="button">
+								<button id="multi-dbtn-acl" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#aclModal" title="{{$permset}}" type="button">
 									<i id="multi-jot-perms-icon" class="fa fa-{{$lockstate}} jot-icons jot-perms-icon"></i>
 								</button>
 								{{/if}}
@@ -151,14 +151,14 @@
 			<td>{{$item.terms}}</td>
 			<td class="cloud-index-tool p-2">
 				{{if $item.lockstate == 'lock'}}
-				<i class="fa fa-lock lockview" data-toggle="dropdown" onclick="lockview('attach',{{$item.attach_id}});"></i>
+				<i class="fa fa-lock lockview" data-bs-toggle="dropdown" onclick="lockview('attach',{{$item.attach_id}});"></i>
 				<ul id="panel-{{$item.attach_id}}" class="lockview-panel dropdown-menu dropdown-menu-right"></ul>
 				{{/if}}
 			</td>
 			<td class="cloud-index-tool">
 				{{if ($is_owner || $item.is_creator) && $item.attach_id}}
 				<div class="dropdown">
-					<button class="btn btn-link btn-sm" id="dropdown-button-{{$item.attach_id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+					<button class="btn btn-link btn-sm" id="dropdown-button-{{$item.attach_id}}" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 						<i class="fa fa-fw fa-ellipsis-v"></i>
 					</button>
 					<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-button-{{$item.attach_id}}">
@@ -183,7 +183,7 @@
 				{{else}}
 				{{if $is_admin || $item.attach_id}}
 				<div class="dropdown">
-					<button class="btn btn-link btn-sm" id="dropdown-button-{{$item.attach_id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+					<button class="btn btn-link btn-sm" id="dropdown-button-{{$item.attach_id}}" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 						<i class="fa fa-fw fa-ellipsis-v"></i>
 					</button>
 					<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-button-{{$item.attach_id}}">
@@ -214,22 +214,22 @@
 					</div>
 					<div id="cloud-tool-info-{{$item.attach_id}}" class="cloud-tool">
 						{{if ! $item.collection}}
-						<div class="form-group">
+						<div class="mb-3">
 							<label for="attach-code-input-{{$item.attach_id}}">{{$attach_bbcode_label}}</label>
 							<input type="text" class="form-control" id="attach-code-input-{{$item.attach_id}}" name="attach-code-input-{{$item.attach_id}}" value="{{$item.attach_bbcode}}" onclick="this.select();" />
 						</div>
 						{{if $item.embed_bbcode}}
-						<div class="form-group">
+						<div class="mb-3">
 							<label for="embed-code-input-{{$item.attach_id}}">{{$embed_bbcode_label}}</label>
 							<input type="text" class="form-control" id="embed-code-input-{{$item.attach_id}}" name="embed-code-input-{{$item.attach_id}}" value="{{$item.embed_bbcode}}" onclick="this.select();" />
 						</div>
 						{{/if}}
 						{{/if}}
-						<div class="form-group">
+						<div class="mb-3">
 							<label for="link-code-input-{{$item.attach_id}}">{{$link_bbcode_label}}</label>
 							<input type="text" class="form-control" id="link-code-input-{{$item.attach_id}}" name="link-code-input-{{$item.attach_id}}" value="{{$item.link_bbcode}}" onclick="this.select();" />
 						</div>
-						<div class="form-group">
+						<div class="mb-3">
 							<button id="cloud-tool-close-btn-{{$item.attach_id}}" class="btn btn-outline-secondary btn-sm cloud-tool-cancel-btn" type="button" data-id="{{$item.attach_id}}">
 								{{$close_label}}
 							</button>
@@ -247,13 +247,13 @@
 						{{if !$item.collection}}{{include file="field_checkbox.tpl" field=$item.notify}}{{/if}}
 						{{if $item.collection}}{{include file="field_checkbox.tpl" field=$item.recurse}}{{/if}}
 						{{/if}}
-						<div id="attach-submit-{{$item.attach_id}}" class="form-group">
+						<div id="attach-submit-{{$item.attach_id}}" class="mb-3">
 							<button id="cloud-tool-cancel-btn-{{$item.attach_id}}" class="btn btn-outline-secondary btn-sm cloud-tool-cancel-btn" type="button" data-id="{{$item.attach_id}}">
 									{{$cancel_label}}
 							</button>
-							<div id="attach-edit-perms-{{$item.attach_id}}" class="btn-group float-right">
+							<div id="attach-edit-perms-{{$item.attach_id}}" class="btn-group float-end">
 								{{if $is_owner}}
-								<button id="dbtn-acl-{{$item.attach_id}}" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#aclModal" title="{{$permset}}" type="button">
+								<button id="dbtn-acl-{{$item.attach_id}}" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#aclModal" title="{{$permset}}" type="button">
 									<i id="jot-perms-icon-{{$item.attach_id}}" class="fa fa-{{$item.lockstate}} jot-icons jot-perms-icon"></i>
 								</button>
 								{{/if}}
diff --git a/view/tpl/cloud_header.tpl b/view/tpl/cloud_header.tpl
index 285363a12..48ada325f 100644
--- a/view/tpl/cloud_header.tpl
+++ b/view/tpl/cloud_header.tpl
@@ -1,5 +1,5 @@
 <div class="section-title-wrapper">
-	<div class="pull-right">
+	<div class="float-end">
 		<a href="cloud_tiles/{{$cpath}}" class="btn btn-sm btn-outline-secondary"><i class="fa fa-fw {{if $tiles}}fa-th-list{{else}}fa-th-large{{/if}}"></i></a>
 		{{if $actionspanel}}
 		{{if $is_owner}}
diff --git a/view/tpl/comment_item.tpl b/view/tpl/comment_item.tpl
index 0b2ef1a1c..d34eec7f8 100644
--- a/view/tpl/comment_item.tpl
+++ b/view/tpl/comment_item.tpl
@@ -20,8 +20,8 @@
 				{{/if}}
 				<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text" placeholder="{{$comment}}" name="body" ondragenter="linkdropper(event);" ondragleave="linkdropexit(event);" ondragover="linkdropper(event);" ondrop="linkdrop(event);" ></textarea>
 				<div id="comment-tools-{{$id}}" class="pt-2 comment-tools">
-					<div id="comment-edit-bb-{{$id}}" class="btn-toolbar pull-left">
-						<div class="btn-group mr-2">
+					<div id="comment-edit-bb-{{$id}}" class="btn-toolbar float-start">
+						<div class="btn-group me-2">
 							<button class="btn btn-outline-secondary btn-sm" title="{{$edbold}}" onclick="insertbbcomment('{{$comment}}','b', {{$id}}); return false;">
 								<i class="fa fa-bold comment-icon"></i>
 							</button>
@@ -38,7 +38,7 @@
 								<i class="fa fa-terminal comment-icon"></i>
 							</button>
 						</div>
-						<div class="btn-group mr-2">
+						<div class="btn-group me-2">
 							{{if $can_upload}}
 							<button class="btn btn-outline-secondary btn-sm" title="{{$edatt}}" onclick="insertCommentAttach('{{$comment}}',{{$id}}); return false;">
 								<i class="fa fa-paperclip comment-icon"></i>
@@ -49,7 +49,7 @@
 							</button>
 						</div>
 						{{if $feature_encrypt}}
-						<div class="btn-group mr-2">
+						<div class="btn-group me-2">
 							<button class="btn btn-outline-secondary btn-sm" title="{{$encrypt}}" onclick="hz_encrypt('{{$cipher}}','#comment-edit-text-' + '{{$id}}'); return false;">
 								<i class="fa fa-key comment-icon"></i>
 							</button>
@@ -57,7 +57,7 @@
 						{{/if}}
 						{{$comment_buttons}}
 					</div>
-					<div class="btn-group float-right" id="comment-edit-submit-wrapper-{{$id}}">
+					<div class="btn-group float-end" id="comment-edit-submit-wrapper-{{$id}}">
 						{{if $preview}}
 						<button id="comment-edit-presubmit-{{$id}}" class="btn btn-outline-secondary btn-sm" onclick="preview_comment({{$id}}); return false;" title="{{$preview}}">
 							<i class="fa fa-eye comment-icon" ></i>
diff --git a/view/tpl/common_friends.tpl b/view/tpl/common_friends.tpl
index b99075210..e772780da 100644
--- a/view/tpl/common_friends.tpl
+++ b/view/tpl/common_friends.tpl
@@ -4,7 +4,7 @@
 	</div>
 	<div class="section-content-wrapper clearfix">
 		{{foreach $items as $item}}
-		<div class="float-left mr-4">
+		<div class="float-start mr-4">
 			<a href="{{$item.url}}">
 				<img class="contact-block-img" src="{{$item.photo}}" alt="{{$item.name}}" title="{{$item.name}} [{{$item.url}}]" />
 			</a>
diff --git a/view/tpl/common_tabs.tpl b/view/tpl/common_tabs.tpl
index 29c46369b..100114c21 100644
--- a/view/tpl/common_tabs.tpl
+++ b/view/tpl/common_tabs.tpl
@@ -6,7 +6,7 @@
 	</ul>
 </div>
 <div class="d-md-none dropdown clearfix" style="position:fixed; right:7px; top:4.5rem; z-index:1020">
-	<button type="button" class="btn btn-outline-secondary btn-sm float-right" data-toggle="dropdown">
+	<button type="button" class="btn btn-outline-secondary btn-sm float-end" data-bs-toggle="dropdown">
 		<i class="fa fa-bars"></i>
 	</button>
 	<div class="dropdown-menu dropdown-menu-right">
diff --git a/view/tpl/connection_template.tpl b/view/tpl/connection_template.tpl
index 86a230c7f..e7ab559cb 100644
--- a/view/tpl/connection_template.tpl
+++ b/view/tpl/connection_template.tpl
@@ -1,6 +1,6 @@
 <div id="contact-entry-wrapper-{{$contact.id}}">
 	<div class="section-subtitle-wrapper clearfix">
-		<div class="pull-right">
+		<div class="float-end">
 			{{if $contact.approve && $contact.ignore}}
 			<form action="connedit/{{$contact.id}}" method="post" >
 			<button type="submit" class="btn btn-success btn-sm" name="pending" value="1" title="{{$contact.approve_hover}}"><i class="fa fa-check"></i> {{$contact.approve}}</button>
diff --git a/view/tpl/connections.tpl b/view/tpl/connections.tpl
index fedcff1e3..0dc7f536b 100644
--- a/view/tpl/connections.tpl
+++ b/view/tpl/connections.tpl
@@ -1,10 +1,10 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper clearfix">
-		<div class="dropdown pull-right">
+		<div class="dropdown float-end">
 			<button type="button" class="btn btn-primary btn-sm" onclick="openClose('contacts-search-form'); $('#contacts-search').focus();">
 				<i class="fa fa-search"></i>&nbsp;{{$label}}
 			</button>
-			<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{{$sort}}">
+			<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{{$sort}}">
 				<i class="fa fa-filter"></i>
 			</button>
 			<div class="dropdown-menu dropdown-menu-right">
@@ -17,7 +17,7 @@
 	</div>
 	<div id="contacts-search-form" class="section-content-tools-wrapper">
 		<form action="{{$cmd}}" method="get" id="mimimi" name="contacts-search-form">
-			<div class="input-group form-group">
+			<div class="input-group mb-3">
 				<input type="text" name="search" id="contacts-search" class="form-control" onfocus="this.select();" value="{{$search}}" placeholder="{{$desc}}" />
 				<div class="input-group-append">
 					<button id="contacts-search-submit" class="btn btn-sm btn-outline-secondary" type="submit"><i class="fa fa-fw fa-search"></i></button>
diff --git a/view/tpl/contact_slider.tpl b/view/tpl/contact_slider.tpl
index 0848df673..dfaaa3967 100644
--- a/view/tpl/contact_slider.tpl
+++ b/view/tpl/contact_slider.tpl
@@ -1,4 +1,4 @@
-<div id="contact-slider" class="slider form-group"><input id="contact-range" type="text" name="fake-closeness" value="{{$val}}" /></div>
+<div id="contact-slider" class="slider mb-3"><input id="contact-range" type="text" name="fake-closeness" value="{{$val}}" /></div>
 <script>
 $(document).ready(function() {
 	// The slider does not render correct if width is given in % and
diff --git a/view/tpl/conv_frame.tpl b/view/tpl/conv_frame.tpl
index be74dea39..c28bb732a 100644
--- a/view/tpl/conv_frame.tpl
+++ b/view/tpl/conv_frame.tpl
@@ -10,7 +10,7 @@
 		<div class="modal-content">
 			<div class="modal-header">
 				<h3 class="modal-title" id="conversation_settings_label">{{$conversation_tools}}</h3>
-				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
 			</div>
 			<div class="modal-body" id="conversation_settings_body">
 				{{$wait}}
diff --git a/view/tpl/conv_item.tpl b/view/tpl/conv_item.tpl
index 361392796..1987c9aca 100644
--- a/view/tpl/conv_item.tpl
+++ b/view/tpl/conv_item.tpl
@@ -28,16 +28,16 @@
 				{{/if}}
 				<div class="p-2 clearfix wall-item-head{{if !$item.title && !$item.event && !$item.photo}} rounded-top{{/if}}{{if $item.is_new && !$item.event && !$item.is_comment}} wall-item-head-new{{/if}}" >
 					{{if $item.thr_parent}}
-						<a href="javascript:doscroll('{{$item.thr_parent}}',{{$item.parent}});" title="{{$item.top_hint}}" class="float-right"><i class="fa fa-angle-double-up">&nbsp;&nbsp;&nbsp;</i></a>
+						<a href="javascript:doscroll('{{$item.thr_parent}}',{{$item.parent}});" title="{{$item.top_hint}}" class="float-end"><i class="fa fa-angle-double-up">&nbsp;&nbsp;&nbsp;</i></a>
 					{{/if}}
 					{{if $item.pinned}}
-					    <span class="float-right wall-item-pinned" title="{{$item.pinned}}" id="wall-item-pinned-{{$item.id}}"><i class="fa fa-thumb-tack">&nbsp;</i></span>
+					    <span class="float-end wall-item-pinned" title="{{$item.pinned}}" id="wall-item-pinned-{{$item.id}}"><i class="fa fa-thumb-tack">&nbsp;</i></span>
 					{{/if}}
 					<div class="wall-item-info" id="wall-item-info-{{$item.id}}" >
 						<div class="wall-item-photo-wrapper{{if $item.owner_url}} wwfrom{{/if}} h-card p-author" id="wall-item-photo-wrapper-{{$item.id}}">
-							<img src="{{$item.thumb}}" class="fakelink wall-item-photo{{$item.sparkle}} u-photo p-name" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" loading="lazy" data-toggle="dropdown" />
+							<img src="{{$item.thumb}}" class="fakelink wall-item-photo{{$item.sparkle}} u-photo p-name" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" loading="lazy" data-bs-toggle="dropdown" />
 							{{if $item.thread_author_menu}}
-							<i class="fa fa-caret-down wall-item-photo-caret cursor-pointer" data-toggle="dropdown"></i>
+							<i class="fa fa-caret-down wall-item-photo-caret cursor-pointer" data-bs-toggle="dropdown"></i>
 							<div class="dropdown-menu">
 								{{foreach $item.thread_author_menu as $mitem}}
 								<a class="dropdown-item" {{if $mitem.href}}href="{{$mitem.href}}"{{/if}} {{if $mitem.action}}onclick="{{$mitem.action}}"{{/if}} {{if $mitem.title}}title="{{$mitem.title}}"{{/if}} >{{$mitem.title}}</a>
@@ -48,7 +48,7 @@
 					</div>
 					{{if $item.lock}}
 					<div class="wall-item-lock dropdown">
-						<i class="fa {{if $item.locktype == 2}}fa-envelope-o{{else}}fa-lock{{/if}} lockview{{if $item.privacy_warning}} text-danger{{/if}}" data-toggle="dropdown" title="{{$item.lock}}" onclick="lockview('item',{{$item.id}});" ></i>&nbsp;
+						<i class="fa {{if $item.locktype == 2}}fa-envelope-o{{else}}fa-lock{{/if}} lockview{{if $item.privacy_warning}} text-danger{{/if}}" data-bs-toggle="dropdown" title="{{$item.lock}}" onclick="lockview('item',{{$item.id}});" ></i>&nbsp;
 						<div id="panel-{{$item.id}}" class="dropdown-menu"></div>
 					</div>
 					{{/if}}
@@ -78,7 +78,7 @@
 				</div>
 				{{/if}}
 				<div class="p-2 clearfix wall-item-tools">
-					<div class="float-right wall-item-tools-right">
+					<div class="float-end wall-item-tools-right">
 						<div class="btn-group">
 							<div id="like-rotator-{{$item.id}}" class="spinner-wrapper">
 								<div class="spinner s"></div>
@@ -86,7 +86,7 @@
 						</div>
 						{{if $item.toplevel && $item.emojis && $item.reactions}}
 						<div class="btn-group">
-							<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" id="wall-item-react-{{$item.id}}">
+							<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="wall-item-react-{{$item.id}}">
 								<i class="fa fa-smile-o"></i>
 							</button>
 							<div class="dropdown-menu dropdown-menu-right">
@@ -114,7 +114,7 @@
 							{{/if}}
 							{{if $item.isevent}}
 							<div class="btn-group">
-								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" id="wall-item-attend-menu-{{$item.id}}" title="{{$item.attend_title}}">
+								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="wall-item-attend-menu-{{$item.id}}" title="{{$item.attend_title}}">
 									<i class="fa fa-calendar-check-o"></i>
 								</button>
 								<div class="dropdown-menu dropdown-menu-right">
@@ -132,7 +132,7 @@
 							{{/if}}
 							{{if $item.canvote}}
 							<div class="btn-group">
-								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" id="wall-item-consensus-menu-{{$item.id}}" title="{{$item.vote_title}}">
+								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="wall-item-consensus-menu-{{$item.id}}" title="{{$item.vote_title}}">
 									<i class="fa fa-check-square-o"></i>
 								</button>
 								<div class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="wall-item-consensus-menu-{{$item.id}}">
@@ -149,7 +149,7 @@
 							</div>
 							{{/if}}
 							<div class="btn-group">
-								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" id="wall-item-menu-{{$item.id}}">
+								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="wall-item-menu-{{$item.id}}">
 									<i class="fa fa-cog"></i>
 								</button>
 								<div class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="wall-item-menu-{{$item.id}}">
@@ -201,7 +201,7 @@
 									{{/if}}
 									{{if $item.settings}}
 									<div class="dropdown-divider"></div>
-									<a class="dropdown-item conversation-settings-link" href="" data-toggle="modal" data-target="#conversation_settings">{{$item.settings}}</a>
+									<a class="dropdown-item conversation-settings-link" href="" data-bs-toggle="modal" data-bs-target="#conversation_settings">{{$item.settings}}</a>
 									{{/if}}
 								</div>
 							</div>
@@ -217,27 +217,27 @@
 						{{/if}}
 						{{if $item.attachments}}
 						<div class="btn-group">
-							<button type="button" class="btn btn-outline-secondary btn-sm wall-item-like dropdown-toggle" data-toggle="dropdown" id="attachment-menu-{{$item.id}}"><i class="fa fa-paperclip"></i></button>
+							<button type="button" class="btn btn-outline-secondary btn-sm wall-item-like dropdown-toggle" data-bs-toggle="dropdown" id="attachment-menu-{{$item.id}}"><i class="fa fa-paperclip"></i></button>
 							<div class="dropdown-menu">{{$item.attachments}}</div>
 						</div>
 						{{/if}}
 						{{foreach $item.responses as $verb=>$response}}
 						{{if $response.count}}
 						<div class="btn-group">
-							<button type="button" class="btn btn-outline-secondary btn-sm wall-item-like dropdown-toggle"{{if $response.modal}} data-toggle="modal" data-target="#{{$verb}}Modal-{{$item.id}}"{{else}} data-toggle="dropdown"{{/if}} id="wall-item-{{$verb}}-{{$item.id}}">{{$response.count}} {{$response.button}}</button>
+							<button type="button" class="btn btn-outline-secondary btn-sm wall-item-like dropdown-toggle"{{if $response.modal}} data-bs-toggle="modal" data-bs-target="#{{$verb}}Modal-{{$item.id}}"{{else}} data-bs-toggle="dropdown"{{/if}} id="wall-item-{{$verb}}-{{$item.id}}">{{$response.count}} {{$response.button}}</button>
 							{{if $response.modal}}
 							<div class="modal" id="{{$verb}}Modal-{{$item.id}}">
 								<div class="modal-dialog">
 									<div class="modal-content">
 										<div class="modal-header">
 											<h3 class="modal-title">{{$response.count}} {{$response.button}}</h3>
-											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+											<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
 										</div>
 										<div class="modal-body response-list">
 											<ul class="nav nav-pills flex-column">{{foreach $response.list as $liker}}<li class="nav-item">{{$liker}}</li>{{/foreach}}</ul>
 										</div>
 										<div class="modal-footer clear">
-											<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{$item.modal_dismiss}}</button>
+											<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{$item.modal_dismiss}}</button>
 										</div>
 									</div><!-- /.modal-content -->
 								</div><!-- /.modal-dialog -->
diff --git a/view/tpl/conv_list.tpl b/view/tpl/conv_list.tpl
index ee5dc9742..9fb15e7d9 100644
--- a/view/tpl/conv_list.tpl
+++ b/view/tpl/conv_list.tpl
@@ -29,9 +29,9 @@
 				<div class="p-2 clearfix wall-item-head{{if !$item.title && !$item.event && !$item.photo}} rounded-top{{/if}}{{if $item.is_new && !$item.event && !$item.is_comment}} wall-item-head-new{{/if}}">
 					<div class="wall-item-info" id="wall-item-info-{{$item.id}}" >
 						<div class="wall-item-photo-wrapper{{if $item.owner_url}} wwfrom{{/if}} h-card p-author" id="wall-item-photo-wrapper-{{$item.id}}">
-							<img src="{{$item.thumb}}" class="fakelink wall-item-photo{{$item.sparkle}} u-photo p-name" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" data-toggle="dropdown" loading="lazy" /></a>
+							<img src="{{$item.thumb}}" class="fakelink wall-item-photo{{$item.sparkle}} u-photo p-name" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" data-bs-toggle="dropdown" loading="lazy" /></a>
 							{{if $item.thread_author_menu}}
-							<i class="fa fa-caret-down wall-item-photo-caret cursor-pointer" data-toggle="dropdown"></i>
+							<i class="fa fa-caret-down wall-item-photo-caret cursor-pointer" data-bs-toggle="dropdown"></i>
 							<div class="dropdown-menu">
 								{{foreach $item.thread_author_menu as $mitem}}
 								<a class="dropdown-item" {{if $mitem.href}}href="{{$mitem.href}}"{{/if}} {{if $mitem.action}}onclick="{{$mitem.action}}"{{/if}} {{if $mitem.title}}title="{{$mitem.title}}"{{/if}} >{{$mitem.title}}</a>
@@ -43,7 +43,7 @@
 					</div>
 					{{if $item.lock}}
 					<div class="wall-item-lock dropdown">
-						<i class="fa {{if $item.locktype == 2}}fa-envelope-o{{else}}fa-lock{{/if}} lockview" data-toggle="dropdown" title="{{$item.lock}}" onclick="lockview('item',{{$item.id}});" ></i>&nbsp;
+						<i class="fa {{if $item.locktype == 2}}fa-envelope-o{{else}}fa-lock{{/if}} lockview" data-bs-toggle="dropdown" title="{{$item.lock}}" onclick="lockview('item',{{$item.id}});" ></i>&nbsp;
 						<div id="panel-{{$item.id}}" class="dropdown-menu"></div>
 					</div>
 					{{/if}}
@@ -71,10 +71,10 @@
 				</div>
 				{{/if}}
 				<div class="p-2 clearfix wall-item-tools">
-					<div class="float-right wall-item-tools-right">
+					<div class="float-end wall-item-tools-right">
 						{{if $item.toplevel && $item.emojis && $item.reactions}}
 						<div class="btn-group">
-							<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" id="wall-item-react-{{$item.id}}">
+							<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="wall-item-react-{{$item.id}}">
 								<i class="fa fa-smile-o"></i>
 							</button>
 							<div class="dropdown-menu dropdown-menu-right">
@@ -97,7 +97,7 @@
 							{{/if}}
 							{{if $item.isevent}}
 							<div class="btn-group">
-								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" id="wall-item-attend-menu-{{$item.id}}" title="{{$item.attend_title}}">
+								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="wall-item-attend-menu-{{$item.id}}" title="{{$item.attend_title}}">
 									<i class="fa fa-calendar-check-o"></i>
 								</button>
 								<div class="dropdown-menu">
@@ -115,7 +115,7 @@
 							{{/if}}
 							{{if $item.canvote}}
 							<div class="btn-group">
-								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" id="wall-item-consensus-menu-{{$item.id}}" title="{{$item.vote_title}}">
+								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="wall-item-consensus-menu-{{$item.id}}" title="{{$item.vote_title}}">
 									<i class="fa fa-check-square-o"></i>
 								</button>
 								<div class="dropdown-menu" role="menu" aria-labelledby="wall-item-consensus-menu-{{$item.id}}">
@@ -124,7 +124,7 @@
 									</a>
 									<a class="dropdown-item" href="#" title="{{$item.conlabels.1}}" onclick="dolike({{$item.id}},'disagree'); return false;">
 										 <i class="item-act-list fa fa-times{{if $item.my_responses.disagree}} ivoted{{/if}}" ></i> {{$item.conlabels.1}}
-									</a> 
+									</a>
 									<a class="dropdown-item" href="#" title="{{$item.conlabels.2}}" onclick="dolike({{$item.id}},'abstain'); return false;">
 										<i class="item-act-list fa fa-question{{if $item.my_responses.abstain}} ivoted{{/if}}" ></i> {{$item.conlabels.2}}
 									</a>
@@ -132,7 +132,7 @@
 							</div>
 							{{/if}}
 							<div class="btn-group">
-								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" id="wall-item-menu-{{$item.id}}">
+								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="wall-item-menu-{{$item.id}}">
 									<i class="fa fa-cog"></i>
 								</button>
 								<div class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="wall-item-menu-{{$item.id}}">
@@ -188,7 +188,7 @@
 						{{/if}}
 						{{if $item.attachments}}
 						<div class="btn-group">
-							<button type="button" class="btn btn-outline-secondary btn-sm wall-item-like dropdown-toggle" data-toggle="dropdown" id="attachment-menu-{{$item.id}}"><i class="fa fa-paperclip"></i></button>
+							<button type="button" class="btn btn-outline-secondary btn-sm wall-item-like dropdown-toggle" data-bs-toggle="dropdown" id="attachment-menu-{{$item.id}}"><i class="fa fa-paperclip"></i></button>
 							<ul class="dropdown-menu" role="menu" aria-labelledby="attachment-menu-{{$item.id}}">{{$item.attachments}}</ul>
 						</div>
 						{{/if}}
@@ -208,20 +208,20 @@
 						{{foreach $item.responses as $verb=>$response}}
 						{{if $response.count}}
 						<div class="btn-group">
-							<button type="button" class="btn btn-outline-secondary btn-sm wall-item-like dropdown-toggle"{{if $response.modal}} data-toggle="modal" data-target="#{{$verb}}Modal-{{$item.id}}"{{else}} data-toggle="dropdown"{{/if}} id="wall-item-{{$verb}}-{{$item.id}}">{{$response.count}} {{$response.button}}</button>
+							<button type="button" class="btn btn-outline-secondary btn-sm wall-item-like dropdown-toggle"{{if $response.modal}} data-bs-toggle="modal" data-bs-target="#{{$verb}}Modal-{{$item.id}}"{{else}} data-bs-toggle="dropdown"{{/if}} id="wall-item-{{$verb}}-{{$item.id}}">{{$response.count}} {{$response.button}}</button>
 							{{if $response.modal}}
 							<div class="modal" id="{{$verb}}Modal-{{$item.id}}">
 								<div class="modal-dialog">
 									<div class="modal-content">
 										<div class="modal-header">
 											<h4 class="modal-title">{{$response.count}} {{$response.button}}</h4>
-											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+											<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
 										</div>
 										<div class="modal-body response-list">
 											<ul class="nav nav-pills flex-column">{{foreach $response.list as $liker}}<li class="nav-item">{{$liker}}</li>{{/foreach}}</ul>
 										</div>
 										<div class="modal-footer clear">
-											<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{$item.modal_dismiss}}</button>
+											<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{$item.modal_dismiss}}</button>
 										</div>
 									</div><!-- /.modal-content -->
 								</div><!-- /.modal-dialog -->
diff --git a/view/tpl/cover_photo.tpl b/view/tpl/cover_photo.tpl
index a1c4a922d..7bc72158b 100644
--- a/view/tpl/cover_photo.tpl
+++ b/view/tpl/cover_photo.tpl
@@ -121,7 +121,7 @@
 		<div class="modal-content">
 			<div class="modal-header">
 				<h4 class="modal-title" id="embedPhotoModalLabel">{{$embedPhotosModalTitle}}</h4>
-				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
 			</div>
 			<div class="modal-body" id="embedPhotoModalBody" >
 				<div id="embedPhotoModalBodyAlbumListDialog" class="d-none">
diff --git a/view/tpl/defperms.tpl b/view/tpl/defperms.tpl
index 29f642cff..5e15a43c9 100644
--- a/view/tpl/defperms.tpl
+++ b/view/tpl/defperms.tpl
@@ -17,7 +17,7 @@
 						<p>{{$permnote_self}}</p>
 						</div>
 						{{if $permcat_enable}}
-						<a href="permcats" class="pull-right"><i class="fa fa-plus"></i>&nbsp;{{$permcat_new}}</a>
+						<a href="permcats" class="float-end"><i class="fa fa-plus"></i>&nbsp;{{$permcat_new}}</a>
 						{{include file="field_select.tpl" field=$permcat}}
 						{{/if}}
 
diff --git a/view/tpl/directory_header.tpl b/view/tpl/directory_header.tpl
index 568e03cd0..95ddef96e 100644
--- a/view/tpl/directory_header.tpl
+++ b/view/tpl/directory_header.tpl
@@ -1,7 +1,7 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper clearfix">
-		<div class="btn-group pull-right">
-			<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{{$sort}}">
+		<div class="btn-group float-end">
+			<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{{$sort}}">
 				<i class="fa fa-sort"></i>
 			</button>
 			<div class="dropdown-menu dropdown-menu-right">
@@ -17,7 +17,7 @@
 		{{include file="direntry.tpl"}}
 	{{/foreach}}
 	{{** make sure this element is at the bottom - we rely on that in endless scroll **}}
-	<div id="page-end" class="float-left w-100"></div>
+	<div id="page-end" class="float-start w-100"></div>
 </div>
 <script>$(document).ready(function() { loadingPage = false;});</script>
 <div id="page-spinner" class="spinner-wrapper">
diff --git a/view/tpl/direntry.tpl b/view/tpl/direntry.tpl
index 015f1102d..5a8e19d12 100644
--- a/view/tpl/direntry.tpl
+++ b/view/tpl/direntry.tpl
@@ -1,6 +1,6 @@
 <div class="directory-item{{if $entry.safe}} safe{{/if}}" id="directory-item-{{$entry.hash}}" >
 	<div class="section-subtitle-wrapper clearfix">
-		<div class="pull-right">
+		<div class="float-end">
 			{{if $entry.viewrate}}
 				{{if $entry.total_ratings}}<a href="ratings/{{$entry.hash}}" id="dir-rating-{{$entry.hash}}" class="btn btn-outline-secondary btn-sm">{{$entry.total_ratings}}</a>{{/if}}
 			{{/if}}
diff --git a/view/tpl/dreport.tpl b/view/tpl/dreport.tpl
index 89188891d..87ec1c35f 100644
--- a/view/tpl/dreport.tpl
+++ b/view/tpl/dreport.tpl
@@ -1,8 +1,8 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
 		{{if $table == 'item'}}
-		<div class="dropdown pull-right">
-			<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{{$options}}">
+		<div class="dropdown float-end">
+			<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{{$options}}">
 				<i class="fa fa-cog"></i>
 			</button>
 			<div class="dropdown-menu">
diff --git a/view/tpl/edpost_head.tpl b/view/tpl/edpost_head.tpl
index 4f39137ab..94c882d53 100644
--- a/view/tpl/edpost_head.tpl
+++ b/view/tpl/edpost_head.tpl
@@ -1,6 +1,6 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		<div class="pull-right">
+		<div class="float-end">
 			{{if $cancel}}
 			<button id="dbtn-cancel" class="btn btn-warning btn-sm" onclick="itemCancel(); return false;">{{$cancel}}</button>
 			{{/if}}
diff --git a/view/tpl/email_validation.tpl b/view/tpl/email_validation.tpl
index 9913e0971..e16b47dff 100644
--- a/view/tpl/email_validation.tpl
+++ b/view/tpl/email_validation.tpl
@@ -5,7 +5,7 @@
 <form action="email_validation/{{$email}}" method="post">
 {{include file="field_input.tpl" field=$token}}
 
-<div class="pull-right submit-wrapper">
+<div class="float-end submit-wrapper">
 	<button type="submit" name="submit" class="btn btn-primary">{{$submit}}</button>
 </div>
 <div class="resend-email" >
diff --git a/view/tpl/event_form.tpl b/view/tpl/event_form.tpl
index d07a06b67..c56c5d82f 100644
--- a/view/tpl/event_form.tpl
+++ b/view/tpl/event_form.tpl
@@ -31,14 +31,14 @@
 		</div>
 		{{/if}}
 
-		<div class="form-group">
-			<div class="form-group">
+		<div class="mb-3">
+			<div class="mb-3">
 				<div id="event-desc-text"><b>{{$d_text}}</b></div>
 				<textarea id="comment-edit-text-desc" class="form-control" name="desc" >{{$d_orig}}</textarea>
 			</div>
 			<div id="comment-tools-desc" class="comment-tools" style="display: block;" >
 				<div id="comment-edit-bb-desc" class="btn-toolbar">
-					<div class='btn-group mr-2'>
+					<div class='btn-group me-2'>
 						<button type="button" class="btn btn-outline-secondary btn-sm" title="{{$edbold}}" onclick="insertbbcomment('none','b', 'desc');">
 							<i class="fa fa-bold comment-icon"></i>
 						</button>
@@ -69,14 +69,14 @@
 				</div>
 			</div>
 		</div>
-		<div class="form-group">
-			<div class="form-group">
+		<div class="mb-3">
+			<div class="mb-3">
 				<div id="event-location-text"><b>{{$l_text}}</b></div>
 				<textarea id="comment-edit-text-loc" class="form-control" name="location">{{$l_orig}}</textarea>
 			</div>
 			<div id="comment-tools-loc" class="comment-tools" style="display: block;" >
 				<div id="comment-edit-bb-loc" class="btn-toolbar">
-					<div class='btn-group mr-2'>
+					<div class='btn-group me-2'>
 						<button type="button" class="btn btn-outline-secondary btn-sm" title="{{$edbold}}" onclick="insertbbcomment('none','b', 'loc');">
 							<i class="fa fa-bold comment-icon"></i>
 						</button>
@@ -116,10 +116,10 @@
 	<div class="clear"></div>
 
 	<button type="button" class="btn btn-outline-secondary btn-sm" onclick="openClose('advanced');">{{$advanced}}</button>
-	<div class="btn-group float-right">
+	<div class="btn-group float-end">
 		<button id="event-edit-preview-btn" class="btn btn-outline-secondary btn-sm" type="button" title="{{$preview}}" onclick="doEventPreview();"><i class="fa fa-eye" ></i></button>
 		{{if ! $eid}}
-		<button id="dbtn-acl" class="btn btn-outline-secondary btn-sm" type="button" data-toggle="modal" data-target="#aclModal" title="{{$perms_label}}"><i id="jot-perms-icon" class="fa fa-{{$lockstate}}"></i></button>
+		<button id="dbtn-acl" class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#aclModal" title="{{$perms_label}}"><i id="jot-perms-icon" class="fa fa-{{$lockstate}}"></i></button>
 		{{/if}}
 		<button id="event-submit" class="btn btn-primary btn-sm" type="submit" name="submit">{{$submit}}</button>
 	</div>
diff --git a/view/tpl/events-js.tpl b/view/tpl/events-js.tpl
index d3f3414ff..5aa5b7ef8 100644
--- a/view/tpl/events-js.tpl
+++ b/view/tpl/events-js.tpl
@@ -1,8 +1,8 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		<div class="pull-right">
+		<div class="float-end">
 			<div class="dropdown">
-				<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog"></i>&nbsp;{{$view_label}}</button>
+				<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown"><i class="fa fa-cog"></i>&nbsp;{{$view_label}}</button>
 				<div class="dropdown-menu">
 					<a class="dropdown-item" href="#" onclick="changeView('changeView', 'month'); return false;">{{$month}}</a>
 					<a class="dropdown-item" href="#" onclick="changeView('changeView', 'agendaWeek'); return false;">{{$week}}</a>
diff --git a/view/tpl/events_cal-js.tpl b/view/tpl/events_cal-js.tpl
index 2c4d961f9..a56c8b348 100644
--- a/view/tpl/events_cal-js.tpl
+++ b/view/tpl/events_cal-js.tpl
@@ -1,7 +1,7 @@
 {{$tabs}}
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		<div class="pull-right">
+		<div class="float-end">
 			<div class="btn-group">
 				<button class="btn btn-outline-secondary btn-sm" onclick="changeView('prev', false);" title="{{$prev}}"><i class="fa fa-backward"></i></button>
 					<button id="today-btn" class="btn btn-outline-secondary btn-sm" onclick="changeView('today', false);" title="{{$today}}"><div id="events-spinner" class="spinner s"></div><i class="fa fa-bullseye" style="display: none; width: 1rem;"></i></button>
diff --git a/view/tpl/events_tools_side.tpl b/view/tpl/events_tools_side.tpl
index e22f95c1e..bad1038a3 100644
--- a/view/tpl/events_tools_side.tpl
+++ b/view/tpl/events_tools_side.tpl
@@ -7,7 +7,7 @@
 	<div id="event-upload-form" class="sub-menu-wrapper">
 		<div class="sub-menu">
 			<form action="events" enctype="multipart/form-data" method="post" name="event-upload-form" id="event-upload-form">
-				<div class="form-group">
+				<div class="mb-3">
 					<input id="event-upload-choose" class="form-control-file w-100" type="file" name="userfile" />
 				</div>
 				<button id="dbtn-submit" class="btn btn-primary btn-sm" type="submit" name="submit" >{{$submit}}</button>
diff --git a/view/tpl/field_checkbox.tpl b/view/tpl/field_checkbox.tpl
index b1665f75f..a1ab42d5e 100644
--- a/view/tpl/field_checkbox.tpl
+++ b/view/tpl/field_checkbox.tpl
@@ -1,9 +1,9 @@
-	<div id="{{$field.0}}_container" class="clearfix form-group checkbox">
+	<div id="{{$field.0}}_container" class="clearfix onoffswitch checkbox mb-3">
 		<label for="id_{{$field.0}}">{{$field.1}}{{if $field.6}}<sup class="required zuiqmid"> {{$field.6}}</sup>{{/if}}</label>
-		<div class="float-right"><input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="1" {{if $field.2}}checked="checked"{{/if}} {{if $field.5}}{{$field.5}}{{/if}} /><label class="switchlabel" for='id_{{$field.0}}'> <span class="onoffswitch-inner" data-on='{{if $field.4}}{{$field.4.1}}{{/if}}' data-off='{{if $field.4}}{{$field.4.0}}{{/if}}'></span><span class="onoffswitch-switch"></span></label></div>
+		<div class="float-end"><input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="1" {{if $field.2}}checked="checked"{{/if}} {{if $field.5}}{{$field.5}}{{/if}} /><label class="switchlabel" for='id_{{$field.0}}'> <span class="onoffswitch-inner" data-on='{{if $field.4}}{{$field.4.1}}{{/if}}' data-off='{{if $field.4}}{{$field.4.0}}{{/if}}'></span><span class="onoffswitch-switch"></span></label></div>
 		<small class="form-text text-muted">{{$field.3}}</small>
 	</div>
-{{* 
+{{*
 	COMMENTS for this template:
 	@author hilmar runge, 2020.01
 	$field array index:
diff --git a/view/tpl/field_colorinput.tpl b/view/tpl/field_colorinput.tpl
index 9b6f33462..f04d70c3e 100644
--- a/view/tpl/field_colorinput.tpl
+++ b/view/tpl/field_colorinput.tpl
@@ -1,4 +1,4 @@
-	<div class='form-group field input color'>
+	<div class='mb-3 field input color'>
 		<label for='id_{{$field.0}}' id='label_{{$field.0}}'>{{$field.1}}</label>
 		<input class='form-control color' name='{{$field.0}}' id='id_{{$field.0}}' type="text" value="{{$field.2}}">{{if $field.4}} <span class="required">{{$field.4}}</span> {{/if}}
 		<span id='help_{{$field.0}}' class='help-block'>{{$field.3}}</span>
diff --git a/view/tpl/field_combobox.tpl b/view/tpl/field_combobox.tpl
index 12d00a08d..a3e5ff8e2 100644
--- a/view/tpl/field_combobox.tpl
+++ b/view/tpl/field_combobox.tpl
@@ -1,4 +1,4 @@
-<div class="form-group">
+<div class="mb-3">
 	<label class="" for='id_{{$field.0}}' id='id_{{$field.0}}_label'>{{$field.1}}</label>
 	<input class="form-control" id="id_{{$field.0}}" type="text" list="data_{{$field.0}}"{{if $field.5}} {{$field.5}}{{/if}}>
 	<datalist id="data_{{$field.0}}" >
diff --git a/view/tpl/field_custom.tpl b/view/tpl/field_custom.tpl
index 907b4c50e..c7716a1de 100644
--- a/view/tpl/field_custom.tpl
+++ b/view/tpl/field_custom.tpl
@@ -1,4 +1,4 @@
-	<div class='form-group field custom'>
+	<div class='mb-3 field custom'>
 		<label for='{{$field.0}}'>{{$field.1}}</label>
 		{{$field.2}}
 		<span class='help-block'>{{$field.3}}</span>
diff --git a/view/tpl/field_duration.qmc.tpl b/view/tpl/field_duration.qmc.tpl
index e38d4621c..0bc78f2f5 100644
--- a/view/tpl/field_duration.qmc.tpl
+++ b/view/tpl/field_duration.qmc.tpl
@@ -1,4 +1,4 @@
-{{if $wrapper!="no"}}<div id="{{$qmc}}{{$field.name}}_wrapper" class="form-group">{{/if}}
+{{if $wrapper!="no"}}<div id="{{$qmc}}{{$field.name}}_wrapper" class="mb-3">{{/if}}
 
 <label for="{{$qmc}}{{$field.name}}fs">{{$label}}
 		{{if $qmcid}}<sup class="zuiqmid required">{{$qmcid}}</sup>{{/if}}	
diff --git a/view/tpl/field_input.tpl b/view/tpl/field_input.tpl
index c7007c159..2f9f83ac5 100644
--- a/view/tpl/field_input.tpl
+++ b/view/tpl/field_input.tpl
@@ -1,9 +1,9 @@
-	<div id="id_{{$field.0}}_wrapper" class="form-group">
+	<div id="id_{{$field.0}}_wrapper" class="mb-3">
 		<label for="id_{{$field.0}}" id="label_{{$field.0}}">{{$field.1}}{{if $field.4}}<sup class="required zuiqmid"> {{$field.4}}</sup>{{/if}}</label>
 		<input class="form-control" name="{{$field.0}}" id="id_{{$field.0}}" type="text" value="{{$field.2}}"{{if $field.5}} {{$field.5}}{{/if}}>
 		<small id="help_{{$field.0}}" class="form-text text-muted">{{$field.3}}</small>
 	</div>
-{{* 
+{{*
 	COMMENTS for this template:
 	@author hilmar runge, 2020.01
 	$field array index:
diff --git a/view/tpl/field_intcheckbox.tpl b/view/tpl/field_intcheckbox.tpl
index abfe6e189..6d6b5edc7 100644
--- a/view/tpl/field_intcheckbox.tpl
+++ b/view/tpl/field_intcheckbox.tpl
@@ -1,5 +1,5 @@
-	<div class="clearfix form-group checkbox">
+	<div class="clearfix mb-3 checkbox">
 		<label for="id_{{$field.0}}">{{$field.1}}</label>
-		<div class="pull-right"><input type="checkbox" name="{{$field.0}}" id="id_{{$field.0}}" value="{{$field.3}}" {{if $field.2}}checked="checked"{{/if}}><label class="switchlabel" for="id_{{$field.0}}"> <span class="onoffswitch-inner" data-on="{{if $field.5}}{{$field.5.1}}{{/if}}" data-off="{{if $field.5}}{{$field.5.0}}{{/if}}"></span><span class="onoffswitch-switch"></span> </label></div>
+		<div class="float-end"><input type="checkbox" name="{{$field.0}}" id="id_{{$field.0}}" value="{{$field.3}}" {{if $field.2}}checked="checked"{{/if}}><label class="switchlabel" for="id_{{$field.0}}"> <span class="onoffswitch-inner" data-on="{{if $field.5}}{{$field.5.1}}{{/if}}" data-off="{{if $field.5}}{{$field.5.0}}{{/if}}"></span><span class="onoffswitch-switch"></span> </label></div>
 		<small class="form-text text-muted">{{$field.4}}</small>
 	</div>
diff --git a/view/tpl/field_password.tpl b/view/tpl/field_password.tpl
index fa5e14582..7baad7d48 100644
--- a/view/tpl/field_password.tpl
+++ b/view/tpl/field_password.tpl
@@ -1,4 +1,4 @@
-	<div class="form-group">
+	<div class="mb-3">
 		<label for="id_{{$field.0}}">{{$field.1}}</label>
 		<input class="form-control" type="password" name="{{$field.0}}" id="id_{{$field.0}}" value="{{$field.2}}"{{if $field.5}} {{$field.5}}{{/if}}>{{if $field.4}} <span class="required">{{$field.4}}</span> {{/if}}
 		<small id="help_{{$field.0}}" class="form-text text-muted">{{$field.3}}</small>
diff --git a/view/tpl/field_radio.tpl b/view/tpl/field_radio.tpl
index 6b5f52de6..2e4afd426 100644
--- a/view/tpl/field_radio.tpl
+++ b/view/tpl/field_radio.tpl
@@ -1,4 +1,4 @@
-	<div class="form-group field radio">
+	<div class="mb-3 field radio">
 		<label for='id_{{$field.0}}_{{$field.2}}'>
 			<input type="radio" name='{{$field.0}}' id='id_{{$field.0}}_{{$field.2}}' value="{{$field.2}}" {{if $field.4}}checked="true"{{/if}}>
 			{{$field.1}}
diff --git a/view/tpl/field_select.tpl b/view/tpl/field_select.tpl
index 57be3b1ab..a98a26799 100644
--- a/view/tpl/field_select.tpl
+++ b/view/tpl/field_select.tpl
@@ -1,4 +1,4 @@
-	<div id="id_{{$field.0}}_wrapper" class="form-group">
+	<div id="id_{{$field.0}}_wrapper" class="mb-3">
 		<label for="id_{{$field.0}}">{{$field.1}}{{if $field.5}}<sup class="required zuiqmid"> {{$field.5}}</sup>{{/if}}</label>
 		<select class="form-control" name="{{$field.0}}" id="id_{{$field.0}}">
 			{{foreach $field.4 as $opt=>$val}}<option value="{{$opt}}" {{if $opt==$field.2}}selected="selected"{{/if}}>{{$val}}</option>{{/foreach}}
@@ -17,6 +17,6 @@
 		.5	label text addition, used for qmc
 	css classes used:
 		.required, .code
-		.form-group, .form-control, .form-text, .text-muted
+		.mb-3, .form-control, .form-text, .text-muted
 *}}
 
diff --git a/view/tpl/field_select_disabled.tpl b/view/tpl/field_select_disabled.tpl
index ee5e1508f..448c097c3 100644
--- a/view/tpl/field_select_disabled.tpl
+++ b/view/tpl/field_select_disabled.tpl
@@ -1,4 +1,4 @@
-	<div class='form-group field select'>
+	<div class='mb-3 field select'>
 		<label style="font-weight: normal;" for='id_{{$field.0}}'>{{$field.1}}</label>
 		<select class="form-control" disabled="true" name='{{$field.0}}' id='id_{{$field.0}}'>
 			{{foreach $field.4 as $opt=>$val}}<option value="{{$opt}}" {{if $opt==$field.2}}selected="selected"{{/if}}>{{$val}}</option>{{/foreach}}
diff --git a/view/tpl/field_select_grouped.tpl b/view/tpl/field_select_grouped.tpl
index eb228b086..9816a97f1 100644
--- a/view/tpl/field_select_grouped.tpl
+++ b/view/tpl/field_select_grouped.tpl
@@ -1,4 +1,4 @@
-	<div id='id_{{$field.0}}_wrapper' class='form-group field select'>
+	<div id='id_{{$field.0}}_wrapper' class='mb-3 field select'>
 		<label for='id_{{$field.0}}'>{{$field.1}}</label>
 		<select class="form-control" name='{{$field.0}}' id='id_{{$field.0}}'>
 			{{foreach $field.4 as $group=>$opts}}
diff --git a/view/tpl/field_select_raw.tpl b/view/tpl/field_select_raw.tpl
index 2780df58c..0f36e18c6 100644
--- a/view/tpl/field_select_raw.tpl
+++ b/view/tpl/field_select_raw.tpl
@@ -1,4 +1,4 @@
-	<div class='form-group field select'>
+	<div class='mb-3 field select'>
 		<label for='id_{{$field.0}}'>{{$field.1}}</label>
 		<select class="form-control" name='{{$field.0}}' id='id_{{$field.0}}'>
 			{{$field.4}}
diff --git a/view/tpl/field_textarea.tpl b/view/tpl/field_textarea.tpl
index 437dece93..684043830 100644
--- a/view/tpl/field_textarea.tpl
+++ b/view/tpl/field_textarea.tpl
@@ -1,4 +1,4 @@
-	<div class="form-group">
+	<div class="mb-3">
 		<label for="id_{{$field.0}}">{{$field.1}}</label>
 		<textarea class="form-control" name="{{$field.0}}" id="id_{{$field.0}}" {{if $field.4}}{{$field.4}}{{/if}} >{{$field.2}}</textarea>
 		<small class="form-text text-muted">{{$field.3}}</small>
diff --git a/view/tpl/field_themeselect.tpl b/view/tpl/field_themeselect.tpl
index 7a529774c..99d36b0d2 100644
--- a/view/tpl/field_themeselect.tpl
+++ b/view/tpl/field_themeselect.tpl
@@ -1,7 +1,7 @@
 	{{if $field.5 == 'preview'}}
 		<script>$(document).ready(function(){ previewTheme($("#id_{{$field.0}}")[0]); });</script>
 	{{/if}}
-	<div class='form-group field select'>
+	<div class='mb-3 field select'>
 		<label for='id_{{$field.0}}'>{{$field.1}}</label>
 		<select class="form-control" name='{{$field.0}}' id='id_{{$field.0}}' {{if $field.5 == 'preview'}}onchange="previewTheme(this);"{{/if}} >
 			{{foreach $field.4 as $opt=>$val}}<option value="{{$opt}}" {{if $opt==$field.2}}selected="selected"{{/if}}>{{$val}}</option>{{/foreach}}
diff --git a/view/tpl/field_yesno.tpl b/view/tpl/field_yesno.tpl
index 8a4cda55b..cd05b06d0 100644
--- a/view/tpl/field_yesno.tpl
+++ b/view/tpl/field_yesno.tpl
@@ -1,4 +1,4 @@
-	<div class='clearfix form-group'>
+	<!--div class='clearfix mb-3'>
 		<label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label>
 		<div class='onoff' id="id_{{$field.0}}_onoff">
 			<input  type="hidden" name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.2}}">
@@ -10,4 +10,10 @@
 			</a>
 		</div>
 		<small class='form-text text-muted'>{{$field.3}}</small>
-	</div>
+	</div-->
+
+<div class="form-check form-switch">
+	<input class="form-check-input" type="checkbox" id="id_{{$field.0}}" value="{{$field.2}}" name="{{$field.0}}">
+	<label class="form-check-label" for="id_{{$field.0}}">{{$field.1}}</label>
+	<small class='form-text text-muted'>{{$field.3}}</small>
+</div>
diff --git a/view/tpl/filer_dialog.tpl b/view/tpl/filer_dialog.tpl
index 61860d10f..9786aa310 100644
--- a/view/tpl/filer_dialog.tpl
+++ b/view/tpl/filer_dialog.tpl
@@ -3,15 +3,14 @@
     <div class="modal-content">
       <div class="modal-header">
         <h4 class="modal-title">{{$title}}</h4>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
         </button>
       </div>
       <div class="modal-body">
         {{include file="field_combobox.tpl"}}
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{$cancel}}</button>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{$cancel}}</button>
         <button id="filer_save" type="button" class="btn btn-primary">{{$submit}}</button>
       </div>
     </div>
diff --git a/view/tpl/generic_addon_settings.tpl b/view/tpl/generic_addon_settings.tpl
index ae603056b..92896aec4 100644
--- a/view/tpl/generic_addon_settings.tpl
+++ b/view/tpl/generic_addon_settings.tpl
@@ -1,7 +1,7 @@
 <div class="panel" id="settings">
 	<div class="section-subtitle-wrapper" role="tab" id="{{$addon.0}}-settings">
 		<h3>
-			<a title="{{$addon.2}}" data-toggle="collapse" data-target="#{{$addon.0}}-settings-content" href="#" aria-controls="{{$addon.0}}-settings-content">
+			<a title="{{$addon.2}}" data-bs-toggle="collapse" data-bs-target="#{{$addon.0}}-settings-content" href="#" aria-controls="{{$addon.0}}-settings-content">
 				{{if $addon.1|substr:0:1 === '<'}}
 				{{$addon.1}}
 				{{else}}
diff --git a/view/tpl/generic_modal.tpl b/view/tpl/generic_modal.tpl
index 18279b6f7..84e8e66cf 100644
--- a/view/tpl/generic_modal.tpl
+++ b/view/tpl/generic_modal.tpl
@@ -3,11 +3,11 @@
     <div class="modal-content">
       <div class="modal-header">
         <h4 class="modal-title" id="generic-modal-title-{{$id}}">{{$title}}</h4>
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
       </div>
       <div class="modal-body" id="generic-modal-body-{{$id}}"></div>
       <div class="modal-footer">
-        <button id="generic-modal-cancel-{{$id}}" type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{$cancel}}</button>
+        <button id="generic-modal-cancel-{{$id}}" type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{$cancel}}</button>
 	{{if $ok}}
         <button id="generic-modal-ok-{{$id}}" type="button" class="btn btn-primary">{{$ok}}</button>
 	{{/if}}
diff --git a/view/tpl/group_edit.tpl b/view/tpl/group_edit.tpl
index 60038701e..5568179af 100644
--- a/view/tpl/group_edit.tpl
+++ b/view/tpl/group_edit.tpl
@@ -1,6 +1,6 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		<div class="float-right">
+		<div class="float-end">
 			<button type="button" class="btn btn-sm btn-outline-secondary" onclick="openClose('group_tools')"><i class="fa fa-pencil"></i> {{$details_label}}</button>
 			<button id="fullscreen-btn" type="button" class="btn btn-outline-secondary btn-sm" onclick="makeFullScreen();"><i class="fa fa-expand"></i></button>
 			<button id="inline-btn" type="button" class="btn btn-outline-secondary btn-sm" onclick="makeFullScreen(false);"><i class="fa fa-compress"></i></button>
@@ -17,7 +17,7 @@
 			<a href="group/drop/{{$gid}}?t={{$form_security_token_drop}}" onclick="return confirmDelete();" class="btn btn-sm btn-danger">
 				{{$delete}}
 			</a>
-			<button type="submit" name="submit" class="btn btn-sm btn-primary float-right">{{$submit}}</button>
+			<button type="submit" name="submit" class="btn btn-sm btn-primary float-end">{{$submit}}</button>
 		</form>
 	</div>
 	<div class="section-content-info-wrapper">
diff --git a/view/tpl/group_selection.tpl b/view/tpl/group_selection.tpl
index 270d2aa79..a91658464 100644
--- a/view/tpl/group_selection.tpl
+++ b/view/tpl/group_selection.tpl
@@ -1,4 +1,4 @@
-<div class="form-group field custom">
+<div class="mb-3 field custom">
 <label for="group-selection" id="group-selection-lbl">{{$label}}</label>
 <select class="form-control" name="group-selection" id="group-selection" >
 {{foreach $groups as $group}}
diff --git a/view/tpl/groupeditor.tpl b/view/tpl/groupeditor.tpl
index 94c275c7e..4ccedaa39 100644
--- a/view/tpl/groupeditor.tpl
+++ b/view/tpl/groupeditor.tpl
@@ -1,10 +1,10 @@
-<div id="contacts" class="list-group float-left w-50 pr-2">
+<div id="contacts" class="list-group float-start w-50 pr-2">
 	<h3>{{$groupeditor.label_contacts}}</h3>
 	<div id="group-all-contacts" class="contact_list">
 	{{foreach $groupeditor.contacts as $m}} {{$m}} {{/foreach}}
 	</div>
 </div>
-<div id="group" class="list-group float-right w-50">
+<div id="group" class="list-group float-end w-50">
 	<h3>{{$groupeditor.label_members}}</h3>
 	<div id="group-members" class="contact_list">
 	{{foreach $groupeditor.members as $c}} {{$c}} {{/foreach}}
diff --git a/view/tpl/help.tpl b/view/tpl/help.tpl
index c523c4115..59f4a48cd 100644
--- a/view/tpl/help.tpl
+++ b/view/tpl/help.tpl
@@ -1,8 +1,8 @@
 <div id="help-content" class="generic-content-wrapper">
 	<div class="clearfix section-title-wrapper">
-		<div class="pull-right">
+		<div class="float-end">
 			<div class="btn-group">
-				<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown">
+				<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
 					<i class="fa fa-language" style="font-size: 1.4em;"></i>
 				</button>
 				<div class="dropdown-menu dropdown-menu-right flex-column lang-selector">
diff --git a/view/tpl/invite.tpl b/view/tpl/invite.tpl
index e51e8e87b..304816e0b 100644
--- a/view/tpl/invite.tpl
+++ b/view/tpl/invite.tpl
@@ -16,7 +16,7 @@
         <pre id="zai-remsg"></pre>
       </div>
 
-      <div id="invite-recipient-textarea" class="form-group field custom">
+      <div id="invite-recipient-textarea" class="mb-3 field custom">
 
         <label for="zaito">{{$m11}}<sup class="zai_qmc">({{$n11}})</sup></label>
         <textarea id="zai-to" name="zaito" rows="6" class="form-control"></textarea>
@@ -35,7 +35,7 @@
           <span id="zai-subject">{{$subject}}</span>
         </div>
 
-        <div id="invite-message-textarea" class="form-group field custom">
+        <div id="invite-message-textarea" class="mb-3 field custom">
           <label for="zaitxt">{{$m12}}<sup class="zai_qmc">({{$n12}})</sup></label>
           <textarea id="zai-txt" name="zaitxt" rows="6" class="form-control">{{$personal_message}}</textarea>
         </div>
@@ -49,7 +49,7 @@
       {{$due}}
       </pre>
 
-      <div id="invite-submit-wrapper" class="form-group">
+      <div id="invite-submit-wrapper" class="mb-3">
         <button class="btn btn-primary btn-sm" type="submit" id="invite-submit" name="submit" value="{{$submit}}">{{$submit}}</button>
       </div>
       <input type='hidden' id="zai-reon" name='zaireon' value=''>
diff --git a/view/tpl/jot-header.tpl b/view/tpl/jot-header.tpl
index b24283664..93f1ea28a 100644
--- a/view/tpl/jot-header.tpl
+++ b/view/tpl/jot-header.tpl
@@ -532,7 +532,7 @@ var activeCommentText = '';
 	}
 
 	function jotAddOption() {
-		var option = '<div class="jot-poll-option form-group"><input class="w-100 border-0" name="poll_answers[]" type="text" value="" placeholder="Option"><div class="poll-option-close"><i class="fa fa-close"></i></div></div>';
+		var option = '<div class="jot-poll-option mb-3"><input class="w-100 border-0" name="poll_answers[]" type="text" value="" placeholder="Option"><div class="poll-option-close"><i class="fa fa-close"></i></div></div>';
 		$('#jot-poll-options').append(option);
 	}
 
diff --git a/view/tpl/jot.tpl b/view/tpl/jot.tpl
index 23b18ffac..a44b5b868 100644
--- a/view/tpl/jot.tpl
+++ b/view/tpl/jot.tpl
@@ -69,21 +69,21 @@
 		{{/if}}
 		<div id="jot-poll-wrap" class="p-2 d-none">
 			<div id="jot-poll-options">
-				<div class="jot-poll-option form-group">
+				<div class="jot-poll-option mb-3">
 					<input class="w-100 border-0" name="poll_answers[]" type="text" value="" placeholder="{{$poll_option_label}}">
 				</div>
-				<div class="jot-poll-option form-group">
+				<div class="jot-poll-option mb-3">
 					<input class="w-100 border-0" name="poll_answers[]" type="text" value="" placeholder="{{$poll_option_label}}">
 				</div>
 			</div>
 			{{include file="field_checkbox.tpl" field=$multiple_answers}}
 			<div id="jot-poll-tools" class="clearfix">
-				<div id="poll-tools-left" class="float-left">
+				<div id="poll-tools-left" class="float-start">
 					<button id="jot-add-option" class="btn btn-outline-secondary btn-sm" type="button">
 						<i class="fa fa-plus"></i> {{$poll_add_option_label}}
 					</button>
 				</div>
-				<div id="poll-tools-right" class="float-right">
+				<div id="poll-tools-right" class="float-end">
 					<div class="input-group">
 						<input type="text" name="poll_expire_value" class="form-control" value="10" size="3">
 						<select class="form-control" id="duration-select" name="poll_expire_unit">
@@ -96,9 +96,9 @@
 			</div>
 		</div>
 		<div id="profile-jot-submit-wrapper" class="clearfix p-2 jothidden">
-			<div id="profile-jot-submit-left" class="btn-toolbar float-left">
+			<div id="profile-jot-submit-left" class="btn-toolbar float-start">
 				{{if $bbcode}}
-				<div class="btn-group mr-2">
+				<div class="btn-group me-2">
 					<button type="button" id="main-editor-bold" class="btn btn-outline-secondary btn-sm" title="{{$bold}}" onclick="inserteditortag('b', 'profile-jot-text'); return false;">
 						<i class="fa fa-bold jot-icons"></i>
 					</button>
@@ -117,7 +117,7 @@
 				</div>
 				{{/if}}
 				{{if $visitor}}
-				<div class="btn-group mr-2 d-none d-lg-flex">
+				<div class="btn-group me-2 d-none d-lg-flex">
 					{{if $writefiles}}
 					<button type="button" id="wall-file-upload" class="btn btn-outline-secondary btn-sm" title="{{$attach}}" >
 						<i id="wall-file-upload-icon" class="fa fa-paperclip jot-icons"></i>
@@ -134,7 +134,7 @@
 					</button>
 					{{/if}}
 				</div>
-				<div class="btn-group mr-2 d-none d-lg-flex">
+				<div class="btn-group me-2 d-none d-lg-flex">
 					{{if $setloc}}
 					<button type="button" id="profile-location-wrapper" class="btn btn-outline-secondary btn-sm" title="{{$setloc}}" onclick="jotGetLocation();return false;">
 						<i id="profile-location" class="fa fa-globe jot-icons"></i>
@@ -177,7 +177,7 @@
 				</div>
 				{{if $writefiles || $weblink || $setloc || $clearloc || $feature_expire || $feature_encrypt || $custommoretoolsdropdown}}
 				<div class="btn-group d-lg-none">
-					<button type="button" id="more-tools" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+					<button type="button" id="more-tools" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
 						<i id="more-tools-icon" class="fa fa-cog jot-icons"></i>
 					</button>
 					<div class="dropdown-menu">
@@ -222,7 +222,7 @@
 					</div>
 				</div>
 			</div>
-			<div id="profile-jot-submit-right" class="btn-group float-right">
+			<div id="profile-jot-submit-right" class="btn-group float-end">
 				{{foreach $customsubmitright as $csr}}
 				<button type="button" class="btn btn-outline-secondary btn-sm" {{$csr.buttonparams}} title="{{$csr.preview}}">
 					{{$csr.buttoncontent}}
@@ -234,12 +234,12 @@
 				</button>
 				{{/if}}
 				{{if $jotnets}}
-				<button type="button" id="dbtn-jotnets" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#jotnetsModal" type="button" title="{{$jotnets_label}}" style="{{if $lockstate == 'lock'}}display: none;{{/if}}">
+				<button type="button" id="dbtn-jotnets" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#jotnetsModal" type="button" title="{{$jotnets_label}}" style="{{if $lockstate == 'lock'}}display: none;{{/if}}">
 					<i class="fa fa-share-alt jot-icons"></i>
 				</button>
 				{{/if}}
 				{{if $showacl}}
-				<button type="button" id="dbtn-acl" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#aclModal" title="{{$permset}}" type="button" data-form_id="profile-jot-form">
+				<button type="button" id="dbtn-acl" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#aclModal" title="{{$permset}}" type="button" data-form_id="profile-jot-form">
 					<i id="jot-perms-icon" class="fa fa-{{$lockstate}} jot-icons{{if $bang}} jot-lock-warn{{/if}}"></i>
 				</button>
 				{{/if}}
@@ -257,13 +257,13 @@
 					<div class="modal-content">
 						<div class="modal-header">
 							<h3 class="modal-title" id="expiryModalLabel">{{$jotnets_label}}</h3>
-							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+							<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
 						</div>
 						<div class="modal-body">
 							{{$jotnets}}
 						</div>
 						<div class="modal-footer">
-							<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
+							<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
 						</div>
 					</div><!-- /.modal-content -->
 				</div><!-- /.modal-dialog -->
@@ -284,9 +284,9 @@
 		<div class="modal-content">
 			<div class="modal-header">
 				<h3 class="modal-title" id="expiryModalLabel">{{$expires}}</h3>
-				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
 			</div>
-			<div class="modal-body form-group" style="width:90%">
+			<div class="modal-body mb-3" style="width:90%">
 				<div class="date">
 					<input type="text" placeholder="yyyy-mm-dd HH:MM" name="start_text" id="expiration-date" class="form-control" />
 				</div>
@@ -297,7 +297,7 @@
 				</script>
 			</div>
 			<div class="modal-footer">
-				<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{$expiryModalCANCEL}}</button>
+				<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{$expiryModalCANCEL}}</button>
 				<button id="expiry-modal-OKButton" type="button" class="btn btn-primary">{{$expiryModalOK}}</button>
 			</div>
 		</div><!-- /.modal-content -->
@@ -311,9 +311,9 @@
 		<div class="modal-content">
 			<div class="modal-header">
 				<h3 class="modal-title" id="createdModalLabel">{{$future_txt}}</h3>
-				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
 			</div>
-			<div class="modal-body form-group" style="width:90%">
+			<div class="modal-body mb-3" style="width:90%">
 				<div class="date">
 					<input type="text" placeholder="yyyy-mm-dd HH:MM" name="created_text" id="created-date" class="form-control" />
 				</div>
@@ -324,7 +324,7 @@
 				</script>
 			</div>
 			<div class="modal-footer">
-				<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{$expiryModalCANCEL}}</button>
+				<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{$expiryModalCANCEL}}</button>
 				<button id="created-modal-OKButton" type="button" class="btn btn-primary">{{$expiryModalOK}}</button>
 			</div>
 		</div><!-- /.modal-content -->
@@ -338,7 +338,7 @@
 		<div class="modal-content">
 			<div class="modal-header">
 				<h3 class="modal-title" id="embedPhotoModalLabel">{{$embedPhotosModalTitle}}</h3>
-				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
 			</div>
 			<div class="modal-body" id="embedPhotoModalBody" >
 				<div id="embedPhotoModalBodyAlbumListDialog" class="d-none">
diff --git a/view/tpl/layoutlist.tpl b/view/tpl/layoutlist.tpl
index 1bbe14893..723452839 100644
--- a/view/tpl/layoutlist.tpl
+++ b/view/tpl/layoutlist.tpl
@@ -1,7 +1,7 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
 		{{if $editor}}
-		<div class="pull-right">
+		<div class="float-end">
 			<button id="webpage-create-btn" class="btn btn-sm btn-success" onclick="openClose('layout-editor');"><i class="fa fa-pencil-square-o"></i>&nbsp;{{$create}}</button>
 			<a href="{{$help.url}}" target="_blank" class="btn btn-sm btn-warning" title="{{$help.title}}"><i class="fa fa-info"></i>&nbsp;{{$help.text}}</a>
 		</div>
diff --git a/view/tpl/locmanage.tpl b/view/tpl/locmanage.tpl
index a8c75b6a8..9b988c9c5 100644
--- a/view/tpl/locmanage.tpl
+++ b/view/tpl/locmanage.tpl
@@ -8,7 +8,7 @@
 				$.post(baseurl + '/locs','drop='+id,function(data) { window.location.href=window.location.href; });
 			}
 		</script>
-		<button class="btn btn-success btn-sm pull-right" onclick="window.location.href='/locs/f=&sync=1'; return false;"><i class="fa fa-refresh"></i>&nbsp;{{$sync}}</button>
+		<button class="btn btn-success btn-sm float-end" onclick="window.location.href='/locs/f=&sync=1'; return false;"><i class="fa fa-refresh"></i>&nbsp;{{$sync}}</button>
 		<h2>{{$header}}</h2>
 	</div>
 	<div class="section-content-wrapper-np">
diff --git a/view/tpl/login.tpl b/view/tpl/login.tpl
index 1a47d122c..cc4616b16 100644
--- a/view/tpl/login.tpl
+++ b/view/tpl/login.tpl
@@ -1,18 +1,14 @@
 <form action="{{$dest_url}}" id="{{$form_id}}" method="post" >
 	<input type="hidden" name="auth-params" value="login" />
-	<div id="login-main">
-		<div id="login-input" class="form-group">
-			{{include file="field_input.tpl" field=$lname}}
-			{{include file="field_password.tpl" field=$lpassword}}
-			{{include file="field_checkbox.tpl" field=$remember_me}}
-			<button type="submit" name="submit" class="btn btn-block btn-primary">{{$login}}</button>
-		</div>
-		<div id="login-extra-links" class="clearfix">
-			{{if $register}}<a href="{{$register.link}}" title="{{$register.title}}" id="register-link" class="float-right">{{$register.desc}}</a>{{/if}}
-			<a href="lostpass" title="{{$lostpass}}" id="lost-password-link" >{{$lostlink}}</a>
-		</div>
-		<hr>
-		<a href="rmagic" class="btn btn-block btn-outline-success rmagic-button">{{$remote_login}}</a>
+	<div id="login-main" class="d-grid gap-2">
+		{{include file="field_input.tpl" field=$lname}}
+		{{include file="field_password.tpl" field=$lpassword}}
+		{{include file="field_checkbox.tpl" field=$remember_me}}
+		<button type="submit" name="submit" class="btn btn-primary">{{$login}}</button>
+		{{if $register}}<a href="{{$register.link}}" title="{{$register.title}}" id="register-link" class="float-end">{{$register.desc}}</a>{{/if}}
+		{{if $lostlink}}<a href="lostpass" title="{{$lostpass}}" id="lost-password-link" >{{$lostlink}}</a>{{/if}}
+<hr>
+		<a href="rmagic" class="btn btn-outline-success">{{$remote_login}}</a>
 	</div>
 	{{foreach $hiddens as $k=>$v}}
 		<input type="hidden" name="{{$k}}" value="{{$v}}" />
diff --git a/view/tpl/mail_conv.tpl b/view/tpl/mail_conv.tpl
index adc7734ec..f51b44884 100644
--- a/view/tpl/mail_conv.tpl
+++ b/view/tpl/mail_conv.tpl
@@ -14,13 +14,13 @@
 			{{$mail.body}}
 		</div>
 		{{if $mail.attachments}}
-		<div class="dropdown float-left">
-			<button type="button" class="btn btn-outline-secondary btn-sm wall-item-like dropdown-toggle" data-toggle="dropdown" id="attachment-menu-{{$item.id}}"><i class="fa fa-fw fa-paperclip"></i></button>
+		<div class="dropdown float-start">
+			<button type="button" class="btn btn-outline-secondary btn-sm wall-item-like dropdown-toggle" data-bs-toggle="dropdown" id="attachment-menu-{{$item.id}}"><i class="fa fa-fw fa-paperclip"></i></button>
 			<div class="dropdown-menu" role="menu" aria-labelledby="attachment-menu-{{$item.id}}">{{$mail.attachments}}</div>
 		</div>
 		{{/if}}
-		<div class="float-right dropdown">
-			<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" id="mail-item-menu-{{$mail.id}}">
+		<div class="float-end dropdown">
+			<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="mail-item-menu-{{$mail.id}}">
 				<i class="fa fa-cog"></i>
 			</button>
 			<div class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="mail-item-menu-{{$mail.id}}">
diff --git a/view/tpl/mail_display.tpl b/view/tpl/mail_display.tpl
index e8549a49b..80ce40838 100644
--- a/view/tpl/mail_display.tpl
+++ b/view/tpl/mail_display.tpl
@@ -1,6 +1,6 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		<div class="pull-right">
+		<div class="float-end">
 			<button id="fullscreen-btn" type="button" class="btn btn-outline-secondary btn-sm" onclick="makeFullScreen();"><i class="fa fa-expand"></i></button>
 			<button id="inline-btn" type="button" class="btn btn-outline-secondary btn-sm" onclick="makeFullScreen(false);"><i class="fa fa-compress"></i></button>
 			{{if $mailbox == 'combined'}}
diff --git a/view/tpl/menuedit.tpl b/view/tpl/menuedit.tpl
index 3558bdbaa..ad698f2c9 100644
--- a/view/tpl/menuedit.tpl
+++ b/view/tpl/menuedit.tpl
@@ -2,7 +2,7 @@
 <div class="generic-content-wrapper">
 <div class="section-title-wrapper">
 	{{if $menu_edit_link}}
-	<div class="pull-right">
+	<div class="float-end">
 		<a href="{{$menu_edit_link}}" title="{{$hintedit}}" class="btn btn-sm btn-success"><i class="fa fa-pencil-square-o"></i>&nbsp;{{$editcontents}}</a>
 	</div>
 	{{/if}}
@@ -22,7 +22,7 @@
 		{{include file="field_input.tpl" field=$menu_desc}}
 
 		{{include file="field_checkbox.tpl" field=$menu_bookmark}}
-		<div class="menuedit-submit-wrapper form-group pull-right" >
+		<div class="menuedit-submit-wrapper mb-3 float-end" >
 			<button type="submit" name="submit" class="btn btn-primary">{{$submit}}&nbsp;<i class="fa fa-caret-right"></i></button>
 		</div>
 		<div class="clear"></div>
diff --git a/view/tpl/menulist.tpl b/view/tpl/menulist.tpl
index f9c925472..a173cd5f9 100644
--- a/view/tpl/menulist.tpl
+++ b/view/tpl/menulist.tpl
@@ -1,6 +1,6 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		<div class="pull-right">
+		<div class="float-end">
 			<button id="webpage-create-btn" class="btn btn-sm btn-success" onclick="openClose('menu-creator');"><i class="fa fa-pencil-square-o"></i>&nbsp;{{$hintnew}}</button>
 		</div>
 		<h2>{{$title}}</h2>
diff --git a/view/tpl/mitemedit.tpl b/view/tpl/mitemedit.tpl
index 36be0b207..c973e8cbd 100644
--- a/view/tpl/mitemedit.tpl
+++ b/view/tpl/mitemedit.tpl
@@ -22,9 +22,9 @@
 			{{include file="field_input.tpl" field=$mitem_order}}
 			{{include file="field_checkbox.tpl" field=$usezid}}
 			{{include file="field_checkbox.tpl" field=$newwin}}
-			<div class="pull-right form-group">
+			<div class="float-end mb-3">
 				<div class="btn-group">
-					<button id="dbtn-acl" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#aclModal" onclick="return false;">
+					<button id="dbtn-acl" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#aclModal" onclick="return false;">
 						<i id="jot-perms-icon" class="fa fa-{{$lockstate}}"></i>
 					</button>
 					{{if $submit_more}}
diff --git a/view/tpl/mitemlist.tpl b/view/tpl/mitemlist.tpl
index 1e6302868..a430e18cc 100644
--- a/view/tpl/mitemlist.tpl
+++ b/view/tpl/mitemlist.tpl
@@ -1,6 +1,6 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		<div class="pull-right">
+		<div class="float-end">
 			<button id="webpage-create-btn" class="btn btn-sm btn-success" onclick="openClose('menu-element-creator');"><i class="fa fa-pencil-square-o"></i>&nbsp;{{$hintnew}}</button>
 		</div>
 		<h2>{{$title}} {{if $menudesc}}{{$menudesc}}{{else}}{{$menuname}}{{/if}}</h2>
@@ -23,7 +23,7 @@
 			<tr id="mitem-list-item-{{$m.mitem_id}}">
 				<td width="1%">{{$m.mitem_desc}}</td>
 				<td width="96%"><a href="{{$m.mitem_link}}">{{$m.mitem_link}}</a></td>
-				<td width="1%" class="mitem-list-tool dropdown">{{if $m.allow_cid || $m.allow_gid || $m.deny_cid || $m.deny_gid}}<i class="fa fa-lock lockview" data-toggle="dropdown" onclick="lockview('menu_item',{{$m.mitem_id}});" ></i><ul id="panel-{{$m.mitem_id}}" class="lockview-panel dropdown-menu"></ul>{{/if}}</td>
+				<td width="1%" class="mitem-list-tool dropdown">{{if $m.allow_cid || $m.allow_gid || $m.deny_cid || $m.deny_gid}}<i class="fa fa-lock lockview" data-bs-toggle="dropdown" onclick="lockview('menu_item',{{$m.mitem_id}});" ></i><ul id="panel-{{$m.mitem_id}}" class="lockview-panel dropdown-menu"></ul>{{/if}}</td>
 				<td width="1%" class="mitem-list-tool"><a href="mitem/{{$nick}}/{{$menu_id}}/{{$m.mitem_id}}" title="{{$hintedit}}"><i class="fa fa-pencil"></i></a></td>
 				<td width="1%" class="mitem-list-tool"><a href="#" title="{{$hintdrop}}"  onclick="dropItem('mitem/{{$nick}}/{{$menu_id}}/{{$m.mitem_id}}/drop', '#mitem-list-item-{{$m.mitem_id}}, #pmenu-item-{{$m.mitem_id}}'); return false;"><i class="fa fa-trash-o drop-icons"></i></a></td>
 			</tr>
diff --git a/view/tpl/mood_content.tpl b/view/tpl/mood_content.tpl
index 315ee4c8a..4cb5207f6 100644
--- a/view/tpl/mood_content.tpl
+++ b/view/tpl/mood_content.tpl
@@ -17,7 +17,7 @@
 
 		<input id="mood-parent" type="hidden" value="{{$parent}}" name="parent" />
 
-		<div class="form-group field custom">
+		<div class="mb-3 field custom">
 			<select name="verb" id="mood-verb-select" class="form-control" >
 			{{foreach $verbs as $v}}
 				<option value="{{$v.0}}">{{$v.1}}</option>
diff --git a/view/tpl/myapps.tpl b/view/tpl/myapps.tpl
index 2cc747436..0b74c7b27 100644
--- a/view/tpl/myapps.tpl
+++ b/view/tpl/myapps.tpl
@@ -2,9 +2,9 @@
 	<div class="section-title-wrapper clearfix">
 		{{if $authed}}
 		{{if $create}}
-		<a href="appman" class="pull-right btn btn-success btn-sm"><i class="fa fa-pencil-square-o"></i>&nbsp;{{$create}}</a>
+		<a href="appman" class="float-end btn btn-success btn-sm"><i class="fa fa-pencil-square-o"></i>&nbsp;{{$create}}</a>
 		{{elseif $manage}}
-		<a href="apps/edit{{if $cat.0}}/?f=&cat={{$cat.0}}{{/if}}" class="pull-right btn btn-primary btn-sm">{{$manage}}</a>
+		<a href="apps/edit{{if $cat.0}}/?f=&cat={{$cat.0}}{{/if}}" class="float-end btn btn-primary btn-sm">{{$manage}}</a>
 		{{/if}}
 		{{/if}}
 		<h2>{{$title}}{{if $cat.0}} - {{$cat.0}}{{/if}}</h2>
diff --git a/view/tpl/nav_login.tpl b/view/tpl/nav_login.tpl
index 4a94908f0..da9249e1a 100644
--- a/view/tpl/nav_login.tpl
+++ b/view/tpl/nav_login.tpl
@@ -4,10 +4,10 @@
 		<div class="modal-content">
 			<div class="modal-header">
 				<h4 class="modal-title">{{$nav.loginmenu.1.1}}</h4>
-				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 			</div>
 			<div class="modal-body">
-				<div class="form-group">
+				<div class="mb-3">
 					{{$nav.login}}
 				</div>
 			</div>
diff --git a/view/tpl/navbar_default.tpl b/view/tpl/navbar_default.tpl
index 0c8be512d..48daf7b56 100644
--- a/view/tpl/navbar_default.tpl
+++ b/view/tpl/navbar_default.tpl
@@ -1,233 +1,274 @@
-{{if $nav.login && !$userinfo}}
-<div class="d-lg-none pt-1 pb-1">
-	{{if $nav.loginmenu.1.4}}
-	<a class="btn btn-primary btn-sm text-white" href="#" title="{{$nav.loginmenu.1.3}}" id="{{$nav.loginmenu.1.4}}_collapse" data-toggle="modal" data-target="#nav-login">
-		{{$nav.loginmenu.1.1}}
-	</a>
-	{{else}}
-	<a class="btn btn-primary btn-sm text-white" href="login" title="{{$nav.loginmenu.1.3}}">
-		{{$nav.loginmenu.1.1}}
-	</a>
-	{{/if}}
-	{{if $nav.register}}
-	<a class="btn btn-warning btn-sm text-dark" href="{{$nav.register.0}}" title="{{$nav.register.3}}" id="{{$nav.register.4}}" >
-		{{$nav.register.1}}
-	</a>
-	{{/if}}
-</div>
-{{/if}}
-{{if $userinfo}}
-<div class="dropdown">
-	<div class="fakelink usermenu" data-toggle="dropdown">
-		<img id="avatar" src="{{$userinfo.icon}}" alt="{{$userinfo.name}}">
-		<i class="fa fa-caret-down"></i>
-	</div>
-	{{if $is_owner}}
-	<div class="dropdown-menu">
-		{{foreach $nav.usermenu as $usermenu}}
-		<a class="dropdown-item{{if $usermenu.2}} active{{/if}}"  href="{{$usermenu.0}}" title="{{$usermenu.3}}" role="menuitem" id="{{$usermenu.4}}">{{$usermenu.1}}</a>
-		{{/foreach}}
-		{{if $nav.group}}
-		<a class="dropdown-item" href="{{$nav.group.0}}" title="{{$nav.group.3}}" role="menuitem" id="{{$nav.group.4}}">{{$nav.group.1}}</a>
-		{{/if}}
-		{{if $nav.manage}}
-		<a class="dropdown-item{{if $sel.name == Manage}} active{{/if}}" href="{{$nav.manage.0}}" title="{{$nav.manage.3}}" role="menuitem" id="{{$nav.manage.4}}">{{$nav.manage.1}}</a>
-		{{/if}}	
-		{{if $nav.channels}}
-		{{foreach $nav.channels as $chan}}
-		<a class="dropdown-item" href="manage/{{$chan.channel_id}}" title="{{$chan.channel_name}}" role="menuitem"><i class="fa fa-circle{{if $localuser == $chan.channel_id}} text-success{{else}} invisible{{/if}}"></i> {{$chan.channel_name}}</a>
-		{{/foreach}}
-		{{/if}}
-		{{if $nav.profiles}}
-		<a class="dropdown-item" href="{{$nav.profiles.0}}" title="{{$nav.profiles.3}}" role="menuitem" id="{{$nav.profiles.4}}">{{$nav.profiles.1}}</a>
-		{{/if}}
-		{{if $nav.settings}}
-		<div class="dropdown-divider"></div>
-		<a class="dropdown-item{{if $sel.name == Settings}} active{{/if}}" href="{{$nav.settings.0}}" title="{{$nav.settings.3}}" role="menuitem" id="{{$nav.settings.4}}">{{$nav.settings.1}}</a>
-		{{/if}}
-		{{if $nav.admin}}
-		<div class="dropdown-divider"></div>
-		<a class="dropdown-item{{if $sel.name == Admin}} active{{/if}}" href="{{$nav.admin.0}}" title="{{$nav.admin.3}}" role="menuitem" id="{{$nav.admin.4}}">{{$nav.admin.1}}</a>
+<div class="container-fluid">
+	{{if $nav.login && !$userinfo}}
+	<div class="d-lg-none pt-1 pb-1">
+		{{if $nav.loginmenu.1.4}}
+		<a class="btn btn-primary btn-sm text-white" href="#" title="{{$nav.loginmenu.1.3}}" id="{{$nav.loginmenu.1.4}}_collapse" data-bs-toggle="modal" data-bs-target="#nav-login">
+			{{$nav.loginmenu.1.1}}
+		</a>
+		{{else}}
+		<a class="btn btn-primary btn-sm text-white" href="login" title="{{$nav.loginmenu.1.3}}">
+			{{$nav.loginmenu.1.1}}
+		</a>
 		{{/if}}
-		{{if $nav.logout}}
-		<div class="dropdown-divider"></div>
-		<a class="dropdown-item" href="{{$nav.logout.0}}" title="{{$nav.logout.3}}" role="menuitem" id="{{$nav.logout.4}}">{{$nav.logout.1}}</a>
+		{{if $nav.register}}
+		<a class="btn btn-warning btn-sm text-dark" href="{{$nav.register.0}}" title="{{$nav.register.3}}" id="{{$nav.register.4}}" >
+			{{$nav.register.1}}
+		</a>
 		{{/if}}
 	</div>
 	{{/if}}
-	{{if ! $is_owner}}
-	<div class="dropdown-menu" role="menu" aria-labelledby="avatar">
-		<a class="dropdown-item" href="{{$nav.rusermenu.0}}" role="menuitem">{{$nav.rusermenu.1}}</a>
-		<a class="dropdown-item" href="{{$nav.rusermenu.2}}" role="menuitem">{{$nav.rusermenu.3}}</a>
-	</div>
-	{{/if}}
-</div>
-{{if $sel.name}}
-<div id="nav-app-link-wrapper" class="navbar-nav{{if $sitelocation || ! $settings_url}} has_location mr-auto{{/if}}">
-	<a id="nav-app-link" href="{{$url}}" class="nav-link text-truncate">
-		{{$sel.name}}
-		{{if $sitelocation}}
-		<br><small>{{$sitelocation}}</small>
-		{{/if}}
-	</a>
-
-</div>
-{{if $settings_url}}
-<div id="nav-app-settings-link-wrapper" class="navbar-nav mr-auto">
-	<a id="nav-app-settings-link" href="{{$settings_url}}/?f=&rpath={{$url}}" class="nav-link">
-		<i class="fa fa-fw fa-cog"></i>
-	</a>
-</div>
-{{/if}}
-{{/if}}
-{{/if}}
-<div class="navbar-toggler-right">
-	{{if $nav.help.6}}
-	<button id="context-help-btn" class="navbar-toggler border-0" type="button" onclick="contextualHelp(); return false;">
-		<i class="fa fa-question-circle"></i>
-	</button>
-	{{/if}}
-	<button id="expand-aside" type="button" class="d-lg-none navbar-toggler border-0" data-toggle="offcanvas" data-target="#region_1">
-		<i class="fa fa-arrow-circle-right" id="expand-aside-icon"></i>
-	</button>
-	{{if $localuser || $nav.pubs}}
-	<button id="notifications-btn-1" type="button" class="navbar-toggler border-0 notifications-btn">
-		<i id="notifications-btn-icon-1" class="fa fa-exclamation-circle notifications-btn-icon"></i>
-	</button>
-	{{/if}}
-	<button id="menu-btn" class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#navbar-collapse-2">
-		<i class="fa fa-bars"></i>
-	</button>
-</div>
-<div class="collapse navbar-collapse" id="navbar-collapse-1">
-	<ul class="navbar-nav mr-auto">
-		{{if $nav.login && !$userinfo}}
-		<li class="nav-item d-lg-flex">
-			{{if $nav.loginmenu.1.4}}
-			<a class="nav-link" href="#" title="{{$nav.loginmenu.1.3}}" id="{{$nav.loginmenu.1.4}}" data-toggle="modal" data-target="#nav-login">
-			{{$nav.loginmenu.1.1}}
+	{{if $userinfo}}
+	<div class="d-flex justify-content-start">
+		<div class="dropdown">
+			<div class="fakelink usermenu" data-bs-toggle="dropdown">
+				<img id="avatar" src="{{$userinfo.icon}}" alt="{{$userinfo.name}}">
+				<i class="fa fa-caret-down"></i>
+			</div>
+			{{if $is_owner}}
+			<div class="dropdown-menu">
+				{{foreach $nav.usermenu as $usermenu}}
+				<a class="dropdown-item{{if $usermenu.2}} active{{/if}}"  href="{{$usermenu.0}}" title="{{$usermenu.3}}" role="menuitem" id="{{$usermenu.4}}">{{$usermenu.1}}</a>
+				{{/foreach}}
+				{{if $nav.group}}
+				<a class="dropdown-item" href="{{$nav.group.0}}" title="{{$nav.group.3}}" role="menuitem" id="{{$nav.group.4}}">{{$nav.group.1}}</a>
+				{{/if}}
+				{{if $nav.manage}}
+				<a class="dropdown-item{{if $sel.name == Manage}} active{{/if}}" href="{{$nav.manage.0}}" title="{{$nav.manage.3}}" role="menuitem" id="{{$nav.manage.4}}">{{$nav.manage.1}}</a>
+				{{/if}}
+				{{if $nav.channels}}
+				{{foreach $nav.channels as $chan}}
+				<a class="dropdown-item" href="manage/{{$chan.channel_id}}" title="{{$chan.channel_name}}" role="menuitem"><i class="fa fa-circle{{if $localuser == $chan.channel_id}} text-success{{else}} invisible{{/if}}"></i> {{$chan.channel_name}}</a>
+				{{/foreach}}
+				{{/if}}
+				{{if $nav.profiles}}
+				<a class="dropdown-item" href="{{$nav.profiles.0}}" title="{{$nav.profiles.3}}" role="menuitem" id="{{$nav.profiles.4}}">{{$nav.profiles.1}}</a>
+				{{/if}}
+				{{if $nav.settings}}
+				<div class="dropdown-divider"></div>
+				<a class="dropdown-item{{if $sel.name == Settings}} active{{/if}}" href="{{$nav.settings.0}}" title="{{$nav.settings.3}}" role="menuitem" id="{{$nav.settings.4}}">{{$nav.settings.1}}</a>
+				{{/if}}
+				{{if $nav.admin}}
+				<div class="dropdown-divider"></div>
+				<a class="dropdown-item{{if $sel.name == Admin}} active{{/if}}" href="{{$nav.admin.0}}" title="{{$nav.admin.3}}" role="menuitem" id="{{$nav.admin.4}}">{{$nav.admin.1}}</a>
+				{{/if}}
+				{{if $nav.logout}}
+				<div class="dropdown-divider"></div>
+				<a class="dropdown-item" href="{{$nav.logout.0}}" title="{{$nav.logout.3}}" role="menuitem" id="{{$nav.logout.4}}">{{$nav.logout.1}}</a>
+				{{/if}}
+			</div>
+			{{/if}}
+			{{if ! $is_owner}}
+			<div class="dropdown-menu" role="menu" aria-labelledby="avatar">
+				<a class="dropdown-item" href="{{$nav.rusermenu.0}}" role="menuitem">{{$nav.rusermenu.1}}</a>
+				<a class="dropdown-item" href="{{$nav.rusermenu.2}}" role="menuitem">{{$nav.rusermenu.3}}</a>
+			</div>
+			{{/if}}
+		</div>
+		{{if $sel.name}}
+		<div id="nav-app-link-wrapper" class="navbar-nav{{if $sitelocation}} has_location{{/if}}">
+			<a id="nav-app-link" href="{{$url}}" class="nav-link text-truncate">
+				{{$sel.name}}
+				{{if $sitelocation}}
+				<br><small>{{$sitelocation}}</small>
+				{{/if}}
 			</a>
-			{{else}}
-			<a class="nav-link" href="login" title="{{$nav.loginmenu.1.3}}">
-				{{$nav.loginmenu.1.1}}
+		</div>
+		{{if $settings_url}}
+		<div id="nav-app-settings-link-wrapper" class="navbar-nav">
+			<a id="nav-app-settings-link" href="{{$settings_url}}/?f=&rpath={{$url}}" class="nav-link">
+				<i class="fa fa-fw fa-cog"></i>
 			</a>
-			{{/if}}
-		</li>
-		{{/if}}
-		{{if $nav.register}}
-		<li class="nav-item {{$nav.register.2}} d-lg-flex">
-			<a class="nav-link" href="{{$nav.register.0}}" title="{{$nav.register.3}}" id="{{$nav.register.4}}">{{$nav.register.1}}</a>
-		</li>
+		</div>
 		{{/if}}
-		{{if $nav.alogout}}
-		<li class="nav-item {{$nav.alogout.2}} d-lg-flex">
-			<a class="nav-link" href="{{$nav.alogout.0}}" title="{{$nav.alogout.3}}" id="{{$nav.alogout.4}}">{{$nav.alogout.1}}</a>
-		</li>
 		{{/if}}
-	</ul>
-
-	<div id="banner" class="navbar-text">{{$banner}}</div>
+	</div>
+	{{/if}}
 
-	<ul id="nav-right" class="navbar-nav ml-auto">
-		<li class="nav-item collapse clearfix" id="nav-search">
-			<form class="form-inline" method="get" action="{{$nav.search.4}}" role="search">
-				<input class="form-control form-control-sm mt-1 mr-2" id="nav-search-text" type="text" value="" placeholder="{{$help}}" name="search" title="{{$nav.search.3}}" onclick="this.submit();" onblur="closeMenu('nav-search'); openMenu('nav-search-btn');"/>
-			</form>
-			<div id="nav-search-spinner" class="spinner-wrapper">
-				<div class="spinner s"></div>
-			</div>
-		</li>
-		<li class="nav-item" id="nav-search-btn">
-			<a class="nav-link" href="#nav-search" title="{{$nav.search.3}}" onclick="openMenu('nav-search'); closeMenu('nav-search-btn'); $('#nav-search-text').focus(); return false;"><i class="fa fa-fw fa-search"></i></a>
-		</li>
+	<div class="navbar-toggler-right">
 		{{if $nav.help.6}}
-		<li class="nav-item dropdown {{$sel.help}}">
-			<a class="nav-link {{$nav.help.2}}" target="hubzilla-help" href="{{$nav.help.0}}" title="{{$nav.help.3}}" id="{{$nav.help.4}}" onclick="contextualHelp(); return false;"><i class="fa fa-fw fa-question-circle"></i></a>
-		</li>
+		<button id="context-help-btn" class="navbar-toggler border-0" type="button" onclick="contextualHelp(); return false;">
+			<i class="fa fa-question-circle"></i>
+		</button>
 		{{/if}}
+		<button id="expand-aside" type="button" class="d-lg-none navbar-toggler border-0" data-bs-toggle="offcanvas" data-bs-target="#region_1">
+			<i class="fa fa-arrow-circle-right" id="expand-aside-icon"></i>
+		</button>
 		{{if $localuser || $nav.pubs}}
-		<li id="notifications-btn" class="nav-item d-xl-none">
-			<a class="nav-link text-white notifications-btn" href="#"><i id="notifications-btn-icon" class="fa fa-exclamation-circle  notifications-btn-icon"></i></a>
-		</li>
+		<button id="notifications-btn-1" type="button" class="navbar-toggler border-0 notifications-btn">
+			<i id="notifications-btn-icon-1" class="fa fa-exclamation-circle notifications-btn-icon"></i>
+		</button>
 		{{/if}}
-		{{if $channel_menu && $channel_apps.0}}
-		<li class="nav-item dropdown" id="channel-menu">
-			<a class="nav-link" href="#" data-toggle="dropdown"><img src="{{$channel_thumb}}" style="height:14px; width:14px;position:relative; top:-2px;" /></a>
-			<div id="dropdown-menu" class="dropdown-menu dropdown-menu-right">
-				{{foreach $channel_apps as $channel_app}}
-				{{$channel_app}}
-				{{/foreach}}
-			</div>
-		</li>
-		{{/if}}
-		{{if $navbar_apps}}
-		{{foreach $navbar_apps as $navbar_app}}
-		<li>
-		{{$navbar_app}}
-		</li>
-		{{/foreach}}
-		{{/if}}
-		<li class="nav-item dropdown" id="app-menu">
-			<a class="nav-link" href="#" data-toggle="dropdown"><i class="fa fa-fw fa-bars"></i></a>
-			<div id="dropdown-menu" class="dropdown-menu dropdown-menu-right">
-				{{if $channel_apps.0 && ! $channel_menu}}
-				{{foreach $channel_apps as $channel_app}}
-				{{$channel_app}}
-				{{/foreach}}
-				<div class="dropdown-divider"></div>
-				<div class="dropdown-header text-black-50 sys-apps-toggle" onclick="$('#dropdown-menu').click(function(e) { e.stopPropagation(); }); openClose('sys_apps');">
-					{{$sysapps_toggle}}
-				</div>
-				<div id="sys_apps" style="display:none;">
+		<!--a class="nav-link" href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample"><i class="fa fa-fw fa-bars"></i></a-->
+
+
+		<button id="menu-btn" class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#app-bin">
+			<i class="fa fa-bars"></i>
+		</button>
+	</div>
+	<div class="collapse navbar-collapse justify-content-between" id="navbar-collapse-1">
+		<ul class="navbar-nav">
+			{{if $nav.login && !$userinfo}}
+			<li class="nav-item d-lg-flex">
+				{{if $nav.loginmenu.1.4}}
+				<a class="nav-link" href="#" title="{{$nav.loginmenu.1.3}}" id="{{$nav.loginmenu.1.4}}" data-bs-toggle="modal" data-bs-target="#nav-login">
+				{{$nav.loginmenu.1.1}}
+				</a>
+				{{else}}
+				<a class="nav-link" href="login" title="{{$nav.loginmenu.1.3}}">
+					{{$nav.loginmenu.1.1}}
+				</a>
 				{{/if}}
-				{{foreach $nav_apps as $nav_app}}
-				{{$nav_app}}
-				{{/foreach}}
-				{{if $channel_apps.0 && ! $channel_menu}}
+			</li>
+			{{/if}}
+			{{if $nav.register}}
+			<li class="nav-item {{$nav.register.2}} d-lg-flex">
+				<a class="nav-link" href="{{$nav.register.0}}" title="{{$nav.register.3}}" id="{{$nav.register.4}}">{{$nav.register.1}}</a>
+			</li>
+			{{/if}}
+			{{if $nav.alogout}}
+			<li class="nav-item {{$nav.alogout.2}} d-lg-flex">
+				<a class="nav-link" href="{{$nav.alogout.0}}" title="{{$nav.alogout.3}}" id="{{$nav.alogout.4}}">{{$nav.alogout.1}}</a>
+			</li>
+			{{/if}}
+		</ul>
+
+		<div id="banner" class="navbar-text">{{$banner}}</div>
+
+		<ul id="nav-right" class="navbar-nav">
+			<li class="nav-item collapse clearfix" id="nav-search">
+				<form class="form-inline" method="get" action="{{$nav.search.4}}" role="search">
+					<input class="form-control form-control-sm mt-1 me-2" id="nav-search-text" type="text" value="" placeholder="{{$help}}" name="search" title="{{$nav.search.3}}" onclick="this.submit();" onblur="closeMenu('nav-search'); openMenu('nav-search-btn');"/>
+				</form>
+				<div id="nav-search-spinner" class="spinner-wrapper">
+					<div class="spinner s"></div>
 				</div>
-				{{/if}}
-				{{if $is_owner}}
-				<div class="dropdown-divider"></div>
-				<a class="dropdown-item" href="/apps"><i class="generic-icons-nav fa fa-fw fa-plus-circle"></i>{{$addapps}}</a>
-				<a class="dropdown-item" href="/apporder"><i class="generic-icons-nav fa fa-fw fa-sort"></i>{{$orderapps}}</a>
-				{{/if}}
+			</li>
+			<li class="nav-item" id="nav-search-btn">
+				<a class="nav-link" href="#nav-search" title="{{$nav.search.3}}" onclick="openMenu('nav-search'); closeMenu('nav-search-btn'); $('#nav-search-text').focus(); return false;"><i class="fa fa-fw fa-search"></i></a>
+			</li>
+			{{if $nav.help.6}}
+			<li class="nav-item dropdown {{$sel.help}}">
+				<a class="nav-link {{$nav.help.2}}" target="hubzilla-help" href="{{$nav.help.0}}" title="{{$nav.help.3}}" id="{{$nav.help.4}}" onclick="contextualHelp(); return false;"><i class="fa fa-fw fa-question-circle"></i></a>
+			</li>
+			{{/if}}
+			{{if $localuser || $nav.pubs}}
+			<li id="notifications-btn" class="nav-item d-xl-none">
+				<a class="nav-link text-white notifications-btn" href="#"><i id="notifications-btn-icon" class="fa fa-exclamation-circle  notifications-btn-icon"></i></a>
+			</li>
+			{{/if}}
+			{{**if $channel_menu && $channel_apps.0}}
+			<li class="nav-item dropdown" id="channel-menu">
+				<a class="nav-link" href="#" data-bs-toggle="dropdown"><img src="{{$channel_thumb}}" style="height:14px; width:14px;position:relative; top:-2px;" /></a>
+				<div id="dropdown-menu" class="dropdown-menu dropdown-menu-end">
+					{{foreach $channel_apps as $channel_app}}
+					{{$channel_app}}
+					{{/foreach}}
+				</div>
+			</li>
+			{{/if**}}
+			{{if $navbar_apps}}
+			{{foreach $navbar_apps as $navbar_app}}
+			<li>
+			{{$navbar_app}}
+			</li>
+			{{/foreach}}
+			{{/if}}
+			<li class="nav-item dropdown" id="app-menu">
+				<a class="nav-link" href="#" data-bs-toggle="offcanvas" data-bs-target="#app-bin" aria-controls="app-bin"><i class="fa fa-fw fa-bars"></i></a>
+				<!--div id="dropdown-menu" class="dropdown-menu dropdown-menu-end">
+					{{if $channel_apps.0 && ! $channel_menu}}
+					{{foreach $channel_apps as $channel_app}}
+					{{$channel_app}}
+					{{/foreach}}
+					<div class="dropdown-divider"></div>
+					<div class="dropdown-header text-black-50 sys-apps-toggle" onclick="$('#dropdown-menu').click(function(e) { e.stopPropagation(); }); openClose('sys_apps');">
+						{{$sysapps_toggle}}
+					</div>
+					<div id="sys_apps" style="display:none;">
+					{{/if}}
+					{{foreach $nav_apps as $nav_app}}
+					{{$nav_app}}
+					{{/foreach}}
+					{{if $channel_apps.0 && ! $channel_menu}}
+					</div>
+					{{/if}}
+					{{if $is_owner}}
+					<div class="dropdown-divider"></div>
+					<a class="dropdown-item" href="/apps"><i class="generic-icons-nav fa fa-fw fa-plus-circle"></i>{{$addapps}}</a>
+					<a class="dropdown-item" href="/apporder"><i class="generic-icons-nav fa fa-fw fa-sort"></i>{{$orderapps}}</a>
+					{{/if}}
+				</div-->
+			</li>
+		</ul>
+	</div>
+	<!--div class="collapse d-lg-none" id="navbar-collapse-2">
+		<div class="navbar-nav">
+			{{if $channel_apps.0}}
+			{{foreach $channel_apps as $channel_app}}
+			{{$channel_app|replace:'dropdown-item':'nav-link'}}
+			{{/foreach}}
+			<div class="dropdown-header text-white-50 sys-apps-toggle" onclick="openClose('sys-apps-collapsed');">
+				{{$sysapps_toggle}}
 			</div>
-		</li>
-	</ul>
+			<div id="sys-apps-collapsed" style="display:none;">
+			{{/if}}
+			{{foreach $navbar_apps as $navbar_app}}
+			{{$navbar_app}}
+			{{/foreach}}
+			{{foreach $nav_apps as $nav_app}}
+			{{$nav_app|replace:'dropdown-item':'nav-link'}}
+			{{/foreach}}
+			{{if $channel_apps.0}}
+			</div>
+			{{/if}}
+			{{if $is_owner}}
+			<div class="dropdown-divider"></div>
+			<a class="nav-link" href="/apps"><i class="generic-icons-nav fa fa-fw fa-plus-circle"></i>{{$addapps}}</a>
+			<a class="nav-link" href="/apporder"><i class="generic-icons-nav fa fa-fw fa-sort"></i>{{$orderapps}}</a>
+			{{/if}}
+		</div>
+	</div-->
+	{{if $nav.help.6}}
+	<div id="contextual-help-content" class="contextual-help-content">
+		{{$nav.help.5}}
+		<div class="float-end">
+			<a class="btn btn-primary btn-sm" target="hubzilla-help" href="{{$nav.help.0}}" title="{{$nav.help.3}}"><i class="fa fa-question"></i>&nbsp;{{$fulldocs}}</a>
+			<a class="contextual-help-tool" href="#" onclick="contextualHelp(); return false;"><i class="fa fa-times"></i></a>
+		</div>
+	</div>
+	{{/if}}
 </div>
-<div class="collapse d-lg-none" id="navbar-collapse-2">
-	<div class="navbar-nav mr-auto">
-		{{if $channel_apps.0}}
+<div class="offcanvas offcanvas-end" tabindex="-1" id="app-bin" aria-labelledby="app-bin-label">
+	<div class="offcanvas-header">
+		<div class="offcanvas-title" id="app-bin-label">
+			{{if $name}}
+			<div class="h3"><img src="{{$thumb}}" class="menu-img-1"> {{$name}}</div>
+			{{else}}
+			<div class="h3">{{$apps}}</div>
+			{{/if}}
+		</div>
+		<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+	</div>
+	<div class="offcanvas-body">
+		{{if $channel_apps.0 && ! $channel_menu}}
+		<div class="dropdown-header">
+			{{$channelapps}}
+		</div>
 		{{foreach $channel_apps as $channel_app}}
-		{{$channel_app|replace:'dropdown-item':'nav-link'}}
+		{{$channel_app}}
 		{{/foreach}}
-		<div class="dropdown-header text-white-50 sys-apps-toggle" onclick="openClose('sys-apps-collapsed');">
-			{{$sysapps_toggle}}
+		<div class="dropdown-divider"></div>
+		<div class="dropdown-header">
+			{{$sysapps}}
 		</div>
-		<div id="sys-apps-collapsed" style="display:none;">
 		{{/if}}
-		{{foreach $navbar_apps as $navbar_app}}
-		{{$navbar_app}}
-		{{/foreach}}
 		{{foreach $nav_apps as $nav_app}}
-		{{$nav_app|replace:'dropdown-item':'nav-link'}}
+			{{$nav_app}}
 		{{/foreach}}
-		{{if $channel_apps.0}}
-		</div>
-		{{/if}}
 		{{if $is_owner}}
 		<div class="dropdown-divider"></div>
-		<a class="nav-link" href="/apps"><i class="generic-icons-nav fa fa-fw fa-plus-circle"></i>{{$addapps}}</a>
-		<a class="nav-link" href="/apporder"><i class="generic-icons-nav fa fa-fw fa-sort"></i>{{$orderapps}}</a>
+		<a class="dropdown-item" href="/apps"><i class="generic-icons-nav fa fa-fw fa-plus-circle"></i>{{$addapps}}</a>
+		<a class="dropdown-item" href="/apporder"><i class="generic-icons-nav fa fa-fw fa-sort"></i>{{$orderapps}}</a>
 		{{/if}}
 	</div>
 </div>
-{{if $nav.help.6}}
-<div id="contextual-help-content" class="contextual-help-content">
-	{{$nav.help.5}}
-	<div class="float-right">
-		<a class="btn btn-primary btn-sm" target="hubzilla-help" href="{{$nav.help.0}}" title="{{$nav.help.3}}"><i class="fa fa-question"></i>&nbsp;{{$fulldocs}}</a>
-		<a class="contextual-help-tool" href="#" onclick="contextualHelp(); return false;"><i class="fa fa-times"></i></a>
-	</div>
-</div>
-{{/if}}
diff --git a/view/tpl/navbar_tucson.tpl b/view/tpl/navbar_tucson.tpl
index 362b261c5..c790e3fbf 100644
--- a/view/tpl/navbar_tucson.tpl
+++ b/view/tpl/navbar_tucson.tpl
@@ -1,7 +1,7 @@
 {{if $nav.login && !$userinfo}}
 <div class="d-lg-none pt-1 pb-1">
 	{{if $nav.loginmenu.1.4}}
-	<a class="btn btn-primary btn-sm text-white" href="#" title="{{$nav.loginmenu.1.3}}" id="{{$nav.loginmenu.1.4}}_collapse" data-toggle="modal" data-target="#nav-login">
+	<a class="btn btn-primary btn-sm text-white" href="#" title="{{$nav.loginmenu.1.3}}" id="{{$nav.loginmenu.1.4}}_collapse" data-bs-toggle="modal" data-bs-target="#nav-login">
 		{{$nav.loginmenu.1.1}}
 	</a>
 	{{else}}
@@ -18,7 +18,7 @@
 {{/if}}
 {{if $userinfo}}
 <div class="dropdown">
-	<div class="fakelink usermenu" data-toggle="dropdown">
+	<div class="fakelink usermenu" data-bs-toggle="dropdown">
 		<img id="avatar" src="{{$userinfo.icon}}" alt="{{$userinfo.name}}">
 		<i class="fa fa-caret-down"></i>
 	</div>
@@ -76,7 +76,7 @@
 		<i class="fa fa-question-circle"></i>
 	</button>
 	{{/if}}
-	<button id="expand-aside" type="button" class="d-lg-none navbar-toggler border-0" data-toggle="offcanvas" data-target="#region_1">
+	<button id="expand-aside" type="button" class="d-lg-none navbar-toggler border-0" data-bs-toggle="offcanvas" data-bs-target="#region_1">
 		<i class="fa fa-arrow-circle-right" id="expand-aside-icon"></i>
 	</button>
 	{{if $localuser || $nav.pubs}}
@@ -84,7 +84,7 @@
 		<i id="notifications-btn-icon-1" class="fa fa-exclamation-circle notifications-btn-icon"></i>
 	</button>
 	{{/if}}
-	<button id="menu-btn" class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#navbar-collapse-2">
+	<button id="menu-btn" class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-2">
 		<i class="fa fa-bars"></i>
 	</button>
 </div>
@@ -93,7 +93,7 @@
 		{{if $nav.login && !$userinfo}}
 		<li class="nav-item d-lg-flex">
 			{{if $nav.loginmenu.1.4}}
-			<a class="nav-link" href="#" title="{{$nav.loginmenu.1.3}}" id="{{$nav.loginmenu.1.4}}" data-toggle="modal" data-target="#nav-login">
+			<a class="nav-link" href="#" title="{{$nav.loginmenu.1.3}}" id="{{$nav.loginmenu.1.4}}" data-bs-toggle="modal" data-bs-target="#nav-login">
 			{{$nav.loginmenu.1.1}}
 			</a>
 			{{else}}
@@ -120,7 +120,7 @@
 	<ul id="nav-right" class="navbar-nav ml-auto">
 		<li class="nav-item collapse clearfix" id="nav-search">
 			<form class="form-inline" method="get" action="search" role="search">
-				<input class="form-control form-control-sm mt-1 mr-2" id="nav-search-text" type="text" value="" placeholder="{{$help}}" name="search" title="{{$nav.search.3}}" onclick="this.submit();" onblur="closeMenu('nav-search'); openMenu('nav-search-btn');"/>
+				<input class="form-control form-control-sm mt-1 me-2" id="nav-search-text" type="text" value="" placeholder="{{$help}}" name="search" title="{{$nav.search.3}}" onclick="this.submit();" onblur="closeMenu('nav-search'); openMenu('nav-search-btn');"/>
 			</form>
 			<div id="nav-search-spinner" class="spinner-wrapper">
 				<div class="spinner s"></div>
@@ -141,7 +141,7 @@
 		{{/if}}
 		{{if $channel_menu && $channel_apps.0}}
 		<li class="nav-item dropdown" id="channel-menu">
-			<a class="nav-link" href="#" data-toggle="dropdown"><img src="{{$channel_thumb}}" style="height:14px; width:14px;position:relative; top:-2px;" /></a>
+			<a class="nav-link" href="#" data-bs-toggle="dropdown"><img src="{{$channel_thumb}}" style="height:14px; width:14px;position:relative; top:-2px;" /></a>
 			<div id="dropdown-menu" class="dropdown-menu dropdown-menu-right">
 				{{foreach $channel_apps as $channel_app}}
 				{{$channel_app}}
@@ -157,7 +157,7 @@
 		{{/foreach}}
 		{{/if}}
 		<li class="nav-item dropdown" id="app-menu">
-			<a class="nav-link" href="#" data-toggle="dropdown"><i class="fa fa-fw fa-bars"></i></a>
+			<a class="nav-link" href="#" data-bs-toggle="dropdown"><i class="fa fa-fw fa-bars"></i></a>
 			<div id="dropdown-menu" class="dropdown-menu dropdown-menu-right">
 				{{if $channel_apps.0 && ! $channel_menu}}
 				{{foreach $channel_apps as $channel_app}}
@@ -214,7 +214,7 @@
 {{if $nav.help.6}}
 <div id="contextual-help-content" class="contextual-help-content">
 	{{$nav.help.5}}
-	<div class="float-right">
+	<div class="float-end">
 		<a class="btn btn-primary btn-sm" target="hubzilla-help" href="{{$nav.help.0}}" title="{{$nav.help.3}}"><i class="fa fa-question"></i>&nbsp;{{$fulldocs}}</a>
 		<a class="contextual-help-tool" href="#" onclick="contextualHelp(); return false;"><i class="fa fa-times"></i></a>
 	</div>
diff --git a/view/tpl/notifications.tpl b/view/tpl/notifications.tpl
index 53ff8de52..92ffa1fdd 100644
--- a/view/tpl/notifications.tpl
+++ b/view/tpl/notifications.tpl
@@ -1,7 +1,7 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper clearfix">
 		{{if $notifications_available}}
-		<a href="#" class="btn btn-outline-secondary btn-sm float-right" onclick="markRead('notify'); setTimeout(function() { window.location.href=window.location.href; },1500); return false;">{{$notif_link_mark_seen}}</a>
+		<a href="#" class="btn btn-outline-secondary btn-sm float-end" onclick="markRead('notify'); setTimeout(function() { window.location.href=window.location.href; },1500); return false;">{{$notif_link_mark_seen}}</a>
 		{{/if}}
 		<h2>{{$notif_header}}</h2>
 	</div>
diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index 1092bc155..15d229f55 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -151,7 +151,7 @@
 	</div>
 	<div id="nav-notifications-forums-template" rel="template">
 		<a class="list-group-item text-decoration-none clearfix notification notification-forum" href="{0}" title="{4} - {3}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-b64mids='{12}'>
-			<span class="float-right badge badge-secondary">{10}</span>
+			<span class="float-end badge badge-secondary">{10}</span>
 			<img class="menu-img-1" data-src="{1}" loading="lazy">
 			<span class="">{2}</span>
 			<i class="fa fa-{11} text-muted"></i>
@@ -160,9 +160,9 @@
 	<div id="notifications" class="border border-bottom-0 rounded navbar-nav collapse">
 		{{foreach $notifications as $notification}}
 		<div class="rounded list-group list-group-flush collapse {{$notification.type}}-button">
-			<a id="notification-link-{{$notification.type}}" class="collapsed list-group-item text-decoration-none notification-link" href="#" title="{{$notification.title}}" data-target="#nav-{{$notification.type}}-sub" data-toggle="collapse" data-sse_type="{{$notification.type}}">
+			<a id="notification-link-{{$notification.type}}" class="collapsed list-group-item text-decoration-none notification-link" href="#" title="{{$notification.title}}" data-bs-target="#nav-{{$notification.type}}-sub" data-bs-toggle="collapse" data-sse_type="{{$notification.type}}">
 				<i class="fa fa-fw fa-{{$notification.icon}}"></i> {{$notification.label}}
-				<span class="float-right badge badge-{{$notification.severity}} {{$notification.type}}-update"></span>
+				<span class="float-end badge badge-{{$notification.severity}} {{$notification.type}}-update"></span>
 			</a>
 			<div id="nav-{{$notification.type}}-sub" class="list-group list-group-flush border border-left-0 border-top-0 border-right-0 collapse notification-content" data-parent="#notifications" data-sse_type="{{$notification.type}}">
 				{{if $notification.viewall}}
diff --git a/view/tpl/notify.tpl b/view/tpl/notify.tpl
index b5bccc8a4..029e5aa3e 100644
--- a/view/tpl/notify.tpl
+++ b/view/tpl/notify.tpl
@@ -1,6 +1,6 @@
 <div class="mb-4 notif-item">
 	{{if ! $item_seen}}
-	<span class="float-right badge badge-pill badge-success text-uppercase">{{$new}}</span>
+	<span class="float-end badge badge-pill badge-success text-uppercase">{{$new}}</span>
 	{{/if}}
 	<a href="{{$item_link}}">
 		<img src="{{$item_image}}" class="menu-img-3">
diff --git a/view/tpl/peoplefind.tpl b/view/tpl/peoplefind.tpl
index bbcc0b85b..cb0617b10 100644
--- a/view/tpl/peoplefind.tpl
+++ b/view/tpl/peoplefind.tpl
@@ -1,7 +1,7 @@
 <div id="peoplefind-sidebar" class="widget">
 	<h3>{{$findpeople}}</h3>
 	<form action="directory" method="post" />
-		<div class="input-group form-group">
+		<div class="input-group mb-3">
 			<input class="form-control" type="text" name="search" title="{{$hint}}{{if $advanced_search}}{{$advanced_hint}}{{/if}}" placeholder="{{$desc}}" />
 			<div class="input-group-append">
 				<button class="btn btn-sm btn-outline-secondary" type="submit" name="submit"><i class="fa fa-fw fa-search"></i></button>
diff --git a/view/tpl/permcats.tpl b/view/tpl/permcats.tpl
index 442b3e11a..83a04210e 100644
--- a/view/tpl/permcats.tpl
+++ b/view/tpl/permcats.tpl
@@ -12,7 +12,7 @@
 			<input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
 			{{include file="field_input.tpl" field=$name}}
 
-			<div class="settings-submit-wrapper form-group">
+			<div class="settings-submit-wrapper mb-3">
 				<button type="submit" name="submit" class="btn btn-primary">{{$submit}}</button>
 			</div>
 	</div>
@@ -20,7 +20,7 @@
 	<div class="panel" id="permission-settings">
 		<div class="section-subtitle-wrapper" role="tab" id="perms-tool">
 			<h3>
-				<a data-toggle="collapse" data-parent="#permission-settings" href="#perms-tool-collapse" aria-expanded="true" aria-controls="perms-tool-collapse">
+				<a data-bs-toggle="collapse" data-parent="#permission-settings" href="#perms-tool-collapse" aria-expanded="true" aria-controls="perms-tool-collapse">
 				{{$permlbl}}
 				</a>
 			</h3>
@@ -31,7 +31,7 @@
 				{{$permnote}}
 				</div>
 
-				<table id="perms-tool-table" class=form-group>
+				<table id="perms-tool-table" class=mb-3>
 					<tr>
 						<td></td><td colspan="2" class="abook-me">{{$me}}</td>
 					</tr>
diff --git a/view/tpl/photo_album.tpl b/view/tpl/photo_album.tpl
index ad4e2a38c..d01260f07 100644
--- a/view/tpl/photo_album.tpl
+++ b/view/tpl/photo_album.tpl
@@ -1,6 +1,6 @@
 <div class="{{if !$no_fullscreen_btn}}generic-content-wrapper{{/if}}">
 	<div class="section-title-wrapper">
-		<div class="pull-right">
+		<div class="float-end">
 			{{if $order}}
 			<a class="btn btn-outline-secondary btn-sm" href="{{$order.1}}" title="{{$order.0}}"><i class="fa fa-sort"></i></a>
 			{{/if}}
@@ -24,7 +24,7 @@
 				{{include file="photo_top.tpl"}}
 			{{/foreach}}
 			{{** make sure this element is at the bottom - we rely on that for endless scroll **}}
-			<span id="page-end" class="d-block float-left w-100" style="position: absolute; bottom: 0px"></span>
+			<span id="page-end" class="d-block float-start w-100" style="position: absolute; bottom: 0px"></span>
 		</div>
 	</div>
 </div>
diff --git a/view/tpl/photo_albums.tpl b/view/tpl/photo_albums.tpl
index 83bdd95e7..9e77ba71e 100644
--- a/view/tpl/photo_albums.tpl
+++ b/view/tpl/photo_albums.tpl
@@ -5,7 +5,7 @@
 		{{if $albums}}
 		{{foreach $albums as $al}}
 		{{if $al.shorttext}}
-		<li class="nav-item"><a class="nav-link" href="{{$baseurl}}/photos/{{$nick}}/album/{{$al.bin2hex}}"><span class="badge badge-secondary float-right">{{$al.total}}</span>{{$al.shorttext}}</a></li>
+		<li class="nav-item"><a class="nav-link" href="{{$baseurl}}/photos/{{$nick}}/album/{{$al.bin2hex}}"><span class="badge badge-secondary float-end">{{$al.total}}</span>{{$al.shorttext}}</a></li>
 		{{/if}}
 		{{/foreach}}
 		{{/if}}
diff --git a/view/tpl/photo_item.tpl b/view/tpl/photo_item.tpl
index b6ee4508b..6ddca70e3 100644
--- a/view/tpl/photo_item.tpl
+++ b/view/tpl/photo_item.tpl
@@ -21,7 +21,7 @@
 		</div>
 		{{if $drop}}
 		<div class="p-2 clearfix wall-item-tools" id="wall-item-tools-{{$id}}" >
-			<div class="wall-item-tools-right pull-right">
+			<div class="wall-item-tools-right float-end">
 				{{$drop}}
 			</div>
 		</div>
diff --git a/view/tpl/photo_view.tpl b/view/tpl/photo_view.tpl
index 6d566cab9..d375cf0eb 100644
--- a/view/tpl/photo_view.tpl
+++ b/view/tpl/photo_view.tpl
@@ -1,10 +1,10 @@
 <div id="live-photos"></div>
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		<div class="pull-right">
+		<div class="float-end">
 			{{if $tools || $map || $edit}}
 			<div class="btn-group">
-				<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown">
+				<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
 					<i class="fa fa-cog"></i>&nbsp;{{$tools_label}}
 				</button>
 				<div class="dropdown-menu dropdown-menu-right flex-column">
@@ -23,7 +23,7 @@
 			{{/if}}
 			{{if $lock}}
 			<div class="btn-group">
-				<button id="lockview" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" title="{{$lock}}" onclick="lockview('photo',{{$id}});" ><i class="fa fa-lock"></i></button>
+				<button id="lockview" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" title="{{$lock}}" onclick="lockview('photo',{{$id}});" ><i class="fa fa-lock"></i></button>
 				<ul id="panel-{{$id}}" class="lockview-panel dropdown-menu dropdown-menu-right"></ul>
 			</div>
 			{{/if}}
@@ -48,7 +48,7 @@
 		<form action="photos/{{$edit.nickname}}/{{$edit.resource_id}}" method="post" id="photo_edit_form" class="acl-form" data-form_id="photo_edit_form" data-allow_cid='{{$edit.allow_cid}}' data-allow_gid='{{$edit.allow_gid}}' data-deny_cid='{{$edit.deny_cid}}' data-deny_gid='{{$edit.deny_gid}}'>
 			<input type="hidden" name="item_id" value="{{$edit.item_id}}" />
 			{{* album renaming is not supported atm.
-			<div class="form-group">
+			<div class="mb-3">
 				<label id="photo-edit-albumname-label" for="photo-edit-albumname">{{$edit.newalbum_label}}</label>
 				<input id="photo-edit-albumname" class="form-control" type="text" name="albname" value="{{$edit.album}}" placeholder="{{$edit.newalbum_placeholder}}" list="dl-albums" />
 				{{if $edit.albums}}
@@ -62,33 +62,33 @@
 				{{/if}}
 			</div>
 			*}}
-			<div class="form-group">
+			<div class="mb-3">
 				<label id="photo-edit-caption-label" for="photo-edit-caption">{{$edit.capt_label}}</label>
 				<input id="photo-edit-caption" class="form-control" type="text" name="desc" value="{{$edit.caption}}" />
 			</div>
-			<div class="form-group">
+			<div class="mb-3">
 				<label id="photo-edit-tags-label" for="photo-edit-newtag">{{$edit.tag_label}}</label>
 				<input name="newtag" id="photo-edit-newtag" class="form-control" title="{{$edit.help_tags}}" type="text" />
 			</div>
-			<div class="form-group">
+			<div class="mb-3">
 				{{include file="field_select.tpl" field=$edit.album_select}}
 			</div>
-			<div class="form-group">
+			<div class="mb-3">
 				<label class="radio-inline" id="photo-edit-rotate-cw-label" for="photo-edit-rotate-cw"><input id="photo-edit-rotate-cw" type="radio" name="rotate" value="1" />{{$edit.rotatecw}}</label>
 				<label class="radio-inline" id="photo-edit-rotate-ccw-label" for="photo-edit-rotate-ccw"><input id="photo-edit-rotate-ccw" type="radio" name="rotate" value="2" />{{$edit.rotateccw}}</label>
 			</div>
 			{{if $edit.adult_enabled}}
-			<div class="form-group">
+			<div class="mb-3">
 			{{include file="field_checkbox.tpl" field=$edit.adult}}
 			</div>
 			{{/if}}
 
-			<div class="form-group pull-left">
+			<div class="mb-3 float-start">
 				<button class="btn btn-danger btn-sm" id="photo-edit-delete-button" type="submit" name="delete" value="{{$edit.delete}}" onclick="return confirmDelete();" />{{$edit.delete}}</button>
 			</div>
-			<div class="form-group btn-group pull-right">
+			<div class="mb-3 btn-group float-end">
 				{{if $edit.aclselect}}
-				<button id="dbtn-acl" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#aclModal" onclick="return false;">
+				<button id="dbtn-acl" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#aclModal" onclick="return false;">
 					<i id="jot-perms-icon" class="fa fa-{{$edit.lockstate}}"></i>
 				</button>
 				{{/if}}
@@ -111,12 +111,12 @@
 		{{/if}}
 		<div class="photo-item-tools">
 			{{if $responses.count }}
-			<div class="photo-item-tools-left pull-left">
+			<div class="photo-item-tools-left float-start">
 				<div class="{{if $responses.count > 1}}btn-group{{/if}}">
 				{{foreach $responses as $verb=>$response}}
 					{{if $response.count}}
 					<div class="btn-group">
-						<button type="button" class="btn btn-outline-secondary btn-sm wall-item-like dropdown-toggle" data-toggle="dropdown" id="wall-item-{{$verb}}-{{$id}}">{{$response.count}} {{$response.button}}</button>
+						<button type="button" class="btn btn-outline-secondary btn-sm wall-item-like dropdown-toggle" data-bs-toggle="dropdown" id="wall-item-{{$verb}}-{{$id}}">{{$response.count}} {{$response.button}}</button>
 						{{if $response.list_part}}
 						<ul class="dropdown-menu" role="menu" aria-labelledby="wall-item-{{$verb}}-{{$id}}">{{foreach $response.list_part as $liker}}<li role="presentation">{{$liker}}</li>{{/foreach}}</ul>
 						{{else}}
@@ -127,14 +127,14 @@
 							<div class="modal-dialog">
 								<div class="modal-content">
 									<div class="modal-header">
-										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+										<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
 										<h4 class="modal-title">{{$response.title}}</h4>
 									</div>
 									<div class="modal-body">
 										<ul>{{foreach $response.list as $liker}}<li role="presentation">{{$liker}}</li>{{/foreach}}</ul>
 									</div>
 									<div class="modal-footer clear">
-										<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{$modal_dismiss}}</button>
+										<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{$modal_dismiss}}</button>
 									</div>
 								</div><!-- /.modal-content -->
 							</div><!-- /.modal-dialog -->
@@ -147,7 +147,7 @@
 			</div>
 			{{/if}}
 			{{if $likebuttons}}
-			<div class="photo-item-tools-right btn-group pull-right">
+			<div class="photo-item-tools-right btn-group float-end">
 				<button type="button" class="btn btn-outline-secondary btn-sm" onclick="dolike({{$likebuttons.id}},'like'); return false">
 					<i class="fa fa-thumbs-o-up" title="{{$likebuttons.likethis}}"></i>
 				</button>
@@ -155,7 +155,7 @@
 					<i class="fa fa-thumbs-o-down" title="{{$likebuttons.nolike}}"></i>
 				</button>
 			</div>
-			<div id="like-rotator-{{$likebuttons.id}}" class="photo-like-rotator pull-right"></div>
+			<div id="like-rotator-{{$likebuttons.id}}" class="photo-like-rotator float-end"></div>
 			{{/if}}
 			<div class="clear"></div>
 		</div>
diff --git a/view/tpl/photos_recent.tpl b/view/tpl/photos_recent.tpl
index 63c8b3515..fe770d72e 100644
--- a/view/tpl/photos_recent.tpl
+++ b/view/tpl/photos_recent.tpl
@@ -1,6 +1,6 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		<div class="pull-right">
+		<div class="float-end">
 			{{if $can_post}}
 			<button class="btn btn-sm btn-success acl-form-trigger" title="{{$usage}}" onclick="openClose('photo-upload-form');" data-form_id="photos-upload-form"><i class="fa fa-plus-circle"></i>&nbsp;{{$upload.0}}</button>
 			{{/if}}
@@ -15,7 +15,7 @@
 				{{include file="photo_top.tpl"}}
 			{{/foreach}}
 			{{** make sure this element is at the bottom - we rely on that in endless scroll **}}
-			<span id="page-end" class="d-block float-left w-100" style="position: absolute; bottom: 0px"></span>
+			<span id="page-end" class="d-block float-start w-100" style="position: absolute; bottom: 0px"></span>
 		</div>
 	</div>
 </div>
diff --git a/view/tpl/photos_upload.tpl b/view/tpl/photos_upload.tpl
index ea173049b..4649c6e5a 100644
--- a/view/tpl/photos_upload.tpl
+++ b/view/tpl/photos_upload.tpl
@@ -4,7 +4,7 @@
 		<form action="#" enctype="multipart/form-data" method="post" name="photos-upload-form" id="photos-upload-form" class="acl-form" data-form_id="photos-upload-form" data-allow_cid='{{$allow_cid}}' data-allow_gid='{{$allow_gid}}' data-deny_cid='{{$deny_cid}}' data-deny_gid='{{$deny_gid}}'>
 			<input type="hidden" id="photos-upload-source" name="source" value="photos" />
 
-			<div class="form-group">
+			<div class="mb-3">
 				<label for="photos-upload-album">{{$newalbum_label}}</label>
 				<input type="text" class="form-control" id="photos-upload-album" name="newalbum" placeholder="{{$newalbum_placeholder}}" value="{{$selname}}" list="dl-photo-upload">
 				<datalist id="dl-photo-upload">
@@ -16,7 +16,7 @@
 				</datalist>
 			</div>
 			{{if $default}}
-			<!-- div class="form-group">
+			<!-- div class="mb-3">
 				<input id="photos-upload-choose" type="file" name="userfile" />
 			</div -->
 			{{include file="field_input.tpl" field=$caption}}
@@ -24,10 +24,10 @@
 			<div id="body-textarea">
 			{{include file="field_textarea.tpl" field=$body}}
 			</div>
-			<div class="pull-right btn-group">
+			<div class="float-end btn-group">
 				<div class="btn-group">
 					{{if $lockstate}}
-					<button id="dbtn-acl" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#aclModal" onclick="return false;">
+					<button id="dbtn-acl" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#aclModal" onclick="return false;">
 						<i id="jot-perms-icon" class="fa fa-{{$lockstate}}"></i>
 					</button>
 					{{/if}}
@@ -44,13 +44,13 @@
 			<div id="body-textarea">
 			{{include file="field_textarea.tpl" field=$body}}
 			</div>
-			<div id="photos-upload-perms" class="btn-group pull-right">
+			<div id="photos-upload-perms" class="btn-group float-end">
 				{{if $lockstate}}
-				<button class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#aclModal" onclick="return false;">
+				<button class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#aclModal" onclick="return false;">
 					<i id="jot-perms-icon" class="fa fa-{{$lockstate}}"></i>
 				</button>
 				{{/if}}
-				<div class="pull-right">
+				<div class="float-end">
 					{{$uploader}}
 				</div>
 			</div>
diff --git a/view/tpl/pinned_item.tpl b/view/tpl/pinned_item.tpl
index a24c4ae44..bca49c3df 100644
--- a/view/tpl/pinned_item.tpl
+++ b/view/tpl/pinned_item.tpl
@@ -41,12 +41,12 @@
 				{{/if}}
 			{{/if}}
 			<div class="p-2 clearfix wall-item-head{{if !$title && !$event && !$photo}} rounded-top{{/if}}{{if $is_new && !$event}} wall-item-head-new{{/if}}">
-				<span class="float-right" title="{{$pinned}}"><i class="fa fa-thumb-tack">&nbsp;</i></span>
+				<span class="float-end" title="{{$pinned}}"><i class="fa fa-thumb-tack">&nbsp;</i></span>
 				<div class="wall-item-info" id="pinned-item-info-{{$id}}" >
 					<div class="wall-item-photo-wrapper{{if $owner_url}} wwfrom{{/if}} h-card p-author" id="pinned-item-photo-wrapper-{{$id}}">
-						<img src="{{$thumb}}" class="fakelink wall-item-photo u-photo p-name" id="pinned-item-photo-{{$id}}" alt="{{$name}}" data-toggle="dropdown" />
+						<img src="{{$thumb}}" class="fakelink wall-item-photo u-photo p-name" id="pinned-item-photo-{{$id}}" alt="{{$name}}" data-bs-toggle="dropdown" />
 						{{if $thread_author_menu}}
-							<i class="fa fa-caret-down wall-item-photo-caret cursor-pointer" data-toggle="dropdown"></i>
+							<i class="fa fa-caret-down wall-item-photo-caret cursor-pointer" data-bs-toggle="dropdown"></i>
 							<div class="dropdown-menu">
 								{{foreach $thread_author_menu as $mitem}}
 									<a class="dropdown-item" {{if $mitem.href}}href="{{$mitem.href}}"{{/if}} {{if $mitem.action}}onclick="{{$mitem.action}}"{{/if}} {{if $mitem.title}}title="{{$mitem.title}}"{{/if}} >{{$mitem.title}}</a>
@@ -80,7 +80,7 @@
 				</div>
 			{{/if}}
 				<div class="p-2 clearfix wall-item-tools">
-					<div class="float-right wall-item-tools-right">
+					<div class="float-end wall-item-tools-right">
 						<div class="btn-group">
 							<div id="pinned-rotator-{{$id}}" class="spinner-wrapper">
 								<div class="spinner s"></div>
@@ -89,7 +89,7 @@
 						<div class="btn-group">
 						{{if $isevent}}
 							<div class="btn-group">
-								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" id="pinned-item-attend-menu-{{$id}}" title="{{$attend_title}}">
+								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="pinned-item-attend-menu-{{$id}}" title="{{$attend_title}}">
 									<i class="fa fa-calendar-check-o"></i>
 								</button>
 								<div class="dropdown-menu dropdown-menu-right">
@@ -107,7 +107,7 @@
 						{{/if}}
 						{{if $canvote}}
 							<div class="btn-group">
-								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" id="pinned-item-consensus-menu-{{$id}}" title="{{$vote_title}}">
+								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="pinned-item-consensus-menu-{{$id}}" title="{{$vote_title}}">
 									<i class="fa fa-check-square-o"></i>
 								</button>
 								<div class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="wall-item-consensus-menu-{{$id}}">
@@ -116,7 +116,7 @@
 									</a>
 									<a class="dropdown-item" href="#" title="{{$conlabels.1}}" onclick="dolike({{$id}},'disagree'); return false;">
 										<i class="item-act-list fa fa-times{{if $my_responses.disagree}} ivoted{{/if}}" ></i> {{$conlabels.1}}
-									</a> 
+									</a>
 									<a class="dropdown-item" href="#" title="{{$conlabels.2}}" onclick="dolike({{$id}},'abstain'); return false;">
 										<i class="item-act-list fa fa-question{{if $my_responses.abstain}} ivoted{{/if}}" ></i> {{$conlabels.2}}
 									</a>
@@ -124,7 +124,7 @@
 							</div>
 						{{/if}}
 						<div class="btn-group">
-							<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" id="pinned-item-menu-{{$id}}">
+							<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="pinned-item-menu-{{$id}}">
 								<i class="fa fa-cog"></i>
 							</button>
 							<div class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="wall-item-menu-{{$id}}">
@@ -152,7 +152,7 @@
 						{{if $attachments}}
 							<div class="wall-item-tools-left btn-group" id="pinned-item-tools-left-{{$id}}">
 								<div class="btn-group">
-									<button type="button" class="btn btn-outline-secondary btn-sm wall-item-like dropdown-toggle" data-toggle="dropdown" id="pinned-attachment-menu-{{$id}}">
+									<button type="button" class="btn btn-outline-secondary btn-sm wall-item-like dropdown-toggle" data-bs-toggle="dropdown" id="pinned-attachment-menu-{{$id}}">
 										<i class="fa fa-paperclip"></i>
 									</button>
 									<div class="dropdown-menu">{{$attachments}}</div>
@@ -162,14 +162,14 @@
 						{{foreach $responses as $verb=>$response}}
 							{{if $response.count}}
 								<div class="btn-group">
-									<button type="button" class="btn btn-outline-secondary btn-sm wall-item-like dropdown-toggle"{{if $response.modal}} data-toggle="modal" data-target="#{{$verb}}Modal-{{$id}}"{{else}} data-toggle="dropdown"{{/if}} id="pinned-item-{{$verb}}-{{$id}}">{{$response.count}} {{$response.button}}</button>
+									<button type="button" class="btn btn-outline-secondary btn-sm wall-item-like dropdown-toggle"{{if $response.modal}} data-bs-toggle="modal" data-bs-target="#{{$verb}}Modal-{{$id}}"{{else}} data-bs-toggle="dropdown"{{/if}} id="pinned-item-{{$verb}}-{{$id}}">{{$response.count}} {{$response.button}}</button>
 									{{if $response.modal}}
 										<div class="modal" id="pinned-{{$verb}}Modal-{{$id}}">
 											<div class="modal-dialog">
 												<div class="modal-content">
 													<div class="modal-header">
 														<h3 class="modal-title">{{$response.count}} {{$response.button}}</h3>
-														<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+														<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
 													</div>
 													<div class="modal-body response-list">
 														<ul class="nav nav-pills flex-column">
@@ -177,7 +177,7 @@
 														</ul>
 													</div>
 													<div class="modal-footer clear">
-														<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{$modal_dismiss}}</button>
+														<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{$modal_dismiss}}</button>
 													</div>
 												</div>
 											</div>
diff --git a/view/tpl/poke_content.tpl b/view/tpl/poke_content.tpl
index f368cb024..3872d21ff 100644
--- a/view/tpl/poke_content.tpl
+++ b/view/tpl/poke_content.tpl
@@ -14,7 +14,7 @@
 <form action="poke" method="get">
 
 
-<div class="form-group field input">
+<div class="mb-3 field input">
 	<label id="poke-recip-label" for="poke-recip">{{$clabel}}</label>
 	<input class="form-control" id="poke-recip" type="text" value="{{$name}}" name="pokename" autocomplete="off" />
 </div>
@@ -26,7 +26,7 @@
 {{if $poke_basic}}
 <input type="hidden" name="verb" value="poke" />
 {{else}}
-<div class="form-group field custom">
+<div class="mb-3 field custom">
 	<label for="poke-verb-select" id="poke-verb-lbl">{{$choice}}</label>
 	<select class="form-control" name="verb" id="poke-verb-select" >
 	{{foreach $verbs as $v}}
diff --git a/view/tpl/privacy_groups.tpl b/view/tpl/privacy_groups.tpl
index 327a15aee..c06f5b0ca 100644
--- a/view/tpl/privacy_groups.tpl
+++ b/view/tpl/privacy_groups.tpl
@@ -1,6 +1,6 @@
 <div class="generic-content-wrapper">
 	<div class="clearfix section-title-wrapper">
-		<button type="button" class="btn btn-sm btn-success float-right" onclick="openClose('group_tools')"><i class="fa fa-plus-circle"></i> {{$add_new_label}}</button>
+		<button type="button" class="btn btn-sm btn-success float-end" onclick="openClose('group_tools')"><i class="fa fa-plus-circle"></i> {{$add_new_label}}</button>
 		<h2>{{$title}}</h2>
 	</div>
 	<div id="group_tools" class="clearfix section-content-tools-wrapper"{{if ! $new}} style="display: none"{{/if}}>
@@ -9,7 +9,7 @@
 			{{include file="field_input.tpl" field=$gname}}
 			{{include file="field_checkbox.tpl" field=$public}}
 			{{$pgrp_extras}}
-			<button type="submit" name="submit" class="btn btn-sm btn-primary float-right">{{$submit}}</button>
+			<button type="submit" name="submit" class="btn btn-sm btn-primary float-end">{{$submit}}</button>
 		</form>
 	</div>
 
diff --git a/view/tpl/profile_advanced.tpl b/view/tpl/profile_advanced.tpl
index e6653c130..bb60269ae 100644
--- a/view/tpl/profile_advanced.tpl
+++ b/view/tpl/profile_advanced.tpl
@@ -1,9 +1,9 @@
 <div id="profile-content-wrapper" class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		<div class="float-right">
+		<div class="float-end">
 			{{if $profile.like_count}}
 			<div class="btn-group">
-				<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" id="profile-like">{{$profile.like_count}} {{$profile.like_button_label}}</button>
+				<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="profile-like">{{$profile.like_count}} {{$profile.like_button_label}}</button>
 				{{if $profile.likers}}
 				<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="profile-like">{{foreach $profile.likers as $liker}}<li role="presentation"><a href="{{$liker.url}}"><img class="menu-img-1" src="{{$liker.photo}}" alt="{{$liker.name}}" /> {{$liker.name}}</a></li>{{/foreach}}</ul>
 				{{/if}}
@@ -18,7 +18,7 @@
 			{{/if}}
 			{{if $editmenu.multi}}
 			<div class="btn-group">
-				<a class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" href="#" ><i class="fa fa-pencil"></i>&nbsp;{{$editmenu.edit.3}}</a>
+				<a class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" href="#" ><i class="fa fa-pencil"></i>&nbsp;{{$editmenu.edit.3}}</a>
 				<div class="dropdown-menu dropdown-menu-right">
 					{{foreach $editmenu.menu.entries as $e}}
 					<a class="dropdown-item" href="profiles/{{$e.id}}"><img class="dropdown-menu-img-xs" src='{{$e.photo}}'> {{$e.profile_name}}</a>
@@ -325,7 +325,7 @@
 		{{/if}}
 		{{if $item.like_count}}
 		<div class="btn-group">
-		<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" id="thing-like-{{$item.term_hash}}">{{$item.like_count}} {{$item.like_label}}</button>
+		<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="thing-like-{{$item.term_hash}}">{{$item.like_count}} {{$item.like_label}}</button>
 		{{if $item.likes}}
 		<ul class="dropdown-menu" role="menu" aria-labelledby="thing-like-{{$item.term_hash}}">{{foreach $item.likes as $liker}}<li role="presentation"><a href="{{$liker.xchan_url}}"><img class="dropdown-menu-img-xs" src="{{$liker.xchan_photo_s}}" alt="{{$liker.name}}" /> {{$liker.xchan_name}}</a></li>{{/foreach}}</ul>
 		{{/if}}
diff --git a/view/tpl/profile_edit.tpl b/view/tpl/profile_edit.tpl
index 8add9bb9d..a2dd319f8 100644
--- a/view/tpl/profile_edit.tpl
+++ b/view/tpl/profile_edit.tpl
@@ -1,7 +1,7 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		<div class="dropdown float-right" id="profile-edit-links">
-			<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+		<div class="dropdown float-end" id="profile-edit-links">
+			<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 				<i class="fa fa-cog"></i>&nbsp;{{$tools_label}}
 			</button>
 			<div class="dropdown-menu dropdown-menu-right">
@@ -49,7 +49,7 @@
 				<div class="panel">
 					<div class="section-subtitle-wrapper" role="tab" id="personal">
 						<h3>
-							<a data-toggle="collapse" data-target="#personal-collapse" href="#" aria-expanded="true" aria-controls="personal-collapse">
+							<a data-bs-toggle="collapse" data-bs-target="#personal-collapse" href="#" aria-expanded="true" aria-controls="personal-collapse">
 								{{$personal}}
 							</a>
 						</h3>
@@ -69,7 +69,7 @@
 							{{/if}}
 
 							{{if $fields.gender}}
-							<div id="profile-edit-gender-wrapper" class="form-group field select" >
+							<div id="profile-edit-gender-wrapper" class="mb-3 field select" >
 							<label id="profile-edit-gender-label" for="gender-select" >{{$lbl_gender}}</label>
 							{{if $advanced}}
 							{{$gender}}
@@ -86,7 +86,7 @@
 
 							{{include file="field_checkbox.tpl" field=$hide_friends}}
 
-							<div class="form-group" >
+							<div class="mb-3" >
 							<button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
 							</div>
 							<div class="clear"></div>
@@ -96,7 +96,7 @@
 
 				{{if $fields.comms }}
 
-				<div id="template-form-vcard-tel" class="form-group form-vcard-tel">
+				<div id="template-form-vcard-tel" class="mb-3 form-vcard-tel">
 					<select name="tel_type[]">
 						<option value="CELL">{{$mobile}}</option>
 						<option value="HOME">{{$home}}</option>
@@ -107,7 +107,7 @@
 					<i data-remove="vcard-tel" data-id="" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 				</div>
 
-				<div id="template-form-vcard-email" class="form-group form-vcard-email">
+				<div id="template-form-vcard-email" class="mb-3 form-vcard-email">
 					<select name="email_type[]">
 						<option value="HOME">{{$home}}</option>
 						<option value="WORK">{{$work}}</option>
@@ -117,7 +117,7 @@
 					<i data-remove="vcard-email" data-id="" class="fa fa-trash-o remove-field drop-icons fakelink"></i>
 				</div>
 
-				<div id="template-form-vcard-impp" class="form-group form-vcard-impp">
+				<div id="template-form-vcard-impp" class="mb-3 form-vcard-impp">
 					<select name="impp_type[]">
 						<option value="HOME">{{$home}}</option>
 						<option value="WORK">{{$work}}</option>
@@ -129,8 +129,8 @@
 
 				<div class="section-content-wrapper-np">
 					<div id="vcard-cancel-{{$vcard.id}}" class="vcard-cancel vcard-cancel-btn" data-id="{{$vcard.id}}" data-action="cancel"><i class="fa fa-close"></i></div>
-					<div id="vcard-add-field-{{$vcard.id}}" class="dropdown pull-right vcard-add-field">
-						<button data-toggle="dropdown" type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle"><i class="fa fa-plus"></i> {{$add_field}}</button>
+					<div id="vcard-add-field-{{$vcard.id}}" class="dropdown float-end vcard-add-field">
+						<button data-bs-toggle="dropdown" type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle"><i class="fa fa-plus"></i> {{$add_field}}</button>
 						<ul class="dropdown-menu">
 							<li class="add-vcard-tel"><a href="#" data-add="vcard-tel" data-id="{{$vcard.id}}" class="add-field" onclick="return false;">{{$tel_label}}</a></li>
 							<li class="add-vcard-email"><a href="#" data-add="vcard-email" data-id="{{$vcard.id}}" class="add-field" onclick="return false;">{{$email_label}}</a></li>
@@ -149,11 +149,11 @@
 				</div>
 				<div id="vcard-info-{{$vcard.id}}" class="vcard-info section-content-wrapper">
 
-					<div class="vcard-tel form-group">
+					<div class="vcard-tel mb-3">
 						<div class="form-vcard-tel-wrapper">
 							{{if $vcard.tels}}
 							{{foreach $vcard.tels as $tel}}
-							<div class="form-group form-vcard-tel">
+							<div class="mb-3 form-vcard-tel">
 								<select name="tel_type[]">
 									<option value=""{{if $tel.type.0 != 'CELL' && $tel.type.0 != 'HOME' && $tel.type.0 != 'WORK' && $tel.type.0 != 'OTHER'}} selected="selected"{{/if}}>{{$tel.type.1}}</option>
 									<option value="CELL"{{if $tel.type.0 == 'CELL'}} selected="selected"{{/if}}>{{$mobile}}</option>
@@ -170,11 +170,11 @@
 					</div>
 
 
-					<div class="vcard-email form-group">
+					<div class="vcard-email mb-3">
 						<div class="form-vcard-email-wrapper">
 							{{if $vcard.emails}}
 							{{foreach $vcard.emails as $email}}
-							<div class="form-group form-vcard-email">
+							<div class="mb-3 form-vcard-email">
 								<select name="email_type[]">
 									<option value=""{{if $email.type.0 != 'HOME' && $email.type.0 != 'WORK' && $email.type.0 != 'OTHER'}} selected="selected"{{/if}}>{{$email.type.1}}</option>
 									<option value="HOME"{{if $email.type.0 == 'HOME'}} selected="selected"{{/if}}>{{$home}}</option>
@@ -189,11 +189,11 @@
 						</div>
 					</div>
 
-					<div class="vcard-impp form-group">
+					<div class="vcard-impp mb-3">
 						<div class="form-vcard-impp-wrapper">
 							{{if $vcard.impps}}
 							{{foreach $vcard.impps as $impp}}
-							<div class="form-group form-vcard-impp">
+							<div class="mb-3 form-vcard-impp">
 								<select name="impp_type[]">
 									<option value=""{{if $impp.type.0 != 'HOME' && $impp.type.0 != 'WORK' && $impp.type.0 != 'OTHER'}} selected="selected"{{/if}}>{{$impp.type.1}}</option>
 									<option value="HOME"{{if $impp.type.0 == 'HOME'}} selected="selected"{{/if}}>{{$home}}</option>
@@ -219,7 +219,7 @@
 				<div class="panel">
 					<div class="section-subtitle-wrapper" role="tab" id="location">
 						<h3>
-							<a data-toggle="collapse" data-target="#location-collapse" href="#" aria-expanded="true" aria-controls="location-collapse">
+							<a data-bs-toggle="collapse" data-bs-target="#location-collapse" href="#" aria-expanded="true" aria-controls="location-collapse">
 								{{$location}}
 							</a>
 						</h3>
@@ -250,7 +250,7 @@
 							{{include file="field_input.tpl" field=$hometown}}
 							{{/if}}
 
-							<div class="form-group" >
+							<div class="mb-3" >
 							<button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
 							</div>
 							<div class="clear"></div>
@@ -264,7 +264,7 @@
 				<div class="panel">
 					<div class="section-subtitle-wrapper" role="tab" id="relation">
 						<h3>
-							<a data-toggle="collapse" data-target="#relation-collapse" href="#" aria-expanded="true" aria-controls="relation-collapse">
+							<a data-bs-toggle="collapse" data-bs-target="#relation-collapse" href="#" aria-expanded="true" aria-controls="relation-collapse">
 								{{$relation}}
 							</a>
 						</h3>
@@ -272,7 +272,7 @@
 					<div id="relation-collapse" class="panel-collapse collapse" data-parent="#profile-edit-wrapper" role="tabpanel" aria-labelledby="relation">
 						<div class="section-content-tools-wrapper">
 							{{if $fields.marital }}
-							<div id="profile-edit-marital-wrapper" class="form-group field" >
+							<div id="profile-edit-marital-wrapper" class="mb-3 field" >
 							<label id="profile-edit-marital-label" for="profile-edit-marital" ><span class="heart"><i class="fa fa-heart"></i>&nbsp;</span>{{$lbl_marital}}</label>
 							{{if $advanced}}
 							{{$marital}}
@@ -292,7 +292,7 @@
 							{{/if}}
 
 							{{if $fields.sexual}}
-							<div id="profile-edit-sexual-wrapper" class="form-group field" >
+							<div id="profile-edit-sexual-wrapper" class="mb-3 field" >
 							<label id="profile-edit-sexual-label" for="sexual-select" >{{$lbl_sexual}}</label>
 							{{if $advanced}}
 							{{$sexual}}
@@ -303,7 +303,7 @@
 							<div class="clear"></div>
 							{{/if}}
 
-							<div class="form-group" >
+							<div class="mb-3" >
 							<button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
 							</div>
 							<div class="clear"></div>
@@ -315,7 +315,7 @@
 				<div class="panel">
 					<div class="section-subtitle-wrapper" role="tab" id="miscellaneous">
 						<h3>
-							<a data-toggle="collapse" data-target="#miscellaneous-collapse" href="#" aria-expanded="true" aria-controls="miscellaneous-collapse">
+							<a data-bs-toggle="collapse" data-bs-target="#miscellaneous-collapse" href="#" aria-expanded="true" aria-controls="miscellaneous-collapse">
 								{{$miscellaneous}}
 							</a>
 						</h3>
@@ -395,7 +395,7 @@
 							{{include file="field_input.tpl" field=$field}}
 							{{/foreach}}
 							{{/if}}
-							<div class="form-group" >
+							<div class="mb-3" >
 							<button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
 							</div>
 							<div class="clear"></div>
diff --git a/view/tpl/profile_listing_header.tpl b/view/tpl/profile_listing_header.tpl
index 42abf2735..4fa2d6783 100644
--- a/view/tpl/profile_listing_header.tpl
+++ b/view/tpl/profile_listing_header.tpl
@@ -1,6 +1,6 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		<a class="btn btn-success btn-sm pull-right" href="{{$cr_new_link}}" id="profile-listing-new-link" title="{{$cr_new}}" ><i class="fa fa-plus-circle"></i>&nbsp;{{$cr_new}}</a>
+		<a class="btn btn-success btn-sm float-end" href="{{$cr_new_link}}" id="profile-listing-new-link" title="{{$cr_new}}" ><i class="fa fa-plus-circle"></i>&nbsp;{{$cr_new}}</a>
 		<h2>{{$header}}</h2>
 	</div>
 	<div class="section-content-wrapper">
diff --git a/view/tpl/profile_photo.tpl b/view/tpl/profile_photo.tpl
index 61d8f4254..c608806ca 100644
--- a/view/tpl/profile_photo.tpl
+++ b/view/tpl/profile_photo.tpl
@@ -144,7 +144,7 @@
 		<div class="modal-content">
 			<div class="modal-header">
 				<h4 class="modal-title" id="embedPhotoModalLabel">{{$embedPhotosModalTitle}}</h4>
-				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
 			</div>
 			<div class="modal-body" id="embedPhotoModalBody" >
 				<div id="embedPhotoModalBodyAlbumListDialog" class="d-none">
diff --git a/view/tpl/profile_tabs.tpl b/view/tpl/profile_tabs.tpl
index dd9fbc52b..84ebf12bd 100644
--- a/view/tpl/profile_tabs.tpl
+++ b/view/tpl/profile_tabs.tpl
@@ -1,5 +1,3 @@
-<div class="dropdown-header text-white-50 d-lg-none" ><img src="{{$thumb}}" class="menu-img-1"> {{$name}}</div>
-<div class="dropdown-header text-black-50 d-none d-lg-block"><img src="{{$thumb}}" class="menu-img-1"> {{$name}}</div>
 {{foreach $tabs as $tab}}
 <a class="dropdown-item{{if $tab.sel}} {{$tab.sel}}{{/if}}" href="{{$tab.url}}"{{if $tab.title}} title="{{$tab.title}}"{{/if}}><i class="fa fa-fw fa-{{$tab.icon}} generic-icons-nav"></i>{{$tab.label}}</a>
 {{/foreach}}
diff --git a/view/tpl/profile_vcard.tpl b/view/tpl/profile_vcard.tpl
index 262bf257f..6d3a51d60 100644
--- a/view/tpl/profile_vcard.tpl
+++ b/view/tpl/profile_vcard.tpl
@@ -7,8 +7,8 @@
 	{{/if}}
 	{{if ! $zcard}}
 	{{if $editmenu.multi}}
-	<div class="dropdown float-right">
-		<a class="dropdown-toggle" data-toggle="dropdown" href="#" ><i class="fa fa-pencil" title="{{$editmenu.edit.1}}"></i></a>
+	<div class="dropdown float-end">
+		<a class="dropdown-toggle" data-bs-toggle="dropdown" href="#" ><i class="fa fa-pencil" title="{{$editmenu.edit.1}}"></i></a>
 		<div class="dropdown-menu dropdown-menu-right" role="menu">
 			{{foreach $editmenu.menu.entries as $e}}
 			<a href="profiles/{{$e.id}}" class="dropdown-item"><img class="menu-img-1" src='{{$e.photo}}'> {{$e.profile_name}}</a>
diff --git a/view/tpl/prv_message.tpl b/view/tpl/prv_message.tpl
index ea7de0b4c..e01574d9a 100644
--- a/view/tpl/prv_message.tpl
+++ b/view/tpl/prv_message.tpl
@@ -15,12 +15,12 @@
 				<input type="hidden" name="preview" id="mail-preview" value="0" />
 				<input type="hidden" name="signature" id="mail-sig" value="" />
 				{{if $new}}
-				<div class="form-group">
+				<div class="mb-3">
 					<label for="recip">{{$to}}</label>
 					<input class="form-control" type="text" id="recip" name="messagerecip" value="{{$prefill}}" maxlength="255" />
 					<input type="hidden" id="recip-complete" name="messageto" value="{{$preid}}">
 				</div>
-				<div class="form-group">
+				<div class="mb-3">
 					<label for="prvmail-subject">{{$subject}}</label>
 					<input class="form-control" type="text" maxlength="255" id="prvmail-subject" name="subject" value="{{$subjtxt}}" />
 				</div>
@@ -30,17 +30,17 @@
 				<input type="hidden" name="messageto" value="{{$recphash}}" />
 				<input type="hidden" name="subject" value="{{$subjtxt}}" />
 				{{/if}}
-				<div class="form-group">
+				<div class="mb-3">
 					<label for="prvmail-text">{{$yourmessage}}</label>
 					<textarea class="form-control" id="prvmail-text" name="body"{{if $new}} style="height: 10em;"{{/if}}>{{$text}}</textarea>
 				</div>
-				<div id="prvmail-submit-wrapper" class="form-group clearfix">
-					<div id="prvmail-submit" class="float-right btn-group">
+				<div id="prvmail-submit-wrapper" class="mb-3 clearfix">
+					<div id="prvmail-submit" class="float-end btn-group">
 						<button class="btn btn-outline-secondary btn-sm" id="prvmail-preview" title="{{$preview}}" onclick="preview_mail(); return false;"><i class="fa fa-eye"></i></button>
 						<button class="btn btn-primary btn-sm" type="submit" id="prvmail-submit" name="submit" value="{{$submit}}">{{$submit}}</button>
 					</div>
 					<div id="prvmail-tools" class="btn-toolbar">
-						<div class="btn-group mr-2">
+						<div class="btn-group me-2">
 							<button id="main-editor-bold" class="btn btn-outline-secondary btn-sm" title="{{$bold}}" onclick="inserteditortag('b', 'prvmail-text'); return false;">
 								<i class="fa fa-bold jot-icons"></i>
 							</button>
@@ -57,7 +57,7 @@
 								<i class="fa fa-terminal jot-icons"></i>
 							</button>
 						</div>
-						<div class="btn-group d-none d-lg-flex mr-2">
+						<div class="btn-group d-none d-lg-flex me-2">
 							<button id="prvmail-attach-wrapper" class="btn btn-outline-secondary btn-sm" >
 								<i id="prvmail-attach" class="fa fa-paperclip jot-icons" title="{{$attach}}"></i>
 							</button>
@@ -80,7 +80,7 @@
 						</div>
 						{{/if}}
 						<div class="btn-group d-lg-none">
-							<button type="button" id="more-tools" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+							<button type="button" id="more-tools" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
 								<i id="more-tools-icon" class="fa fa-cog jot-icons"></i>
 							</button>
 							<div class="dropdown-menu dropdown-menu-right" role="menu">
diff --git a/view/tpl/rating_slider.tpl b/view/tpl/rating_slider.tpl
index 4c36504e6..667dafdd0 100644
--- a/view/tpl/rating_slider.tpl
+++ b/view/tpl/rating_slider.tpl
@@ -1,4 +1,4 @@
-<div id="rating-slider" class="slider form-group"><input id="rating-range" type="text" name="fake-rating" value="{{$val}}" /></div>
+<div id="rating-slider" class="slider mb-3"><input id="rating-range" type="text" name="fake-rating" value="{{$val}}" /></div>
 <script>
 $(document).ready(function() {
 	// The slider does not render correct if width is given in % and
diff --git a/view/tpl/regate.tpl b/view/tpl/regate.tpl
index 57ca2c1b3..e50738b19 100644
--- a/view/tpl/regate.tpl
+++ b/view/tpl/regate.tpl
@@ -19,7 +19,7 @@
 			<input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
 			{{include file="field_input.tpl" field=[$acpin.0,$acpin.1,"","","",$atform]}}
 
-			<div class="pull-right submit-wrapper">
+			<div class="float-end submit-wrapper">
 				<button type="submit" name="submit" class="btn btn-primary" {{$atform}}>{{$submit}}</button>
 			</div>
 
diff --git a/view/tpl/removeaccount.tpl b/view/tpl/removeaccount.tpl
index 6cd554082..3ea2ef070 100644
--- a/view/tpl/removeaccount.tpl
+++ b/view/tpl/removeaccount.tpl
@@ -8,7 +8,7 @@
 	<div class="section-content-tools-wrapper">
 		<form action="{{$basedir}}/removeaccount" autocomplete="off" method="post" >
 			<input type="hidden" name="verify" value="{{$hash}}" />
-			<div class="form-group" id="remove-account-pass-wrapper">
+			<div class="mb-3" id="remove-account-pass-wrapper">
 				<label id="remove-account-pass-label" for="remove-account-pass">{{$passwd}}</label>
 				<input class="form-control" type="password" id="remove-account-pass" autocomplete="off" name="qxz_password"  value=" " />
 			</div>
diff --git a/view/tpl/removeme.tpl b/view/tpl/removeme.tpl
index 814701fff..382808b4d 100644
--- a/view/tpl/removeme.tpl
+++ b/view/tpl/removeme.tpl
@@ -8,7 +8,7 @@
 	<div class="section-content-tools-wrapper">
 		<form action="{{$basedir}}/removeme" autocomplete="off" method="post" >
 			<input type="hidden" name="verify" value="{{$hash}}" />
-			<div class="form-group" id="remove-account-pass-wrapper">
+			<div class="mb-3" id="remove-account-pass-wrapper">
 				<label id="remove-account-pass-label" for="remove-account-pass">{{$passwd}}</label>
 				<input class="form-control" type="password" id="remove-account-pass" autocomplete="off" name="qxz_password" value=" " />
 			</div>
diff --git a/view/tpl/rmagic.tpl b/view/tpl/rmagic.tpl
index 9d84e4a36..bc181c323 100644
--- a/view/tpl/rmagic.tpl
+++ b/view/tpl/rmagic.tpl
@@ -1,7 +1,7 @@
 <div class="generic-content-wrapper-styled">
 	<h3>{{$title}}</h3>
 	<form action="rmagic" method="post" >
-		<div class="form-group">
+		<div class="mb-3">
 			{{include file="field_input.tpl" field=$address}}
 			<input class="btn btn-primary" type="submit" name="submit" id="rmagic-submit-button" value="{{$submit}}" />
 		</div>
diff --git a/view/tpl/search_item.tpl b/view/tpl/search_item.tpl
index f94aaf37d..d3dc72fe4 100644
--- a/view/tpl/search_item.tpl
+++ b/view/tpl/search_item.tpl
@@ -23,9 +23,9 @@
 			<div class="p-2 clearfix wall-item-head{{if !$item.title && !$item.event && !$item.photo}} rounded-top{{/if}}{{if $item.is_new && !$item.event && !$item.is_comment}} wall-item-head-new{{/if}}" >
 				<div class="wall-item-info" id="wall-item-info-{{$item.id}}" >
 					<div class="wall-item-photo-wrapper{{if $item.owner_url}} wwfrom{{/if}}" id="wall-item-photo-wrapper-{{$item.id}}">
-						<img src="{{$item.thumb}}" class="fakelink wall-item-photo{{$item.sparkle}} u-photo p-name" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" data-toggle="dropdown" loading="lazy" />
+						<img src="{{$item.thumb}}" class="fakelink wall-item-photo{{$item.sparkle}} u-photo p-name" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" data-bs-toggle="dropdown" loading="lazy" />
 						{{if $item.thread_author_menu}}
-						<i class="fa fa-caret-down wall-item-photo-caret cursor-pointer" data-toggle="dropdown"></i>
+						<i class="fa fa-caret-down wall-item-photo-caret cursor-pointer" data-bs-toggle="dropdown"></i>
 						<div class="dropdown-menu">
 							{{foreach $item.thread_author_menu as $mitem}}
 							<a class="dropdown-item" {{if $mitem.href}}href="{{$mitem.href}}"{{/if}} {{if $mitem.action}}onclick="{{$mitem.action}}"{{/if}} {{if $mitem.title}}title="{{$mitem.title}}"{{/if}} >{{$mitem.title}}</a>
@@ -36,7 +36,7 @@
 				</div>
 				{{if $item.lock}}
 				<div class="wall-item-lock dropdown">
-					<i class="fa {{if $item.locktype == 2}}fa-envelope-o{{else}}fa-lock{{/if}} lockview" data-toggle="dropdown" title="{{$item.lock}}" onclick="lockview('item',{{$item.id}});" ></i><ul id="panel-{{$item.id}}" class="lockview-panel dropdown-menu"></ul>&nbsp;
+					<i class="fa {{if $item.locktype == 2}}fa-envelope-o{{else}}fa-lock{{/if}} lockview" data-bs-toggle="dropdown" title="{{$item.lock}}" onclick="lockview('item',{{$item.id}});" ></i><ul id="panel-{{$item.id}}" class="lockview-panel dropdown-menu"></ul>&nbsp;
 				</div>
 				{{/if}}
 				<div class="wall-item-author">
@@ -65,14 +65,14 @@
 			</div>
 			{{/if}}
 			<div class="p-2 clearfix wall-item-tools">
-				<div class="float-right wall-item-tools-right">
+				<div class="float-end wall-item-tools-right">
 					<div class="btn-group">
 						<div id="like-rotator-{{$item.id}}" class="spinner-wrapper">
 							<div class="spinner s"></div>
 						</div>
 					</div>
 					<div class="btn-group">
-						<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown">
+						<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
 							<i class="fa fa-cog"></i>
 						</button>
 						<div class="dropdown-menu dropdown-menu-right">
@@ -97,7 +97,7 @@
 				{{/if}}
 				{{if $item.attachments}}
 				<div class="wall-item-tools-left btn-group">
-					<button type="button" class="btn btn-outline-secondary btn-sm wall-item-like dropdown-toggle" data-toggle="dropdown" id="attachment-menu-{{$item.id}}"><i class="fa fa-paperclip"></i></button>
+					<button type="button" class="btn btn-outline-secondary btn-sm wall-item-like dropdown-toggle" data-bs-toggle="dropdown" id="attachment-menu-{{$item.id}}"><i class="fa fa-paperclip"></i></button>
 					<div class="dropdown-menu">{{$item.attachments}}</div>
 				</div>
 				{{/if}}
diff --git a/view/tpl/settings.tpl b/view/tpl/settings.tpl
index c0808272d..df3788abd 100644
--- a/view/tpl/settings.tpl
+++ b/view/tpl/settings.tpl
@@ -1,6 +1,6 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		<a title="{{$removechannel}}" class="btn btn-danger btn-sm pull-right" href="removeme"><i class="fa fa-trash-o"></i>&nbsp;{{$removeme}}</a>
+		<a title="{{$removechannel}}" class="btn btn-danger btn-sm float-end" href="removeme"><i class="fa fa-trash-o"></i>&nbsp;{{$removeme}}</a>
 		<h2>{{$ptitle}}</h2>
 		<div class="clear"></div>
 	</div>
@@ -11,7 +11,7 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper" role="tab" id="basic-settings">
 					<h3>
-						<a data-toggle="collapse" data-target="#basic-settings-collapse" href="#">
+						<a data-bs-toggle="collapse" data-bs-target="#basic-settings-collapse" href="#">
 							{{$h_basic}}
 						</a>
 					</h3>
@@ -37,7 +37,7 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper" role="tab" id="privacy-settings">
 					<h3>
-						<a data-toggle="collapse" data-target="#privacy-settings-collapse" href="#">
+						<a data-bs-toggle="collapse" data-bs-target="#privacy-settings-collapse" href="#">
 							{{$h_prv}}
 						</a>
 					</h3>
@@ -47,15 +47,15 @@
 						{{include file="field_select_grouped.tpl" field=$role}}
 						{{$autoperms}}
 						<div id="advanced-perm" style="display:{{if $permissions_set}}none{{else}}block{{/if}};">
-							<div class="form-group">
-								<button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#apsModal">{{$lbl_p2macro}}</button>
+							<div class="mb-3">
+								<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#apsModal">{{$lbl_p2macro}}</button>
 							</div>
 							<div class="modal" id="apsModal">
 								<div class="modal-dialog">
 									<div class="modal-content">
 										<div class="modal-header">
 											<h4 class="modal-title">{{$lbl_p2macro}}</h4>
-											<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+											<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 										</div>
 										<div class="modal-body">
 										{{foreach $permiss_arr as $permit}}
@@ -63,14 +63,14 @@
 										{{/foreach}}
 										</div>
 										<div class="modal-footer">
-											<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
+											<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
 										</div>
 									</div><!-- /.modal-content -->
 								</div><!-- /.modal-dialog -->
 							</div><!-- /.modal -->
 
-							<div id="settings-default-perms" class="form-group" >
-								<button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#aclModal"><i id="jot-perms-icon" class="fa"></i>&nbsp;{{$permissions}}</button>
+							<div id="settings-default-perms" class="mb-3" >
+								<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#aclModal"><i id="jot-perms-icon" class="fa"></i>&nbsp;{{$permissions}}</button>
 							</div>
 							{{$group_select}}
 							{{include file="field_checkbox.tpl" field=$hide_presence}}
@@ -97,7 +97,7 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper" role="tab" id="notification-settings">
 					<h3>
-						<a data-toggle="collapse" data-target="#notification-settings-collapse" href="#">
+						<a data-bs-toggle="collapse" data-bs-target="#notification-settings-collapse" href="#">
 							{{$h_not}}
 						</a>
 					</h3>
diff --git a/view/tpl/settings_account.tpl b/view/tpl/settings_account.tpl
index 3eacf3f7a..c81f1abbb 100644
--- a/view/tpl/settings_account.tpl
+++ b/view/tpl/settings_account.tpl
@@ -1,6 +1,6 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		<a title="{{$removeaccount}}" class="btn btn-danger btn-sm pull-right" href="removeaccount"><i class="fa fa-trash-o"></i>&nbsp;{{$removeme}}</a>
+		<a title="{{$removeaccount}}" class="btn btn-danger btn-sm float-end" href="removeaccount"><i class="fa fa-trash-o"></i>&nbsp;{{$removeme}}</a>
 		<h2>{{$title}}</h2>
 		<div class="clear"></div>
 	</div>
diff --git a/view/tpl/settings_display.tpl b/view/tpl/settings_display.tpl
index c2dd94175..d512bfd9e 100644
--- a/view/tpl/settings_display.tpl
+++ b/view/tpl/settings_display.tpl
@@ -10,7 +10,7 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper" role="tab" id="theme-settings-title">
 					<h3>
-						<a data-toggle="collapse" data-target="#theme-settings-content" href="#" aria-expanded="true" aria-controls="theme-settings-content">
+						<a data-bs-toggle="collapse" data-bs-target="#theme-settings-content" href="#" aria-expanded="true" aria-controls="theme-settings-content">
 							{{$d_tset}}
 						</a>
 					</h3>
@@ -33,7 +33,7 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper" role="tab" id="custom-settings-title">
 					<h3>
-						<a data-toggle="collapse" data-target="#custom-settings-content" href="" aria-expanded="true" aria-controls="custom-settings-content">
+						<a data-bs-toggle="collapse" data-bs-target="#custom-settings-content" href="" aria-expanded="true" aria-controls="custom-settings-content">
 							{{$d_ctset}}
 						</a>
 					</h3>
@@ -49,7 +49,7 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper" role="tab" id="content-settings-title">
 					<h3>
-						<a data-toggle="collapse" data-target="#content-settings-content" href="" aria-expanded="true" aria-controls="content-settings-content">
+						<a data-bs-toggle="collapse" data-bs-target="#content-settings-content" href="" aria-expanded="true" aria-controls="content-settings-content">
 							{{$d_cset}}
 						</a>
 					</h3>
diff --git a/view/tpl/settings_features.tpl b/view/tpl/settings_features.tpl
index 12c4f44f3..2c359f111 100644
--- a/view/tpl/settings_features.tpl
+++ b/view/tpl/settings_features.tpl
@@ -10,7 +10,7 @@
 		<div class="panel">
 			<div class="section-subtitle-wrapper" role="tab" id="{{$g}}-settings-title">
 				<h3>
-					<a data-toggle="collapse" data-target="#{{$g}}-settings-content" href="#" aria-expanded="true" aria-controls="{{$g}}-settings-collapse">
+					<a data-bs-toggle="collapse" data-bs-target="#{{$g}}-settings-content" href="#" aria-expanded="true" aria-controls="{{$g}}-settings-collapse">
 						{{$f.0}}
 					</a>
 				</h3>
diff --git a/view/tpl/sharedwithme.tpl b/view/tpl/sharedwithme.tpl
index 8474ccd52..653077196 100644
--- a/view/tpl/sharedwithme.tpl
+++ b/view/tpl/sharedwithme.tpl
@@ -1,6 +1,6 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		<a href="/sharedwithme/dropall" onclick="return confirmDelete();" class="btn btn-sm btn-outline-secondary pull-right"><i class="fa fa-trash-o"></i>&nbsp;{{$dropall}}</a>
+		<a href="/sharedwithme/dropall" onclick="return confirmDelete();" class="btn btn-sm btn-outline-secondary float-end"><i class="fa fa-trash-o"></i>&nbsp;{{$dropall}}</a>
 		<h2>{{$header}}</h2>
 	</div>
 	<div class="section-content-wrapper-np">
diff --git a/view/tpl/thing_edit.tpl b/view/tpl/thing_edit.tpl
index 62a7c02c8..63b48f6fc 100644
--- a/view/tpl/thing_edit.tpl
+++ b/view/tpl/thing_edit.tpl
@@ -30,7 +30,7 @@
 <div class="thing-end"></div> 
 
 {{if $lockstate}}
-	<button id="dbtn-acl" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#aclModal" onclick="return false;">
+	<button id="dbtn-acl" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#aclModal" onclick="return false;">
 		<i id="jot-perms-icon" class="fa fa-{{$lockstate}}"></i>
 	</button>
 {{/if}}
diff --git a/view/tpl/thing_input.tpl b/view/tpl/thing_input.tpl
index 90fb093e4..d1495aba0 100644
--- a/view/tpl/thing_input.tpl
+++ b/view/tpl/thing_input.tpl
@@ -30,7 +30,7 @@
 <div class="thing-end"></div> 
 
 {{if $lockstate}}
-	<button id="dbtn-acl" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#aclModal" onclick="return false;">
+	<button id="dbtn-acl" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#aclModal" onclick="return false;">
 		<i id="jot-perms-icon" class="fa fa-{{$lockstate}}"></i>
 	</button>
 {{/if}}
diff --git a/view/tpl/tokens.tpl b/view/tpl/tokens.tpl
index 587965832..d1e6d04bc 100644
--- a/view/tpl/tokens.tpl
+++ b/view/tpl/tokens.tpl
@@ -14,7 +14,7 @@
 			{{include file="field_input.tpl" field=$name}}
 			{{include file="field_input.tpl" field=$token}}
 			{{include file="field_input.tpl" field=$expires}}
-			<div class="settings-submit-wrapper form-group">
+			<div class="settings-submit-wrapper mb-3">
 				<button type="submit" name="submit" class="btn btn-primary">{{$submit}}</button>
 			</div>
 	</div>
@@ -22,7 +22,7 @@
 	<div class="panel" id="permission-settings">
 		<div class="section-subtitle-wrapper" role="tab" id="perms-tool">
 			<h3>
-				<a data-toggle="collapse" data-parent="#permission-settings" href="#perms-tool-collapse" aria-expanded="true" aria-controls="perms-tool-collapse">
+				<a data-bs-toggle="collapse" data-parent="#permission-settings" href="#perms-tool-collapse" aria-expanded="true" aria-controls="perms-tool-collapse">
 				{{$permlbl}}
 				</a>
 			</h3>
@@ -33,7 +33,7 @@
 				{{$permnote}}
 				</div>
 
-				<table id="perms-tool-table" class=form-group>
+				<table id="perms-tool-table" class=mb-3>
 					<tr>
 						<td></td><td colspan="2" class="abook-me">{{$me}}</td>
 					</tr>
diff --git a/view/tpl/usermenu.tpl b/view/tpl/usermenu.tpl
index 535d5b5a8..5a316e806 100644
--- a/view/tpl/usermenu.tpl
+++ b/view/tpl/usermenu.tpl
@@ -8,7 +8,7 @@
 	<ul class="pmenu-body{{if $wrap || !$class}} nav nav-pills flex-column{{elseif !$wrap || $class}} {{$class}}{{/if}}">
 		{{foreach $items as $mitem }}
 		<li id="pmenu-item-{{$mitem.mitem_id}}" class="nav-item pmenu-item{{if $mitem.submenu}} dropdown{{/if}}">
-			<a href="{{if $mitem.submenu}}#{{else}}{{$mitem.mitem_link}}{{/if}}" class="nav-link {{if $mitem.submenu}} dropdown-toggle{{/if}}"{{if $mitem.submenu}} data-toggle="dropdown"{{/if}}{{if $mitem.newwin}}target="_blank"{{/if}} rel="nofollow noopener">{{$mitem.mitem_desc}}{{if $mitem.submenu}}<span class="caret"></span>{{/if}}</a>
+			<a href="{{if $mitem.submenu}}#{{else}}{{$mitem.mitem_link}}{{/if}}" class="nav-link {{if $mitem.submenu}} dropdown-toggle{{/if}}"{{if $mitem.submenu}} data-bs-toggle="dropdown"{{/if}}{{if $mitem.newwin}}target="_blank"{{/if}} rel="nofollow noopener">{{$mitem.mitem_desc}}{{if $mitem.submenu}}<span class="caret"></span>{{/if}}</a>
 			{{if $mitem.submenu}}{{$mitem.submenu}}{{/if}}
 		</li>
 		{{/foreach }}
diff --git a/view/tpl/viewcontact_template.tpl b/view/tpl/viewcontact_template.tpl
index cbbf3a97c..317cb20ce 100644
--- a/view/tpl/viewcontact_template.tpl
+++ b/view/tpl/viewcontact_template.tpl
@@ -7,7 +7,7 @@
 		{{include file="contact_template.tpl"}}
 		{{/foreach}}
 		{{** make sure this element is at the bottom - we rely on that in endless scroll **}}
-		<div id="page-end" class="float-left w-100"></div>
+		<div id="page-end" class="float-start w-100"></div>
 	</div>
 </div>
 <script>$(document).ready(function() { loadingPage = false;});</script>
diff --git a/view/tpl/webpage_export_list.tpl b/view/tpl/webpage_export_list.tpl
index b22b3818a..6360500d8 100644
--- a/view/tpl/webpage_export_list.tpl
+++ b/view/tpl/webpage_export_list.tpl
@@ -2,14 +2,14 @@
 		<form action="" method="post" autocomplete="on" >
 		<input type="hidden" name="action" value="{{$action}}">
 		<div class="section-title-wrapper">
-			<div class="pull-right">				
+			<div class="float-end">				
 					<button class="btn btn-md btn-success" type="submit" name="submit" value="{{$exportbtn}}">{{$exportbtn}}</button>
 			</div>
 			<h2>{{$title}}</h2>
 			<div class="clear"></div>
 		</div>
 		<div id="import-website-content-wrapper" class="section-content-wrapper">
-				<div class="pull-left">
+				<div class="float-start">
 						<button id="toggle-select-all" class="btn btn-sm btn-primary" onclick="checkedAll(window.isChecked); return false;"><i class="fa fa-check"></i>&nbsp;Toggle Select All</button>
 				</div>
 				<div class="clear"></div>
diff --git a/view/tpl/webpage_import.tpl b/view/tpl/webpage_import.tpl
index 955288c1e..5af42ea04 100644
--- a/view/tpl/webpage_import.tpl
+++ b/view/tpl/webpage_import.tpl
@@ -2,14 +2,14 @@
 		<form action="" method="post" autocomplete="on" >
 		<input type="hidden" name="action" value="importselected">
 		<div class="section-title-wrapper">
-			<div class="pull-right">				
+			<div class="float-end">				
 					<button class="btn btn-md btn-success" type="submit" name="submit" value="{{$importbtn}}">{{$importbtn}}</button>
 			</div>
 			<h2>{{$title}}</h2>
 			<div class="clear"></div>
 		</div>
 		<div id="import-website-content-wrapper" class="section-content-wrapper">
-						<div class="pull-left">
+						<div class="float-start">
 								<button id="toggle-select-all" class="btn btn-sm btn-primary" onclick="checkedAll(window.isChecked); return false;"><i class="fa fa-check"></i>&nbsp;Toggle Select All</button>
 						</div>
 						<div class="clear"></div>
diff --git a/view/tpl/webpagelist.tpl b/view/tpl/webpagelist.tpl
index 1c909b9b8..995a73930 100644
--- a/view/tpl/webpagelist.tpl
+++ b/view/tpl/webpagelist.tpl
@@ -1,7 +1,7 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
 		{{if $editor}}
-		<div class="pull-right">
+		<div class="float-end">
 			<button id="webpage-create-btn" class="btn btn-sm btn-success acl-form-trigger" onclick="openClose('webpage-editor');" data-form_id="profile-jot-form"><i class="fa fa-pencil-square-o"></i>&nbsp;{{$create}}</button>
 		</div>
 		{{/if}}
@@ -41,7 +41,7 @@
 				</td>
 				<td class="webpage-list-tool dropdown">
 					{{if $item.lockstate=='lock'}}
-					<i class="fa fa-lock lockview" data-toggle="dropdown" onclick="lockview('item',{{$item.url}});" ></i>
+					<i class="fa fa-lock lockview" data-bs-toggle="dropdown" onclick="lockview('item',{{$item.url}});" ></i>
 					<ul id="panel-{{$item.url}}" class="lockview-panel dropdown-menu"></ul>
 					{{/if}}
 				</td>
diff --git a/view/tpl/website_portation_tools.tpl b/view/tpl/website_portation_tools.tpl
index 0d131cb17..f27d67ca2 100644
--- a/view/tpl/website_portation_tools.tpl
+++ b/view/tpl/website_portation_tools.tpl
@@ -6,18 +6,18 @@
 				<form enctype="multipart/form-data" method="post" action="">
 					<input type="hidden" name="action" value="scan">
 					<p class="descriptive-text">{{$file_import_text}}</p>
-					<div class="form-group">
+					<div class="mb-3">
 						<input class="form-control" type="text" name="path" title="{{$hint}}" placeholder="{{$desc}}" />
 					</div>
-					<div class="form-group">
+					<div class="mb-3">
 						<button class="btn btn-primary btn-sm" type="submit" name="cloudsubmit" value="{{$select}}">Submit</button>
 					</div>
 					<!-- Or upload a zipped file containing the website -->
 					<p class="descriptive-text">{{$file_upload_text}}</p>
-					<div class="form-group">
+					<div class="mb-3">
 						<input class="form-control-file w-100" type="file" name="zip_file" />
 					</div>
-					<div class="form-group">
+					<div class="mb-3">
 						<button class="btn btn-primary btn-sm" type="submit" name="w_upload" value="w_upload">Submit</button>
 					</div>
 				</form>
@@ -32,10 +32,10 @@
 					<input type="hidden" name="action" value="exportzipfile">
 					<!-- Or download a zipped file containing the website -->
 					<p class="descriptive-text">{{$file_download_text}}</p>
-					<div class="form-group">
+					<div class="mb-3">
 						<input class="form-control" type="text" name="zipfilename" title="{{$filename_hint}}" placeholder="{{$filename_desc}}" value="" />
 					</div>
-					<div class="form-group">
+					<div class="mb-3">
 						<button class="btn btn-primary btn-sm" type="submit" name="w_download" value="w_download">Submit</button>
 					</div>
 				</form>
@@ -47,10 +47,10 @@
 					<input type="hidden" name="action" value="exportcloud">
 					<!-- Or export the website elements to a cloud files folder -->
 					<p style="margin-top: 10px;" class="descriptive-text">{{$cloud_export_text}}</p>
-					<div class="form-group">
+					<div class="mb-3">
 						<input class="form-control" type="text" name="exportcloudpath" title="{{$cloud_export_hint}}" placeholder="{{$cloud_export_desc}}" />
 					</div>
-					<div class="form-group">
+					<div class="mb-3">
 						<button class="btn btn-primary btn-sm" type="submit" name="exportcloudsubmit" value="{{$cloud_export_select}}">Submit</button>
 					</div>
 				</form>
diff --git a/view/tpl/wiki.tpl b/view/tpl/wiki.tpl
index 8556d8bad..7d5c418ce 100644
--- a/view/tpl/wiki.tpl
+++ b/view/tpl/wiki.tpl
@@ -1,10 +1,10 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		<div class="pull-right">
+		<div class="float-end">
 			<span class="text-muted wiki-typename">[{{$typename}}]&nbsp;</span>
 			{{if $showPageControls}}
 			<div id="page-tools" class="btn-group" style="display: none;">
-				<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown">
+				<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
 					<i class="fa fa-cog"></i>&nbsp;{{$tools_label}}
 				</button>
 				<div class="dropdown-menu dropdown-menu-right">
@@ -13,7 +13,7 @@
 					{{/if}}
 					<a id="embed-image" class="dropdown-item" href="#"><i class="fa fa-fw fa-picture-o"></i>&nbsp;Embed Image</a>
 				</div>
-			</div>	
+			</div>
 			{{/if}}
 			<button type="button" class="btn btn-outline-secondary btn-sm" title="{{$sharePage}}" onclick="window.location.href='rpost?f=&body={{$shareLink}}';"><i class="fa fa-fw fa-share"></i></button>
 			<button id="fullscreen-btn" type="button" class="btn btn-outline-secondary btn-sm" onclick="makeFullScreen(); adjustFullscreenEditorHeight();"><i class="fa fa-expand"></i></button>
@@ -28,8 +28,8 @@
 	<div id="rename-page-form-wrapper" class="section-content-tools-wrapper" style="display:none;">
 		<form id="rename-page-form" action="wiki/rename/page" method="post" >
 			{{include file="field_input.tpl" field=$pageRename}}
-			<div class="form-group">
-				<div class="pull-right">
+			<div class="mb-3">
+				<div class="float-end">
 					<button id="rename-page-submit" class="btn btn-primary" type="submit" name="submit">Submit</button>
 				</div>
 				<div>
@@ -41,9 +41,9 @@
 	</div>
 	<div id="wiki-content-container" class="section-content-wrapper">
 		<ul class="nav nav-tabs" id="wiki-nav-tabs">
-			<li class="nav-item" id="edit-pane-tab"><a class="nav-link" data-toggle="tab" href="#edit-pane">{{$editOrSourceLabel}}</a></li>
-			<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#preview-pane" id="wiki-get-preview">{{$view_lbl}}</a></li>
-			<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#page-history-pane" id="wiki-get-history">{{$history_lbl}}</a></li>
+			<li class="nav-item" id="edit-pane-tab"><a class="nav-link" data-bs-toggle="tab" href="#edit-pane">{{$editOrSourceLabel}}</a></li>
+			<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#preview-pane" id="wiki-get-preview">{{$view_lbl}}</a></li>
+			<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#page-history-pane" id="wiki-get-history">{{$history_lbl}}</a></li>
 		</ul>
 		<div class="tab-content" id="wiki-page-tabs">
 			<div id="edit-pane" class="tab-pane">
@@ -84,7 +84,7 @@
 		<div class="modal-content">
 			<div class="modal-header">
 				<h4 class="modal-title" id="embedPhotoModalLabel">{{$embedPhotosModalTitle}}</h4>
-				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
 			</div>
 			<div class="modal-body" id="embedPhotoModalBody" >
 				<div id="embedPhotoModalBodyAlbumListDialog" class="d-none">
@@ -114,10 +114,10 @@
 	$( "#rename-page-form" ).submit(function( event ) {
 		$.post("wiki/{{$channel_address}}/rename/page",
 		{
-			oldName: window.wiki_page_name, 
-			newName: $('#id_pageRename').val(), 
+			oldName: window.wiki_page_name,
+			newName: $('#id_pageRename').val(),
 			resource_id: window.wiki_resource_id
-		}, 
+		},
 		function (data) {
 			if (data.success) {
 				$('#rename-page-form-wrapper').hide();
@@ -128,7 +128,7 @@
 			} else {
 				window.console.log('Error renaming page.');
 			}
-		}, 'json');    
+		}, 'json');
 		event.preventDefault();
 	});
 
@@ -253,11 +253,11 @@
 			return false;
 		}
 		$.post("wiki/{{$channel_address}}/save/page", {
-			content: currentContent, 
+			content: currentContent,
 			commitMsg: $('#id_commitMsg').val(),
-			name: window.wiki_page_name, 
+			name: window.wiki_page_name,
 			resource_id: window.wiki_resource_id
-		}, 
+		},
 		function (data) {
 			if (data.success) {
 				window.saved = true;
@@ -273,7 +273,7 @@
 				window.editor.focus();  // Return focus to the editor for continued editing
 				// $('#wiki-get-history').click();
 			} else {
-				alert('Error saving page.'); // TODO: Replace alerts with auto-timeout popups 
+				alert('Error saving page.'); // TODO: Replace alerts with auto-timeout popups
 				window.console.log('Error saving page.');
 			}
 		}, 'json');
@@ -309,11 +309,11 @@
 			return false;
 		}
 		$.post("wiki/{{$channel_address}}/compare/page", {
-			compareCommit: compareCommit, 
-			currentCommit: window.wiki_page_commit, 
-			name: window.wiki_page_name, 
+			compareCommit: compareCommit,
+			currentCommit: window.wiki_page_commit,
+			name: window.wiki_page_name,
 			resource_id: window.wiki_resource_id
-		}, 
+		},
 		function (data) {
 			console.log(data);
 			if (data.success) {
diff --git a/view/tpl/wiki_page_list.tpl b/view/tpl/wiki_page_list.tpl
index e11f3b145..4f99587c2 100644
--- a/view/tpl/wiki_page_list.tpl
+++ b/view/tpl/wiki_page_list.tpl
@@ -27,7 +27,7 @@
 				<div id="wiki_page_options" style="display: none">
 					{{$mimetype}}
 				</div>
-				<div class="float-right fakelink" onClick="openClose('wiki_page_options')">
+				<div class="float-end fakelink" onClick="openClose('wiki_page_options')">
 					{{$options}}
 				</div>
 				{{/if}}
diff --git a/view/tpl/wiki_page_not_found.tpl b/view/tpl/wiki_page_not_found.tpl
index bc8afeb53..8fdee4596 100644
--- a/view/tpl/wiki_page_not_found.tpl
+++ b/view/tpl/wiki_page_not_found.tpl
@@ -10,7 +10,7 @@
 				<div id="wiki_missing_page_options" style="display: none">
 					{{$mimetype}}
 				</div>
-				<div class="float-right fakelink" onClick="openClose('wiki_missing_page_options')">
+				<div class="float-end fakelink" onClick="openClose('wiki_missing_page_options')">
 					{{$options}}
 				</div>
 				{{/if}}
diff --git a/view/tpl/wikilist.tpl b/view/tpl/wikilist.tpl
index 5f28d6b12..e954a39c1 100644
--- a/view/tpl/wikilist.tpl
+++ b/view/tpl/wikilist.tpl
@@ -1,7 +1,7 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper clearfix">
 		{{if $owner}}
-		<button type="button" class="btn btn-success btn-sm pull-right acl-form-trigger" onclick="openClose('new-wiki-form-wrapper');" data-form_id="new-wiki-form"><i class="fa fa-plus-circle"></i>&nbsp;{{$create}}</button>
+		<button type="button" class="btn btn-success btn-sm float-end acl-form-trigger" onclick="openClose('new-wiki-form-wrapper');" data-form_id="new-wiki-form"><i class="fa fa-plus-circle"></i>&nbsp;{{$create}}</button>
 		{{/if}}
 		<h2>{{$header}}</h2>
 	</div>
@@ -13,8 +13,8 @@
 			{{include file="field_checkbox.tpl" field=$typelock}}
 			{{include file="field_checkbox.tpl" field=$notify}}
 			<div>
-				<div class="btn-group pull-right">
-					<button id="dbtn-acl" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#aclModal" title="Permission settings" onclick="return false;">
+				<div class="btn-group float-end">
+					<button id="dbtn-acl" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#aclModal" title="Permission settings" onclick="return false;">
 						<i id="jot-perms-icon" class="fa fa-{{$lockstate}} jot-icons"></i>
 					</button>
 					<button id="new-wiki-submit" class="btn btn-primary btn-sm" type="submit" name="submit" >{{$submit}}</button>
@@ -47,7 +47,7 @@
 				{{/if}}
 				<td class="dropdown">
 					{{if $wiki.lockstate == 'lock'}}
-					<i class="fa fa-lock lockview" data-toggle="dropdown" onclick="lockview('item',{{$wiki.id}});"></i>
+					<i class="fa fa-lock lockview" data-bs-toggle="dropdown" onclick="lockview('item',{{$wiki.id}});"></i>
 					<ul id="panel-{{$wiki.id}}" class="lockview-panel dropdown-menu dropdown-menu-right"></ul>
 					{{/if}}
 				</td>
@@ -62,8 +62,8 @@
 					<form id="edit-wiki-form-{{$wiki.id}}" method="post" action="wiki/{{$channel}}/update/wiki" class="acl-form" data-form_id="edit-wiki-form-{{$wiki.id}}" data-allow_cid='{{$wiki.json_allow_cid}}' data-allow_gid='{{$wiki.json_allow_gid}}' data-deny_cid='{{$wiki.json_deny_cid}}' data-deny_gid='{{$wiki.json_deny_gid}}'>
 						<input type="hidden" name="origRawName" value="{{$wiki.title}}">
 						{{include file="field_input.tpl" field=['updateRawName', $edit_wiki_name, $wiki.title]}}
-						<div class="btn-group float-right">
-							<button class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#aclModal" type="button">
+						<div class="btn-group float-end">
+							<button class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#aclModal" type="button">
 								<i class="jot-perms-icon fa fa-{{$wiki.lockstate}}"></i>
 							</button>
 							<button class="btn btn-primary btn-sm" type="submit" value="edit">Submit</button>
-- 
cgit v1.2.3


From 9aebb01d62ccbd0c49c0114c678bd220b00628f5 Mon Sep 17 00:00:00 2001
From: Mario <mario@mariovavti.com>
Date: Mon, 7 Jun 2021 14:10:57 +0200
Subject: bs5: notifications work

---
 view/tpl/notifications_widget.tpl | 62 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 61 insertions(+), 1 deletion(-)

(limited to 'view/tpl')

diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index 15d229f55..b5a3b3668 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -137,7 +137,7 @@
 	}
 </script>
 
-<div id="notifications_wrapper" class="mb-4">
+<!--div id="notifications_wrapper" class="mb-4">
 	<div id="no_notifications" class="d-xl-none">
 		{{$no_notifications}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>
 	</div>
@@ -198,5 +198,65 @@
 		</div>
 		{{/foreach}}
 	</div>
+</div-->
+
+
+<div class="accordion" id="notifications">
+	<div id="nav-notifications-template" rel="template">
+		<a class="list-group-item text-decoration-none text-darkclearfix notification {6}" href="{0}" title="{13}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-when="{5}">
+			<img class="menu-img-3" data-src="{1}" loading="lazy">
+			<div class="contactname"><span class="text-dark font-weight-bold">{2}</span> <span class="text-muted">{3}</span></div>
+			<span class="text-muted">{4}</span><br>
+			<span class="text-muted notifications-autotime" title="{5}">{5}</span>
+		</a>
+	</div>
+	<div id="nav-notifications-forums-template" rel="template">
+		<a class="list-group-item text-decoration-none clearfix notification notification-forum" href="{0}" title="{4} - {3}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-b64mids='{12}'>
+			<span class="float-end badge badge-secondary">{10}</span>
+			<img class="menu-img-1" data-src="{1}" loading="lazy">
+			<span class="">{2}</span>
+			<i class="fa fa-{11} text-muted"></i>
+		</a>
+	</div>
+	{{foreach $notifications as $notification}}
+	<div class="accordion-item {{$notification.type}}-button collapse">
+		<h2 class="accordion-header" id="notification-link-{{$notification.type}}">
+			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav-{{$notification.type}}-sub" data-sse_type="{{$notification.type}}" aria-expanded="false" aria-controls="collapseTwo">
+				<i class="fa fa-fw fa-{{$notification.icon}}"></i> {{$notification.label}}
+				<span class="float-end badge badge-{{$notification.severity}} {{$notification.type}}-update"></span>
+			</button>
+		</h2>
+		<div id="nav-{{$notification.type}}-sub" class="accordion-collapse collapse" aria-labelledby="notification-link-{{$notification.type}}" data-bs-parent="#notifications">
+			{{if $notification.viewall}}
+			<a class="list-group-item text-decoration-none text-dark" id="nav-{{$notification.type}}-see-all" href="{{$notification.viewall.url}}">
+				<i class="fa fa-fw fa-external-link"></i> {{$notification.viewall.label}}
+			</a>
+			{{/if}}
+			{{if $notification.markall}}
+			<div class="list-group-item cursor-pointer" id="nav-{{$notification.type}}-mark-all" onclick="markRead('{{$notification.type}}'); return false;">
+				<i class="fa fa-fw fa-check"></i> {{$notification.markall.label}}
+			</div>
+			{{/if}}
+			{{if $notification.filter}}
+			{{if $notification.filter.posts_label}}
+			<div class="list-group-item cursor-pointer" id="tt-{{$notification.type}}-only">
+				<i class="fa fa-fw fa-filter"></i> {{$notification.filter.posts_label}}
+			</div>
+			{{/if}}
+			{{if $notification.filter.name_label}}
+			<div class="list-group-item clearfix notifications-textinput" id="cn-{{$notification.type}}-only">
+				<div class="text-muted notifications-textinput-filter"><i class="fa fa-fw fa-filter"></i></div>
+				<input id="cn-{{$notification.type}}-input" type="text" class="notification-filter form-control form-control-sm" placeholder="{{$notification.filter.name_label}}">
+				<div id="cn-{{$notification.type}}-input-clear" class="text-muted notifications-textinput-clear d-none"><i class="fa fa-times"></i></div>
+			</div>
+			{{/if}}
+			{{/if}}
+			<div id="nav-{{$notification.type}}-menu" class="list-group list-group-flush"></div>
+			<div id="nav-{{$notification.type}}-loading" class="list-group-item" style="display: none;">
+				{{$loading}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>
+			</div>
+		</div>
+	</div>
+	{{/foreach}}
 </div>
 {{/if}}
-- 
cgit v1.2.3


From 58cacaff0672336d6a6adb56fa23969a3bd09de2 Mon Sep 17 00:00:00 2001
From: Mario <mario@mariovavti.com>
Date: Mon, 7 Jun 2021 12:37:12 +0000
Subject: bs5: more notifications work

---
 view/tpl/notifications_widget.tpl | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

(limited to 'view/tpl')

diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index b5a3b3668..f65356915 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -200,8 +200,9 @@
 	</div>
 </div-->
 
+<div id="notifications_wrapper" class="mb-4">
 
-<div class="accordion" id="notifications">
+<div class="accordion collapse" id="notifications">
 	<div id="nav-notifications-template" rel="template">
 		<a class="list-group-item text-decoration-none text-darkclearfix notification {6}" href="{0}" title="{13}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-when="{5}">
 			<img class="menu-img-3" data-src="{1}" loading="lazy">
@@ -220,13 +221,13 @@
 	</div>
 	{{foreach $notifications as $notification}}
 	<div class="accordion-item {{$notification.type}}-button collapse">
-		<h2 class="accordion-header" id="notification-link-{{$notification.type}}">
-			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav-{{$notification.type}}-sub" data-sse_type="{{$notification.type}}" aria-expanded="false" aria-controls="collapseTwo">
+		<div class="accordion-header notification-link" id="notification-link-{{$notification.type}}">
+			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav-{{$notification.type}}-sub" data-sse_type="{{$notification.type}}" aria-expanded="false" aria-controls="nav-{{$notification.type}}-sub">
 				<i class="fa fa-fw fa-{{$notification.icon}}"></i> {{$notification.label}}
 				<span class="float-end badge badge-{{$notification.severity}} {{$notification.type}}-update"></span>
 			</button>
-		</h2>
-		<div id="nav-{{$notification.type}}-sub" class="accordion-collapse collapse" aria-labelledby="notification-link-{{$notification.type}}" data-bs-parent="#notifications">
+		</div>
+		<div id="nav-{{$notification.type}}-sub" class="list-group list-group-flush accordion-collapse collapse notification-content" aria-labelledby="notification-link-{{$notification.type}}" data-bs-parent="#notifications">
 			{{if $notification.viewall}}
 			<a class="list-group-item text-decoration-none text-dark" id="nav-{{$notification.type}}-see-all" href="{{$notification.viewall.url}}">
 				<i class="fa fa-fw fa-external-link"></i> {{$notification.viewall.label}}
@@ -259,4 +260,5 @@
 	</div>
 	{{/foreach}}
 </div>
+</div>
 {{/if}}
-- 
cgit v1.2.3


From b66b43256b3a68aabcca4e628ad6643c7c4aca8e Mon Sep 17 00:00:00 2001
From: Mario <mario@mariovavti.com>
Date: Mon, 7 Jun 2021 13:21:44 +0000
Subject: bs5: more notifications fixes

---
 view/tpl/notifications_widget.tpl | 79 +++++++++++++++++++--------------------
 1 file changed, 39 insertions(+), 40 deletions(-)

(limited to 'view/tpl')

diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index f65356915..94747f607 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -201,12 +201,10 @@
 </div-->
 
 <div id="notifications_wrapper" class="mb-4">
-
-<div class="accordion collapse" id="notifications">
 	<div id="nav-notifications-template" rel="template">
 		<a class="list-group-item text-decoration-none text-darkclearfix notification {6}" href="{0}" title="{13}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-when="{5}">
 			<img class="menu-img-3" data-src="{1}" loading="lazy">
-			<div class="contactname"><span class="text-dark font-weight-bold">{2}</span> <span class="text-muted">{3}</span></div>
+			<div class="contactname"><span class="text-dark fw-bold">{2}</span> <span class="text-muted">{3}</span></div>
 			<span class="text-muted">{4}</span><br>
 			<span class="text-muted notifications-autotime" title="{5}">{5}</span>
 		</a>
@@ -219,46 +217,47 @@
 			<i class="fa fa-{11} text-muted"></i>
 		</a>
 	</div>
-	{{foreach $notifications as $notification}}
-	<div class="accordion-item {{$notification.type}}-button collapse">
-		<div class="accordion-header notification-link" id="notification-link-{{$notification.type}}">
-			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav-{{$notification.type}}-sub" data-sse_type="{{$notification.type}}" aria-expanded="false" aria-controls="nav-{{$notification.type}}-sub">
-				<i class="fa fa-fw fa-{{$notification.icon}}"></i> {{$notification.label}}
-				<span class="float-end badge badge-{{$notification.severity}} {{$notification.type}}-update"></span>
-			</button>
-		</div>
-		<div id="nav-{{$notification.type}}-sub" class="list-group list-group-flush accordion-collapse collapse notification-content" aria-labelledby="notification-link-{{$notification.type}}" data-bs-parent="#notifications">
-			{{if $notification.viewall}}
-			<a class="list-group-item text-decoration-none text-dark" id="nav-{{$notification.type}}-see-all" href="{{$notification.viewall.url}}">
-				<i class="fa fa-fw fa-external-link"></i> {{$notification.viewall.label}}
-			</a>
-			{{/if}}
-			{{if $notification.markall}}
-			<div class="list-group-item cursor-pointer" id="nav-{{$notification.type}}-mark-all" onclick="markRead('{{$notification.type}}'); return false;">
-				<i class="fa fa-fw fa-check"></i> {{$notification.markall.label}}
-			</div>
-			{{/if}}
-			{{if $notification.filter}}
-			{{if $notification.filter.posts_label}}
-			<div class="list-group-item cursor-pointer" id="tt-{{$notification.type}}-only">
-				<i class="fa fa-fw fa-filter"></i> {{$notification.filter.posts_label}}
-			</div>
-			{{/if}}
-			{{if $notification.filter.name_label}}
-			<div class="list-group-item clearfix notifications-textinput" id="cn-{{$notification.type}}-only">
-				<div class="text-muted notifications-textinput-filter"><i class="fa fa-fw fa-filter"></i></div>
-				<input id="cn-{{$notification.type}}-input" type="text" class="notification-filter form-control form-control-sm" placeholder="{{$notification.filter.name_label}}">
-				<div id="cn-{{$notification.type}}-input-clear" class="text-muted notifications-textinput-clear d-none"><i class="fa fa-times"></i></div>
+	<div class="accordion accordion-flush border collapse" id="notifications">
+		{{foreach $notifications as $notification}}
+		<div class="accordion-item {{$notification.type}}-button collapse">
+			<div class="accordion-header notification-link" id="notification-link-{{$notification.type}}">
+				<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav-{{$notification.type}}-sub" data-sse_type="{{$notification.type}}" aria-expanded="false" aria-controls="nav-{{$notification.type}}-sub">
+					<i class="fa fa-fw fa-{{$notification.icon}}"></i> {{$notification.label}}
+					<span class="float-end badge badge-{{$notification.severity}} {{$notification.type}}-update"></span>
+				</button>
 			</div>
-			{{/if}}
-			{{/if}}
-			<div id="nav-{{$notification.type}}-menu" class="list-group list-group-flush"></div>
-			<div id="nav-{{$notification.type}}-loading" class="list-group-item" style="display: none;">
-				{{$loading}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>
+			<div id="nav-{{$notification.type}}-sub" class="list-group list-group-flush accordion-collapse collapse notification-content" aria-labelledby="notification-link-{{$notification.type}}" data-bs-parent="#notifications">
+				{{if $notification.viewall}}
+				<a class="list-group-item text-decoration-none text-dark" id="nav-{{$notification.type}}-see-all" href="{{$notification.viewall.url}}">
+					<i class="fa fa-fw fa-external-link"></i> {{$notification.viewall.label}}
+				</a>
+				{{/if}}
+				{{if $notification.markall}}
+				<div class="list-group-item cursor-pointer" id="nav-{{$notification.type}}-mark-all" onclick="markRead('{{$notification.type}}'); return false;">
+					<i class="fa fa-fw fa-check"></i> {{$notification.markall.label}}
+				</div>
+				{{/if}}
+				{{if $notification.filter}}
+				{{if $notification.filter.posts_label}}
+				<div class="list-group-item cursor-pointer" id="tt-{{$notification.type}}-only">
+					<i class="fa fa-fw fa-filter"></i> {{$notification.filter.posts_label}}
+				</div>
+				{{/if}}
+				{{if $notification.filter.name_label}}
+				<div class="list-group-item clearfix notifications-textinput" id="cn-{{$notification.type}}-only">
+					<div class="text-muted notifications-textinput-filter"><i class="fa fa-fw fa-filter"></i></div>
+					<input id="cn-{{$notification.type}}-input" type="text" class="notification-filter form-control form-control-sm" placeholder="{{$notification.filter.name_label}}">
+					<div id="cn-{{$notification.type}}-input-clear" class="text-muted notifications-textinput-clear d-none"><i class="fa fa-times"></i></div>
+				</div>
+				{{/if}}
+				{{/if}}
+				<div id="nav-{{$notification.type}}-menu" class="list-group list-group-flush"></div>
+				<div id="nav-{{$notification.type}}-loading" class="list-group-item" style="display: none;">
+					{{$loading}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>
+				</div>
 			</div>
 		</div>
+		{{/foreach}}
 	</div>
-	{{/foreach}}
-</div>
 </div>
 {{/if}}
-- 
cgit v1.2.3


From 750721c1a0b501422924f086899d70139d8b0233 Mon Sep 17 00:00:00 2001
From: Mario <mario@mariovavti.com>
Date: Mon, 7 Jun 2021 14:12:30 +0000
Subject: bs5: minor fix

---
 view/tpl/notifications_widget.tpl | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'view/tpl')

diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index 94747f607..4fb9fcea5 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -221,8 +221,8 @@
 		{{foreach $notifications as $notification}}
 		<div class="accordion-item {{$notification.type}}-button collapse">
 			<div class="accordion-header notification-link" id="notification-link-{{$notification.type}}">
-				<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav-{{$notification.type}}-sub" data-sse_type="{{$notification.type}}" aria-expanded="false" aria-controls="nav-{{$notification.type}}-sub">
-					<i class="fa fa-fw fa-{{$notification.icon}}"></i> {{$notification.label}}
+				<button class="accordion-button collapsed p-3" type="button" data-bs-toggle="collapse" data-bs-target="#nav-{{$notification.type}}-sub" data-sse_type="{{$notification.type}}" aria-expanded="false" aria-controls="nav-{{$notification.type}}-sub">
+					<i class="fa fa-fw fa-{{$notification.icon}}"></i>&nbsp;{{$notification.label}}
 					<span class="float-end badge badge-{{$notification.severity}} {{$notification.type}}-update"></span>
 				</button>
 			</div>
-- 
cgit v1.2.3


From 219d47f04c7bb04dcc241b9ed6ca411fc9653f09 Mon Sep 17 00:00:00 2001
From: Mario <mario@mariovavti.com>
Date: Mon, 7 Jun 2021 18:38:54 +0000
Subject: bs5: more fixes

---
 view/tpl/navbar_default.tpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'view/tpl')

diff --git a/view/tpl/navbar_default.tpl b/view/tpl/navbar_default.tpl
index 48daf7b56..6c3cf3ff5 100644
--- a/view/tpl/navbar_default.tpl
+++ b/view/tpl/navbar_default.tpl
@@ -90,7 +90,7 @@
 			<i class="fa fa-question-circle"></i>
 		</button>
 		{{/if}}
-		<button id="expand-aside" type="button" class="d-lg-none navbar-toggler border-0" data-bs-toggle="offcanvas" data-bs-target="#region_1">
+		<button id="expand-aside" type="button" class="d-lg-none navbar-toggler border-0">
 			<i class="fa fa-arrow-circle-right" id="expand-aside-icon"></i>
 		</button>
 		{{if $localuser || $nav.pubs}}
-- 
cgit v1.2.3


From cec2f0d894b80f3affeb60cff2d4afa49a2019a8 Mon Sep 17 00:00:00 2001
From: Mario <mario@mariovavti.com>
Date: Thu, 29 Jul 2021 08:19:33 +0000
Subject: more work on bs5

---
 view/tpl/chatroomlist.tpl         |  2 +-
 view/tpl/notifications_widget.tpl | 75 ++++-----------------------------------
 view/tpl/photo_albums.tpl         |  2 +-
 3 files changed, 9 insertions(+), 70 deletions(-)

(limited to 'view/tpl')

diff --git a/view/tpl/chatroomlist.tpl b/view/tpl/chatroomlist.tpl
index c7f2c2c6f..2825a3f9e 100644
--- a/view/tpl/chatroomlist.tpl
+++ b/view/tpl/chatroomlist.tpl
@@ -3,7 +3,7 @@
 	<ul class="nav nav-pills flex-column">
 		<li class="nav-item"><a class="nav-link" href="{{$baseurl}}/chat/{{$nickname}}">{{$overview}}</a></li>
 		{{foreach $items as $item}}
-		<li class="nav-item"><a class="nav-link" href="{{$baseurl}}/chat/{{$nickname}}/{{$item.cr_id}}"><span class="badge float-end">{{$item.cr_inroom}}</span>{{$item.cr_name}}</a></li>
+		<li class="nav-item"><a class="nav-link" href="{{$baseurl}}/chat/{{$nickname}}/{{$item.cr_id}}"><span class="badge bg-secondary float-end">{{$item.cr_inroom}}</span>{{$item.cr_name}}</a></li>
 		{{/foreach}}
 	</ul>
 </div>
diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index 19452dad7..b75d9f796 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -493,9 +493,9 @@
 						if(fcount < 1)
 							$('.' + n[1] + '-button').fadeOut();
 
-						var count = Number($(this).find('.badge-secondary').html());
+						var count = Number($(this).find('.bg-secondary').html());
 						count--;
-						$(this).find('.badge-secondary').html(count);
+						$(this).find('.bg-secondary').html(count);
 						if(count < 1)
 							$(this).remove();
 					}
@@ -518,21 +518,21 @@
 	}
 </script>
 
-<!--div id="notifications_wrapper" class="mb-4">
+<div id="notifications_wrapper" class="mb-4">
 	<div id="no_notifications" class="d-xl-none">
 		{{$no_notifications}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>
 	</div>
 	<div id="nav-notifications-template" rel="template">
 		<a class="list-group-item text-decoration-none text-dark clearfix notification {6}" href="{0}" title="{13}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-when="{5}">
 			<img class="menu-img-3" data-src="{1}" loading="lazy">
-			<div class="contactname"><span class="text-dark font-weight-bold">{2}</span> <span class="text-muted">{3}</span></div>
+			<div class="contactname"><span class="text-dark fw-bold">{2}</span> <span class="text-muted">{3}</span></div>
 			<span class="text-muted">{4}</span><br>
 			<span class="text-muted notifications-autotime" title="{5}">{5}</span>
 		</a>
 	</div>
 	<div id="nav-notifications-forums-template" rel="template">
 		<a class="list-group-item text-decoration-none clearfix notification notification-forum" href="{0}" title="{4} - {3}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-b64mids='{12}'>
-			<span class="float-end badge badge-secondary">{10}</span>
+			<span class="float-end badge bg-secondary">{10}</span>
 			<img class="menu-img-1" data-src="{1}" loading="lazy">
 			<span class="">{2}</span>
 			<i class="fa fa-{11} text-muted"></i>
@@ -543,9 +543,9 @@
 		<div class="rounded list-group list-group-flush collapse {{$notification.type}}-button">
 			<a id="notification-link-{{$notification.type}}" class="collapsed list-group-item text-decoration-none notification-link" href="#" title="{{$notification.title}}" data-bs-target="#nav-{{$notification.type}}-sub" data-bs-toggle="collapse" data-sse_type="{{$notification.type}}">
 				<i class="fa fa-fw fa-{{$notification.icon}}"></i> {{$notification.label}}
-				<span class="float-end badge badge-{{$notification.severity}} {{$notification.type}}-update"></span>
+				<span class="float-end badge bg-{{$notification.severity}} {{$notification.type}}-update"></span>
 			</a>
-			<div id="nav-{{$notification.type}}-sub" class="list-group list-group-flush border border-left-0 border-top-0 border-right-0 collapse notification-content" data-parent="#notifications" data-sse_type="{{$notification.type}}">
+			<div id="nav-{{$notification.type}}-sub" class="list-group list-group-flush border border-left-0 border-top-0 border-right-0 collapse notification-content" data-bs-parent="#notifications" data-sse_type="{{$notification.type}}">
 				{{if $notification.viewall}}
 				<a class="list-group-item text-decoration-none text-dark" id="nav-{{$notification.type}}-see-all" href="{{$notification.viewall.url}}">
 					<i class="fa fa-fw fa-external-link"></i> {{$notification.viewall.label}}
@@ -579,65 +579,4 @@
 		</div>
 		{{/foreach}}
 	</div>
-</div-->
-
-<div id="notifications_wrapper" class="mb-4">
-	<div id="nav-notifications-template" rel="template">
-		<a class="list-group-item text-decoration-none text-darkclearfix notification {6}" href="{0}" title="{13}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-when="{5}">
-			<img class="menu-img-3" data-src="{1}" loading="lazy">
-			<div class="contactname"><span class="text-dark fw-bold">{2}</span> <span class="text-muted">{3}</span></div>
-			<span class="text-muted">{4}</span><br>
-			<span class="text-muted notifications-autotime" title="{5}">{5}</span>
-		</a>
-	</div>
-	<div id="nav-notifications-forums-template" rel="template">
-		<a class="list-group-item text-decoration-none clearfix notification notification-forum" href="{0}" title="{4} - {3}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-b64mids='{12}'>
-			<span class="float-end badge badge-secondary">{10}</span>
-			<img class="menu-img-1" data-src="{1}" loading="lazy">
-			<span class="">{2}</span>
-			<i class="fa fa-{11} text-muted"></i>
-		</a>
-	</div>
-	<div class="accordion accordion-flush border collapse" id="notifications">
-		{{foreach $notifications as $notification}}
-		<div class="accordion-item {{$notification.type}}-button collapse">
-			<div class="accordion-header notification-link" id="notification-link-{{$notification.type}}">
-				<button class="accordion-button collapsed p-3" type="button" data-bs-toggle="collapse" data-bs-target="#nav-{{$notification.type}}-sub" data-sse_type="{{$notification.type}}" aria-expanded="false" aria-controls="nav-{{$notification.type}}-sub">
-					<i class="fa fa-fw fa-{{$notification.icon}}"></i>&nbsp;{{$notification.label}}
-					<span class="float-end badge badge-{{$notification.severity}} {{$notification.type}}-update"></span>
-				</button>
-			</div>
-			<div id="nav-{{$notification.type}}-sub" class="list-group list-group-flush accordion-collapse collapse notification-content" aria-labelledby="notification-link-{{$notification.type}}" data-bs-parent="#notifications">
-				{{if $notification.viewall}}
-				<a class="list-group-item text-decoration-none text-dark" id="nav-{{$notification.type}}-see-all" href="{{$notification.viewall.url}}">
-					<i class="fa fa-fw fa-external-link"></i> {{$notification.viewall.label}}
-				</a>
-				{{/if}}
-				{{if $notification.markall}}
-				<div class="list-group-item cursor-pointer" id="nav-{{$notification.type}}-mark-all" onclick="markRead('{{$notification.type}}'); return false;">
-					<i class="fa fa-fw fa-check"></i> {{$notification.markall.label}}
-				</div>
-				{{/if}}
-				{{if $notification.filter}}
-				{{if $notification.filter.posts_label}}
-				<div class="list-group-item cursor-pointer" id="tt-{{$notification.type}}-only">
-					<i class="fa fa-fw fa-filter"></i> {{$notification.filter.posts_label}}
-				</div>
-				{{/if}}
-				{{if $notification.filter.name_label}}
-				<div class="list-group-item clearfix notifications-textinput" id="cn-{{$notification.type}}-only">
-					<div class="text-muted notifications-textinput-filter"><i class="fa fa-fw fa-filter"></i></div>
-					<input id="cn-{{$notification.type}}-input" type="text" class="notification-filter form-control form-control-sm" placeholder="{{$notification.filter.name_label}}">
-					<div id="cn-{{$notification.type}}-input-clear" class="text-muted notifications-textinput-clear d-none"><i class="fa fa-times"></i></div>
-				</div>
-				{{/if}}
-				{{/if}}
-				<div id="nav-{{$notification.type}}-menu" class="list-group list-group-flush"></div>
-				<div id="nav-{{$notification.type}}-loading" class="list-group-item" style="display: none;">
-					{{$loading}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>
-				</div>
-			</div>
-		</div>
-		{{/foreach}}
-	</div>
 </div>
diff --git a/view/tpl/photo_albums.tpl b/view/tpl/photo_albums.tpl
index 9e77ba71e..e2edec687 100644
--- a/view/tpl/photo_albums.tpl
+++ b/view/tpl/photo_albums.tpl
@@ -5,7 +5,7 @@
 		{{if $albums}}
 		{{foreach $albums as $al}}
 		{{if $al.shorttext}}
-		<li class="nav-item"><a class="nav-link" href="{{$baseurl}}/photos/{{$nick}}/album/{{$al.bin2hex}}"><span class="badge badge-secondary float-end">{{$al.total}}</span>{{$al.shorttext}}</a></li>
+		<li class="nav-item"><a class="nav-link" href="{{$baseurl}}/photos/{{$nick}}/album/{{$al.bin2hex}}"><span class="badge bg-secondary float-end">{{$al.total}}</span>{{$al.shorttext}}</a></li>
 		{{/if}}
 		{{/foreach}}
 		{{/if}}
-- 
cgit v1.2.3


From 943e7dd242caf5e66ce1d093b137e86db156aa73 Mon Sep 17 00:00:00 2001
From: Mario <mario@mariovavti.com>
Date: Thu, 29 Jul 2021 08:45:42 +0000
Subject: fix notification button class

---
 view/tpl/notifications_widget.tpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'view/tpl')

diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index b75d9f796..0e0fac436 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -541,7 +541,7 @@
 	<div id="notifications" class="border border-bottom-0 rounded navbar-nav collapse">
 		{{foreach $notifications as $notification}}
 		<div class="rounded list-group list-group-flush collapse {{$notification.type}}-button">
-			<a id="notification-link-{{$notification.type}}" class="collapsed list-group-item text-decoration-none notification-link" href="#" title="{{$notification.title}}" data-bs-target="#nav-{{$notification.type}}-sub" data-bs-toggle="collapse" data-sse_type="{{$notification.type}}">
+			<a id="notification-link-{{$notification.type}}" class="collapsed list-group-item fakelink notification-link" href="#" title="{{$notification.title}}" data-bs-target="#nav-{{$notification.type}}-sub" data-bs-toggle="collapse" data-sse_type="{{$notification.type}}">
 				<i class="fa fa-fw fa-{{$notification.icon}}"></i> {{$notification.label}}
 				<span class="float-end badge bg-{{$notification.severity}} {{$notification.type}}-update"></span>
 			</a>
-- 
cgit v1.2.3


From 693736df7c4de1b00f746f9f671f287fc757aa3e Mon Sep 17 00:00:00 2001
From: Mario <mario@mariovavti.com>
Date: Thu, 29 Jul 2021 09:03:22 +0000
Subject: dropdown-menu-right -> dropdown-menu-end

---
 view/tpl/abook_edit.tpl       |  4 ++--
 view/tpl/cdav_addressbook.tpl |  4 ++--
 view/tpl/chat.tpl             |  2 +-
 view/tpl/cloud_directory.tpl  | 10 +++++-----
 view/tpl/common_tabs.tpl      |  2 +-
 view/tpl/connections.tpl      |  2 +-
 view/tpl/conv_item.tpl        |  8 ++++----
 view/tpl/conv_list.tpl        |  4 ++--
 view/tpl/directory_header.tpl |  2 +-
 view/tpl/help.tpl             |  2 +-
 view/tpl/mail_conv.tpl        |  2 +-
 view/tpl/navbar_tucson.tpl    |  4 ++--
 view/tpl/photo_view.tpl       |  4 ++--
 view/tpl/pinned_item.tpl      |  6 +++---
 view/tpl/profile_advanced.tpl |  4 ++--
 view/tpl/profile_edit.tpl     |  2 +-
 view/tpl/profile_vcard.tpl    |  2 +-
 view/tpl/prv_message.tpl      |  2 +-
 view/tpl/search_item.tpl      |  2 +-
 view/tpl/wiki.tpl             |  2 +-
 view/tpl/wikilist.tpl         |  2 +-
 21 files changed, 36 insertions(+), 36 deletions(-)

(limited to 'view/tpl')

diff --git a/view/tpl/abook_edit.tpl b/view/tpl/abook_edit.tpl
index 5520a7a45..380d5886c 100644
--- a/view/tpl/abook_edit.tpl
+++ b/view/tpl/abook_edit.tpl
@@ -6,7 +6,7 @@
 				<button id="connection-dropdown" class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 					<i class="fa fa-cog"></i>&nbsp;{{$tools_label}}
 				</button>
-				<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
+				<div class="dropdown-menu dropdown-menu-end" aria-labelledby="dLabel">
 					<a class="dropdown-item" href="{{$tools.view.url}}" title="{{$tools.view.title}}">{{$tools.view.label}}</a>
 					<a class="dropdown-item" href="{{$tools.recent.url}}" title="{{$tools.recent.title}}">{{$tools.recent.label}}</a>
 					{{if $tools.fetchvc}}
@@ -26,7 +26,7 @@
 				<a href="connedit/{{$abook_prev}}{{if $section}}?f=&section={{$section}}{{/if}}" class="btn btn-outline-secondary btn-sm{{if ! $abook_prev}} disabled{{/if}}" ><i class="fa fa-backward"></i></a>
 				<div class="btn-group" >
 					<button class="btn btn-outline-secondary btn-sm{{if $is_pending}} disabled{{/if}}" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-bars"></i></button>
-					<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
+					<div class="dropdown-menu dropdown-menu-end" aria-labelledby="dLabel">
 						{{foreach $sections as $s}}
 						<a class="dropdown-item" href="{{$s.url}}" title="{{$s.title}}">{{$s.label}}</a>
 						{{/foreach}}
diff --git a/view/tpl/cdav_addressbook.tpl b/view/tpl/cdav_addressbook.tpl
index 081a34011..ab0b43ffc 100644
--- a/view/tpl/cdav_addressbook.tpl
+++ b/view/tpl/cdav_addressbook.tpl
@@ -173,7 +173,7 @@ $(document).ready(function() {
 			<input type="hidden" name="target" value="{{$id}}">
 			<div class="dropdown float-end">
 				<button data-bs-toggle="dropdown" type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle"><i class="fa fa-plus"></i> {{$add_field}}</button>
-				<div class="dropdown-menu dropdown-menu-right">
+				<div class="dropdown-menu dropdown-menu-end">
 					<a class="dropdown-item add-vcard-org add-field" style="display: none" href="#" data-add="vcard-org" data-id="new">{{$org_label}}</a>
 					<a class="dropdown-item add-vcard-title add-field" style="display: none" href="#" data-add="vcard-title" data-id="new">{{$title_label}}</a>
 					<a class="dropdown-item add-vcard-tel add-field" href="#" data-add="vcard-tel" data-id="new">{{$tel_label}}</a>
@@ -275,7 +275,7 @@ $(document).ready(function() {
 			<div id="vcard-cancel-{{$card.id}}" class="vcard-cancel vcard-cancel-btn" data-id="{{$card.id}}" data-action="cancel"><i class="fa fa-close"></i></div>
 			<div id="vcard-add-field-{{$card.id}}" class="dropdown float-end vcard-add-field">
 				<button data-bs-toggle="dropdown" type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle"><i class="fa fa-plus"></i> {{$add_field}}</button>
-				<div class="dropdown-menu dropdown-menu-right">
+				<div class="dropdown-menu dropdown-menu-end">
 					<a class="dropdown-item add-vcard-org add-field"{{if $card.org}} style="display: none"{{/if}} href="#" data-add="vcard-org" data-id="{{$card.id}}">{{$org_label}}</a>
 					<a class="dropdown-item add-vcard-title add-field"{{if $card.title}} style="display: none"{{/if}} href="#" data-add="vcard-title" data-id="{{$card.id}}">{{$title_label}}</a>
 					<a class="dropdown-item add-vcard-tel add-field" href="#" data-add="vcard-tel" data-id="{{$card.id}}">{{$tel_label}}</a>
diff --git a/view/tpl/chat.tpl b/view/tpl/chat.tpl
index 944fbebb5..da8da30f2 100644
--- a/view/tpl/chat.tpl
+++ b/view/tpl/chat.tpl
@@ -32,7 +32,7 @@
 					<div id="chat-submit" class="dropup float-end">
 						<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown"><i class="fa fa-cog"></i></button>
 						<button class="btn btn-primary btn-sm" type="submit" id="chat-submit" name="submit" value="{{$submit}}">{{$submit}}</button>
-						<div class="dropdown-menu dropdown-menu-right">
+						<div class="dropdown-menu dropdown-menu-end">
 							<a class="dropdown-item" href="{{$baseurl}}/chatsvc?f=&room_id={{$room_id}}&status=online"><i class="fa fa-circle online"></i>&nbsp;{{$online}}</a>
 							<a class="dropdown-item" href="{{$baseurl}}/chatsvc?f=&room_id={{$room_id}}&status=away"><i class="fa fa-circle away"></i>&nbsp;{{$away}}</a>
 							<a class="dropdown-item" href="{{$baseurl}}/chat/{{$nickname}}/{{$room_id}}/leave"><i class="fa fa-circle leave"></i>&nbsp;{{$leave}}</a>
diff --git a/view/tpl/cloud_directory.tpl b/view/tpl/cloud_directory.tpl
index a587c6cf2..b5ac93204 100644
--- a/view/tpl/cloud_directory.tpl
+++ b/view/tpl/cloud_directory.tpl
@@ -77,7 +77,7 @@
 					<button class="btn btn-warning btn-sm" id="multi-dropdown-button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 						<i class="fa fa-fw fa-ellipsis-v d-table-cell"></i><span class="d-none d-md-table-cell">{{$bulk_actions_label}}</span>
 					</button>
-					<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-button">
+					<div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdown-button">
 						{{if $is_owner}}
 						<a id="cloud-multi-tool-perms-btn" class="dropdown-item" href="#"><i class="fa fa-fw fa-lock"></i> {{$adjust_permissions_label}}</a>
 						{{/if}}
@@ -92,7 +92,7 @@
 					<button class="btn btn-warning btn-sm" id="multi-dropdown-button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 						<i class="fa fa-fw fa-ellipsis-v d-table-cell"></i><span class="d-none d-md-table-cell">{{$bulk_actions_label}}</span>
 					</button>
-					<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-button">
+					<div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdown-button">
 						<a id="cloud-multi-tool-delete-btn" class="dropdown-item" href="#"><i class="fa fa-fw fa-trash-o"></i> {{$admin_delete_label}}</a>
 					</div>
 				</div>
@@ -152,7 +152,7 @@
 			<td class="cloud-index-tool p-2">
 				{{if $item.lockstate == 'lock'}}
 				<i class="fa fa-lock lockview" data-bs-toggle="dropdown" onclick="lockview('attach',{{$item.attach_id}});"></i>
-				<ul id="panel-{{$item.attach_id}}" class="lockview-panel dropdown-menu dropdown-menu-right"></ul>
+				<ul id="panel-{{$item.attach_id}}" class="lockview-panel dropdown-menu dropdown-menu-end"></ul>
 				{{/if}}
 			</td>
 			<td class="cloud-index-tool">
@@ -161,7 +161,7 @@
 					<button class="btn btn-link btn-sm" id="dropdown-button-{{$item.attach_id}}" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 						<i class="fa fa-fw fa-ellipsis-v"></i>
 					</button>
-					<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-button-{{$item.attach_id}}">
+					<div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdown-button-{{$item.attach_id}}">
 						<a id="cloud-tool-info-btn-{{$item.attach_id}}" class="dropdown-item cloud-tool-info-btn" href="#" data-id="{{$item.attach_id}}"><i class="fa fa-fw fa-info"></i> {{$info_label}}</a>
 						{{if $is_owner}}
 						<a id="cloud-tool-perms-btn-{{$item.attach_id}}" class="dropdown-item cloud-tool-perms-btn" href="#" data-id="{{$item.attach_id}}"><i class="fa fa-fw fa-{{$item.lockstate}}"></i> {{$adjust_permissions_label}}</a>
@@ -186,7 +186,7 @@
 					<button class="btn btn-link btn-sm" id="dropdown-button-{{$item.attach_id}}" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 						<i class="fa fa-fw fa-ellipsis-v"></i>
 					</button>
-					<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-button-{{$item.attach_id}}">
+					<div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdown-button-{{$item.attach_id}}">
 						{{if $item.collection}}
 						<a id="cloud-tool-dir-download-btn-{{$item.attach_id}}" class="dropdown-item cloud-tool-dir-download-btn" href="#" data-id="{{$item.attach_id}}"><i class="fa fa-fw fa-cloud-download"></i> {{$download_label}}</a>
 						{{else}}
diff --git a/view/tpl/common_tabs.tpl b/view/tpl/common_tabs.tpl
index 100114c21..429cc561d 100644
--- a/view/tpl/common_tabs.tpl
+++ b/view/tpl/common_tabs.tpl
@@ -9,7 +9,7 @@
 	<button type="button" class="btn btn-outline-secondary btn-sm float-end" data-bs-toggle="dropdown">
 		<i class="fa fa-bars"></i>
 	</button>
-	<div class="dropdown-menu dropdown-menu-right">
+	<div class="dropdown-menu dropdown-menu-end">
 		{{foreach $tabs as $tab}}
 		<a class="dropdown-item{{if $tab.sel}} {{$tab.sel}}{{/if}}" href="{{$tab.url}}"{{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a>
 		{{/foreach}}
diff --git a/view/tpl/connections.tpl b/view/tpl/connections.tpl
index 0dc7f536b..86f353d82 100644
--- a/view/tpl/connections.tpl
+++ b/view/tpl/connections.tpl
@@ -7,7 +7,7 @@
 			<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{{$sort}}">
 				<i class="fa fa-filter"></i>
 			</button>
-			<div class="dropdown-menu dropdown-menu-right">
+			<div class="dropdown-menu dropdown-menu-end">
 				{{foreach $tabs as $menu}}
 				<a class="dropdown-item {{$menu.sel}}" href="{{$menu.url}}">{{$menu.label}}</a>
 				{{/foreach}}
diff --git a/view/tpl/conv_item.tpl b/view/tpl/conv_item.tpl
index fc4b2e4dc..7c3505410 100644
--- a/view/tpl/conv_item.tpl
+++ b/view/tpl/conv_item.tpl
@@ -89,7 +89,7 @@
 							<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="wall-item-react-{{$item.id}}">
 								<i class="fa fa-smile-o"></i>
 							</button>
-							<div class="dropdown-menu dropdown-menu-right">
+							<div class="dropdown-menu dropdown-menu-end">
 							{{foreach $item.reactions as $react}}
 								<a class="dropdown-item clearfix" href="#" onclick="jotReact({{$item.id}},'{{$react}}'); return false;"><img class="menu-img-2" src="/images/emoji/{{$react}}.png" alt="{{$react}}" /></a>
 							{{/foreach}}
@@ -117,7 +117,7 @@
 								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="wall-item-attend-menu-{{$item.id}}" title="{{$item.attend_title}}">
 									<i class="fa fa-calendar-check-o"></i>
 								</button>
-								<div class="dropdown-menu dropdown-menu-right">
+								<div class="dropdown-menu dropdown-menu-end">
 									<a class="dropdown-item" href="#" title="{{$item.attend.0}}" onclick="itemAddToCal({{$item.id}}); dolike({{$item.id}},'attendyes'); return false;">
 										<i class="item-act-list fa fa-check{{if $item.my_responses.attend}} ivoted{{/if}}" ></i> {{$item.attend.0}}
 									</a>
@@ -135,7 +135,7 @@
 								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="wall-item-consensus-menu-{{$item.id}}" title="{{$item.vote_title}}">
 									<i class="fa fa-check-square-o"></i>
 								</button>
-								<div class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="wall-item-consensus-menu-{{$item.id}}">
+								<div class="dropdown-menu dropdown-menu-end" role="menu" aria-labelledby="wall-item-consensus-menu-{{$item.id}}">
 									<a class="dropdown-item" href="#" title="{{$item.conlabels.0}}" onclick="dolike({{$item.id}},'agree'); return false;">
 										<i class="item-act-list fa fa-check{{if $item.my_responses.agree}} ivoted{{/if}}" ></i> {{$item.conlabels.0}}
 									</a>
@@ -152,7 +152,7 @@
 								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="wall-item-menu-{{$item.id}}">
 									<i class="fa fa-cog"></i>
 								</button>
-								<div class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="wall-item-menu-{{$item.id}}">
+								<div class="dropdown-menu dropdown-menu-end" role="menu" aria-labelledby="wall-item-menu-{{$item.id}}">
 									{{if $item.share}}
 									<a class="dropdown-item" href="#" onclick="jotShare({{$item.id}},{{$item.item_type}}); return false"><i class="generic-icons-nav fa fa-fw fa-retweet" title="{{$item.share.0}}"></i>{{$item.share.0}}</a>
 									{{/if}}
diff --git a/view/tpl/conv_list.tpl b/view/tpl/conv_list.tpl
index d163c5842..a20a6de8d 100644
--- a/view/tpl/conv_list.tpl
+++ b/view/tpl/conv_list.tpl
@@ -77,7 +77,7 @@
 							<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="wall-item-react-{{$item.id}}">
 								<i class="fa fa-smile-o"></i>
 							</button>
-							<div class="dropdown-menu dropdown-menu-right">
+							<div class="dropdown-menu dropdown-menu-end">
 							{{foreach $item.reactions as $react}}
 								<a class="dropdown-item clearfix" href="#" onclick="jotReact({{$item.id}},'{{$react}}'); return false;"><img class="menu-img-2" src="/images/emoji/{{$react}}.png" alt="{{$react}}" /></a>
 							{{/foreach}}
@@ -135,7 +135,7 @@
 								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="wall-item-menu-{{$item.id}}">
 									<i class="fa fa-cog"></i>
 								</button>
-								<div class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="wall-item-menu-{{$item.id}}">
+								<div class="dropdown-menu dropdown-menu-end" role="menu" aria-labelledby="wall-item-menu-{{$item.id}}">
 									{{if $item.share}}
 									<a class="dropdown-item" href="#" onclick="jotShare({{$item.id}},{{$item.item_type}}); return false"><i class="generic-icons-nav fa fa-fw fa-retweet" title="{{$item.share.0}}"></i>{{$item.share.0}}</a>
 									{{/if}}
diff --git a/view/tpl/directory_header.tpl b/view/tpl/directory_header.tpl
index 95ddef96e..f5ce7ce0a 100644
--- a/view/tpl/directory_header.tpl
+++ b/view/tpl/directory_header.tpl
@@ -4,7 +4,7 @@
 			<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{{$sort}}">
 				<i class="fa fa-sort"></i>
 			</button>
-			<div class="dropdown-menu dropdown-menu-right">
+			<div class="dropdown-menu dropdown-menu-end">
 				<a class="dropdown-item" href="directory?f=&order=date{{$suggest}}">{{$date}}</a>
 				<a class="dropdown-item" href="directory?f=&order=normal{{$suggest}}">{{$normal}}</a>
 				<a class="dropdown-item" href="directory?f=&order=reversedate{{$suggest}}">{{$reversedate}}</a>
diff --git a/view/tpl/help.tpl b/view/tpl/help.tpl
index 59f4a48cd..5022e7b1b 100644
--- a/view/tpl/help.tpl
+++ b/view/tpl/help.tpl
@@ -5,7 +5,7 @@
 				<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
 					<i class="fa fa-language" style="font-size: 1.4em;"></i>
 				</button>
-				<div class="dropdown-menu dropdown-menu-right flex-column lang-selector">
+				<div class="dropdown-menu dropdown-menu-end flex-column lang-selector">
 					<a class="dropdown-item lang-choice" href="/help">de</a>
 					<a class="dropdown-item lang-choice" href="/help">en</a>
 					<a class="dropdown-item lang-choice" href="/help">es</a>
diff --git a/view/tpl/mail_conv.tpl b/view/tpl/mail_conv.tpl
index f51b44884..948890312 100644
--- a/view/tpl/mail_conv.tpl
+++ b/view/tpl/mail_conv.tpl
@@ -23,7 +23,7 @@
 			<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="mail-item-menu-{{$mail.id}}">
 				<i class="fa fa-cog"></i>
 			</button>
-			<div class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="mail-item-menu-{{$mail.id}}">
+			<div class="dropdown-menu dropdown-menu-end" role="menu" aria-labelledby="mail-item-menu-{{$mail.id}}">
 				{{** if $mail.can_recall}}
 				<a class="dropdown-item" href="mail/{{$mail.mailbox}}/recall/{{$mail.id}}" title="{{$mail.recall}}" id="mail-conv-recall-icon-{{$mail.id}}"><i class="fa fa-fw fa-undo"></i>&nbsp;{{$mail.recall}}</a>
 				{{/if **}}
diff --git a/view/tpl/navbar_tucson.tpl b/view/tpl/navbar_tucson.tpl
index c790e3fbf..6a8b5872d 100644
--- a/view/tpl/navbar_tucson.tpl
+++ b/view/tpl/navbar_tucson.tpl
@@ -142,7 +142,7 @@
 		{{if $channel_menu && $channel_apps.0}}
 		<li class="nav-item dropdown" id="channel-menu">
 			<a class="nav-link" href="#" data-bs-toggle="dropdown"><img src="{{$channel_thumb}}" style="height:14px; width:14px;position:relative; top:-2px;" /></a>
-			<div id="dropdown-menu" class="dropdown-menu dropdown-menu-right">
+			<div id="dropdown-menu" class="dropdown-menu dropdown-menu-end">
 				{{foreach $channel_apps as $channel_app}}
 				{{$channel_app}}
 				{{/foreach}}
@@ -158,7 +158,7 @@
 		{{/if}}
 		<li class="nav-item dropdown" id="app-menu">
 			<a class="nav-link" href="#" data-bs-toggle="dropdown"><i class="fa fa-fw fa-bars"></i></a>
-			<div id="dropdown-menu" class="dropdown-menu dropdown-menu-right">
+			<div id="dropdown-menu" class="dropdown-menu dropdown-menu-end">
 				{{if $channel_apps.0 && ! $channel_menu}}
 				{{foreach $channel_apps as $channel_app}}
 				{{$channel_app}}
diff --git a/view/tpl/photo_view.tpl b/view/tpl/photo_view.tpl
index 85d794f11..473e34123 100644
--- a/view/tpl/photo_view.tpl
+++ b/view/tpl/photo_view.tpl
@@ -7,7 +7,7 @@
 				<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
 					<i class="fa fa-cog"></i>&nbsp;{{$tools_label}}
 				</button>
-				<div class="dropdown-menu dropdown-menu-right flex-column">
+				<div class="dropdown-menu dropdown-menu-end flex-column">
 					{{if $tools}}
 					<a class="dropdown-item" href="{{$tools.profile.0}}"><i class="fa fa-user"></i>&nbsp;{{$tools.profile.1}}</a>
 					<a class="dropdown-item" href="{{$tools.cover.0}}"><i class="fa fa-picture-o"></i>&nbsp;{{$tools.cover.1}}</a>
@@ -24,7 +24,7 @@
 			{{if $lock}}
 			<div class="btn-group">
 				<button id="lockview" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" title="{{$lock}}" onclick="lockview('photo',{{$id}});" ><i class="fa fa-lock"></i></button>
-				<ul id="panel-{{$id}}" class="lockview-panel dropdown-menu dropdown-menu-right"></ul>
+				<ul id="panel-{{$id}}" class="lockview-panel dropdown-menu dropdown-menu-end"></ul>
 			</div>
 			{{/if}}
 			{{if $prevlink || $nextlink}}
diff --git a/view/tpl/pinned_item.tpl b/view/tpl/pinned_item.tpl
index bca49c3df..4d059e0a4 100644
--- a/view/tpl/pinned_item.tpl
+++ b/view/tpl/pinned_item.tpl
@@ -92,7 +92,7 @@
 								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="pinned-item-attend-menu-{{$id}}" title="{{$attend_title}}">
 									<i class="fa fa-calendar-check-o"></i>
 								</button>
-								<div class="dropdown-menu dropdown-menu-right">
+								<div class="dropdown-menu dropdown-menu-end">
 									<a class="dropdown-item" href="#" title="{{$attend.0}}" onclick="itemAddToCal({{$id}}); dolike({{$id}},'attendyes'); return false;">
 										<i class="item-act-list fa fa-check{{if $my_responses.attend}} ivoted{{/if}}" ></i> {{$attend.0}}
 									</a>
@@ -110,7 +110,7 @@
 								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="pinned-item-consensus-menu-{{$id}}" title="{{$vote_title}}">
 									<i class="fa fa-check-square-o"></i>
 								</button>
-								<div class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="wall-item-consensus-menu-{{$id}}">
+								<div class="dropdown-menu dropdown-menu-end" role="menu" aria-labelledby="wall-item-consensus-menu-{{$id}}">
 									<a class="dropdown-item" href="#" title="{{$conlabels.0}}" onclick="dolike({{$id}},'agree'); return false;">
 										<i class="item-act-list fa fa-check{{if $my_responses.agree}} ivoted{{/if}}" ></i> {{$conlabels.0}}
 									</a>
@@ -127,7 +127,7 @@
 							<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="pinned-item-menu-{{$id}}">
 								<i class="fa fa-cog"></i>
 							</button>
-							<div class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="wall-item-menu-{{$id}}">
+							<div class="dropdown-menu dropdown-menu-end" role="menu" aria-labelledby="wall-item-menu-{{$id}}">
 								{{if $share}}
 									<a class="dropdown-item" href="#" onclick="jotShare({{$id}},{{$item_type}}); return false;"><i class="generic-icons-nav fa fa-fw fa-retweet" title="{{$share.0}}"></i>{{$share.0}}</a>
 								{{/if}}
diff --git a/view/tpl/profile_advanced.tpl b/view/tpl/profile_advanced.tpl
index bb60269ae..a4f6c9525 100644
--- a/view/tpl/profile_advanced.tpl
+++ b/view/tpl/profile_advanced.tpl
@@ -5,7 +5,7 @@
 			<div class="btn-group">
 				<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="profile-like">{{$profile.like_count}} {{$profile.like_button_label}}</button>
 				{{if $profile.likers}}
-				<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="profile-like">{{foreach $profile.likers as $liker}}<li role="presentation"><a href="{{$liker.url}}"><img class="menu-img-1" src="{{$liker.photo}}" alt="{{$liker.name}}" /> {{$liker.name}}</a></li>{{/foreach}}</ul>
+				<ul class="dropdown-menu dropdown-menu-end" role="menu" aria-labelledby="profile-like">{{foreach $profile.likers as $liker}}<li role="presentation"><a href="{{$liker.url}}"><img class="menu-img-1" src="{{$liker.photo}}" alt="{{$liker.name}}" /> {{$liker.name}}</a></li>{{/foreach}}</ul>
 				{{/if}}
 			</div>
 			{{/if}}
@@ -19,7 +19,7 @@
 			{{if $editmenu.multi}}
 			<div class="btn-group">
 				<a class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" href="#" ><i class="fa fa-pencil"></i>&nbsp;{{$editmenu.edit.3}}</a>
-				<div class="dropdown-menu dropdown-menu-right">
+				<div class="dropdown-menu dropdown-menu-end">
 					{{foreach $editmenu.menu.entries as $e}}
 					<a class="dropdown-item" href="profiles/{{$e.id}}"><img class="dropdown-menu-img-xs" src='{{$e.photo}}'> {{$e.profile_name}}</a>
 					{{/foreach}}
diff --git a/view/tpl/profile_edit.tpl b/view/tpl/profile_edit.tpl
index a2dd319f8..14430bf89 100644
--- a/view/tpl/profile_edit.tpl
+++ b/view/tpl/profile_edit.tpl
@@ -4,7 +4,7 @@
 			<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 				<i class="fa fa-cog"></i>&nbsp;{{$tools_label}}
 			</button>
-			<div class="dropdown-menu dropdown-menu-right">
+			<div class="dropdown-menu dropdown-menu-end">
 				<a class="dropdown-item" href="profile_photo" id="profile-photo_upload-link" title="{{$profpic}}"><i class="fa fa-fw fa-user"></i>&nbsp;{{$profpic}}</a>
 				{{if $is_default}}
 				<a class="dropdown-item" href="cover_photo" id="cover-photo_upload-link" title="{{$coverpic}}"><i class="fa fa-fw fa-picture-o"></i>&nbsp;{{$coverpic}}</a>
diff --git a/view/tpl/profile_vcard.tpl b/view/tpl/profile_vcard.tpl
index 6d3a51d60..13caf5603 100644
--- a/view/tpl/profile_vcard.tpl
+++ b/view/tpl/profile_vcard.tpl
@@ -9,7 +9,7 @@
 	{{if $editmenu.multi}}
 	<div class="dropdown float-end">
 		<a class="dropdown-toggle" data-bs-toggle="dropdown" href="#" ><i class="fa fa-pencil" title="{{$editmenu.edit.1}}"></i></a>
-		<div class="dropdown-menu dropdown-menu-right" role="menu">
+		<div class="dropdown-menu dropdown-menu-end" role="menu">
 			{{foreach $editmenu.menu.entries as $e}}
 			<a href="profiles/{{$e.id}}" class="dropdown-item"><img class="menu-img-1" src='{{$e.photo}}'> {{$e.profile_name}}</a>
 			{{/foreach}}
diff --git a/view/tpl/prv_message.tpl b/view/tpl/prv_message.tpl
index e01574d9a..4646d9f88 100644
--- a/view/tpl/prv_message.tpl
+++ b/view/tpl/prv_message.tpl
@@ -83,7 +83,7 @@
 							<button type="button" id="more-tools" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
 								<i id="more-tools-icon" class="fa fa-cog jot-icons"></i>
 							</button>
-							<div class="dropdown-menu dropdown-menu-right" role="menu">
+							<div class="dropdown-menu dropdown-menu-end" role="menu">
 								<a class="dropdown-item" href="#" id="prvmail-attach-sub"><i class="fa fa-paperclip"></i>&nbsp;{{$attach}}</a>
 								<a class="dropdown-item" href="#" onclick="prvmailJotGetLink(); return false;" ><i class="fa fa-link"></i>&nbsp;{{$insert}}</a>
 								{{if $feature_expire || $feature_encrypt}}
diff --git a/view/tpl/search_item.tpl b/view/tpl/search_item.tpl
index 9797b11d8..ee89973a8 100644
--- a/view/tpl/search_item.tpl
+++ b/view/tpl/search_item.tpl
@@ -76,7 +76,7 @@
 						<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
 							<i class="fa fa-cog"></i>
 						</button>
-						<div class="dropdown-menu dropdown-menu-right">
+						<div class="dropdown-menu dropdown-menu-end">
 							{{if $item.star}}
 							<a class="dropdown-item" href="#" onclick="dostar({{$item.id}}); return false;"><i id="starred-{{$item.id}}" class="fa fa-fw{{if $item.star.isstarred}} starred fa-star{{else}} unstarred fa-star-o{{/if}} generic-icons-nav" title="{{$item.star.toggle}}"></i>{{$item.star.toggle}}</a>
 							{{/if}}
diff --git a/view/tpl/wiki.tpl b/view/tpl/wiki.tpl
index 7d5c418ce..c300bddba 100644
--- a/view/tpl/wiki.tpl
+++ b/view/tpl/wiki.tpl
@@ -7,7 +7,7 @@
 				<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
 					<i class="fa fa-cog"></i>&nbsp;{{$tools_label}}
 				</button>
-				<div class="dropdown-menu dropdown-menu-right">
+				<div class="dropdown-menu dropdown-menu-end">
 					{{if $renamePage}}
 					<a class="dropdown-item rename-page" href="#"><i class="fa fa-fw fa-edit"></i>&nbsp;{{$renamePage}}</a>
 					{{/if}}
diff --git a/view/tpl/wikilist.tpl b/view/tpl/wikilist.tpl
index e954a39c1..bc8461dac 100644
--- a/view/tpl/wikilist.tpl
+++ b/view/tpl/wikilist.tpl
@@ -48,7 +48,7 @@
 				<td class="dropdown">
 					{{if $wiki.lockstate == 'lock'}}
 					<i class="fa fa-lock lockview" data-bs-toggle="dropdown" onclick="lockview('item',{{$wiki.id}});"></i>
-					<ul id="panel-{{$wiki.id}}" class="lockview-panel dropdown-menu dropdown-menu-right"></ul>
+					<ul id="panel-{{$wiki.id}}" class="lockview-panel dropdown-menu dropdown-menu-end"></ul>
 					{{/if}}
 				</td>
 				<td><i class="fa fa-download" onclick="wiki_download_wiki('{{$wiki.resource_id}}'); return false;"></i></td>
-- 
cgit v1.2.3


From 94be9f115b06c8bda2ebae637120e3e0ca294fc7 Mon Sep 17 00:00:00 2001
From: Mario <mario@mariovavti.com>
Date: Thu, 29 Jul 2021 09:06:02 +0000
Subject: another badge fix

---
 view/tpl/chatrooms.tpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'view/tpl')

diff --git a/view/tpl/chatrooms.tpl b/view/tpl/chatrooms.tpl
index d1151fffe..88c42882c 100644
--- a/view/tpl/chatrooms.tpl
+++ b/view/tpl/chatrooms.tpl
@@ -27,7 +27,7 @@
 					<ul id="panel-{{$room.cr_id}}" class="lockview-panel dropdown-menu"></ul>
 					{{/if}}
 				</td>
-				<td><span class="badge badge-secondary">{{$room.cr_inroom}}</span></td>
+				<td><span class="badge bg-secondary">{{$room.cr_inroom}}</span></td>
 			</tr>
 			{{/foreach}}
 		</table>
-- 
cgit v1.2.3


From b7ffec6fbe77eff3c550a922f50bd79321b293ed Mon Sep 17 00:00:00 2001
From: Mario <mario@mariovavti.com>
Date: Thu, 29 Jul 2021 09:15:18 +0000
Subject: bs5 border fix

---
 view/tpl/notifications_widget.tpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'view/tpl')

diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index 0e0fac436..76b0851a7 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -545,7 +545,7 @@
 				<i class="fa fa-fw fa-{{$notification.icon}}"></i> {{$notification.label}}
 				<span class="float-end badge bg-{{$notification.severity}} {{$notification.type}}-update"></span>
 			</a>
-			<div id="nav-{{$notification.type}}-sub" class="list-group list-group-flush border border-left-0 border-top-0 border-right-0 collapse notification-content" data-bs-parent="#notifications" data-sse_type="{{$notification.type}}">
+			<div id="nav-{{$notification.type}}-sub" class="list-group list-group-flush border-bottom collapse notification-content" data-bs-parent="#notifications" data-sse_type="{{$notification.type}}">
 				{{if $notification.viewall}}
 				<a class="list-group-item text-decoration-none text-dark" id="nav-{{$notification.type}}-see-all" href="{{$notification.viewall.url}}">
 					<i class="fa fa-fw fa-external-link"></i> {{$notification.viewall.label}}
-- 
cgit v1.2.3