diff --git a/public/scss/generics.scss b/public/scss/generics.scss
index c83d8578fe..189349d72c 100644
--- a/public/scss/generics.scss
+++ b/public/scss/generics.scss
@@ -176,6 +176,7 @@
     display: none!important;
 }
 
+// for backwards compat, replace with float-start, float-end respectively
 .pull-left {
 	float: left!important;
 }
diff --git a/public/src/admin/dashboard.js b/public/src/admin/dashboard.js
index 3e3af63ff0..b378ea7fb9 100644
--- a/public/src/admin/dashboard.js
+++ b/public/src/admin/dashboard.js
@@ -64,19 +64,19 @@ define('admin/dashboard', [
 
 		graphData.rooms = data;
 
-		const html = '<div class="text-center pull-left">' +
+		const html = '<div class="text-center float-start">' +
 						'<span class="formatted-number">' + data.onlineRegisteredCount + '</span>' +
 						'<div class="stat">[[admin/dashboard:active-users.users]]</div>' +
 					'</div>' +
-					'<div class="text-center pull-left">' +
+					'<div class="text-center float-start">' +
 						'<span class="formatted-number">' + data.onlineGuestCount + '</span>' +
 						'<div class="stat">[[admin/dashboard:active-users.guests]]</div>' +
 					'</div>' +
-					'<div class="text-center pull-left">' +
+					'<div class="text-center float-start">' +
 						'<span class="formatted-number">' + (data.onlineRegisteredCount + data.onlineGuestCount) + '</span>' +
 						'<div class="stat">[[admin/dashboard:active-users.total]]</div>' +
 					'</div>' +
-					'<div class="text-center pull-left">' +
+					'<div class="text-center float-start">' +
 						'<span class="formatted-number">' + data.socketCount + '</span>' +
 						'<div class="stat">[[admin/dashboard:active-users.connections]]</div>' +
 					'</div>';
diff --git a/public/src/admin/extend/plugins.js b/public/src/admin/extend/plugins.js
index 2bd96bea56..a677f0f94d 100644
--- a/public/src/admin/extend/plugins.js
+++ b/public/src/admin/extend/plugins.js
@@ -195,7 +195,7 @@ define('admin/extend/plugins', [
 				}
 				let html = '';
 				activePlugins.forEach(function (plugin) {
-					html += '<li class="">' + plugin + '<span class="pull-right"><i class="fa fa-chevron-up"></i><i class="fa fa-chevron-down"></i></span></li>';
+					html += '<li class="">' + plugin + '<span class="float-end"><i class="fa fa-chevron-up"></i><i class="fa fa-chevron-down"></i></span></li>';
 				});
 				if (!activePlugins.length) {
 					translator.translate('[[admin/extend/plugins:none-active]]', function (text) {
diff --git a/public/src/modules/helpers.common.js b/public/src/modules/helpers.common.js
index 25907fb446..3df00f28a3 100644
--- a/public/src/modules/helpers.common.js
+++ b/public/src/modules/helpers.common.js
@@ -113,8 +113,8 @@ module.exports = function (utils, Benchpress, relative_path) {
 		category.children.forEach(function (child) {
 			if (child && !child.isSection) {
 				const link = child.link ? child.link : (relative_path + '/category/' + child.slug);
-				html += '<span class="category-children-item pull-left">' +
-					'<div role="presentation" class="icon pull-left" style="' + generateCategoryBackground(child) + '">' +
+				html += '<span class="category-children-item float-start">' +
+					'<div role="presentation" class="icon float-start" style="' + generateCategoryBackground(child) + '">' +
 					'<i class="fa fa-fw ' + child.icon + '"></i>' +
 					'</div>' +
 					'<a href="' + link + '"><small>' + child.name + '</small></a></span>';
diff --git a/public/src/modules/iconSelect.js b/public/src/modules/iconSelect.js
index 96419f2614..dc596cf6b9 100644
--- a/public/src/modules/iconSelect.js
+++ b/public/src/modules/iconSelect.js
@@ -28,6 +28,7 @@ define('iconSelect', ['benchpress', 'bootbox'], function (Benchpress, bootbox) {
 				backdrop: true,
 				show: false,
 				message: html,
+				size: 'large',
 				title: 'Select an Icon',
 				buttons: {
 					noIcon: {
diff --git a/src/views/admin/extend/widgets.tpl b/src/views/admin/extend/widgets.tpl
index 58daab3a82..a11dfeffeb 100644
--- a/src/views/admin/extend/widgets.tpl
+++ b/src/views/admin/extend/widgets.tpl
@@ -105,7 +105,7 @@
 						<div class="card mb-3 pointer" data-container-html='<div class="card"><h5 class="card-header">\{{title}}</h5><div class="card-body">\{{body}}</div></div>'>
 							<div class="card-header">
 								[[admin/extend/widgets:container.panel-header]]
-								<div class="pull-right color-selector">
+								<div class="float-end color-selector">
 									<button data-class="text-bg-primary" class="btn btn-sm btn-primary">&nbsp;&nbsp;</button>
 									<button data-class="" class="btn btn-sm btn-secondary">&nbsp;&nbsp;</button>
 									<button data-class="text-bg-success" class="btn btn-sm btn-success">&nbsp;&nbsp;</button>
@@ -121,7 +121,7 @@
 
 						<div class="alert alert-info pointer" data-container-html='<div class="alert alert-info">\{{body}}</div>'>
 							[[admin/extend/widgets:container.alert]]
-							<div class="pull-right color-selector">
+							<div class="float-end color-selector">
 								<button data-class="alert-success" class="btn btn-sm btn-success">&nbsp;&nbsp;</button>
 								<button data-class="alert-info" class="btn btn-sm btn-info">&nbsp;&nbsp;</button>
 								<button data-class="alert-warning" class="btn btn-sm btn-warning">&nbsp;&nbsp;</button>
diff --git a/src/views/admin/manage/admins-mods.tpl b/src/views/admin/manage/admins-mods.tpl
index 500846da56..51592c9ef6 100644
--- a/src/views/admin/manage/admins-mods.tpl
+++ b/src/views/admin/manage/admins-mods.tpl
@@ -3,7 +3,7 @@
 		<h4><!-- IF admins.icon --><i class="fa {admins.icon}"></i> <!-- ENDIF admins.icon -->[[admin/manage/admins-mods:administrators]]</h4>
 		<div class="administrator-area">
 		<!-- BEGIN admins.members -->
-			<div class="badge text-bg-light m-1 p-1 pull-left" data-uid="{admins.members.uid}">
+			<div class="badge text-bg-light m-1 p-1 float-start" data-uid="{admins.members.uid}">
 				<!-- IF admins.members.picture -->
 				<img class="avatar avatar-sm" src="{admins.members.picture}" alt="" />
 				<!-- ELSE -->
@@ -21,7 +21,7 @@
 		<h4><!-- IF globalMods.icon --><i class="fa {globalMods.icon}"></i> <!-- ENDIF globalMods.icon -->[[admin/manage/admins-mods:global-moderators]]</h4>
 		<div class="global-moderator-area">
 		<!-- BEGIN globalMods.members -->
-			<div class="badge text-bg-light  m-1 p-1 pull-left" data-uid="{globalMods.members.uid}">
+			<div class="badge text-bg-light  m-1 p-1 float-start" data-uid="{globalMods.members.uid}">
 				<!-- IF globalMods.members.picture -->
 				<img class="avatar avatar-sm" src="{globalMods.members.picture}" alt="" />
 				<!-- ELSE -->
@@ -54,7 +54,7 @@
 			<h4>{{{ if categoryMods.icon }}}<i class="fa {categoryMods.icon}"></i> {{{ end }}}{categoryMods.name} {{{ if categoryMods.subCategoryCount }}}<small><a href="{config.relative_path}/admin/manage/admins-mods?cid={categoryMods.cid}#moderators-title">[[admin/manage/admins-mods:subcategories, {categoryMods.subCategoryCount}]]</a></small>{{{ else }}}{{{ end }}}{{{if categoryMods.disabled}}}<span class="badge badge-primary">[[admin/manage/admins-mods:disabled]]</span>{{{end}}}</h4>
 			<div class="moderator-area" data-cid="{categoryMods.cid}">
 				{{{ each categoryMods.moderators }}}
-					<div class="badge text-bg-light m-1 p-1 pull-left" data-uid="{categoryMods.moderators.uid}">
+					<div class="badge text-bg-light m-1 p-1 float-start" data-uid="{categoryMods.moderators.uid}">
 						{{{ if  categoryMods.moderators.picture }}}
 						<img class="avatar avatar-sm" src="{categoryMods.moderators.picture}" alt="" />
 						{{{ else }}}
diff --git a/src/views/admin/manage/group.tpl b/src/views/admin/manage/group.tpl
index 471c4ce2c3..4bb56d79ec 100644
--- a/src/views/admin/manage/group.tpl
+++ b/src/views/admin/manage/group.tpl
@@ -145,7 +145,7 @@
 			</div>
 			<hr />
 			<div class="edit-privileges-selector">
-				<label class="form-label" class="pull-left">[[admin/manage/privileges:edit-privileges]]</label>
+				<label class="form-label" class="float-start">[[admin/manage/privileges:edit-privileges]]</label>
 				<!-- IMPORT partials/category-selector.tpl -->
 			</div>
 		</div>
diff --git a/src/views/admin/manage/registration.tpl b/src/views/admin/manage/registration.tpl
index b4bb8e34b0..5e25c60938 100644
--- a/src/views/admin/manage/registration.tpl
+++ b/src/views/admin/manage/registration.tpl
@@ -74,7 +74,7 @@
 							{{{ end }}}
 
 							<td>
-								<div class="btn-group pull-right">
+								<div class="btn-group float-end">
 									<button class="btn btn-success btn-sm" data-action="accept"><i class="fa fa-check"></i></button>
 									<button class="btn btn-danger btn-sm" data-action="delete"><i class="fa fa-times"></i></button>
 									{{{ each users.customActions }}}
@@ -117,7 +117,7 @@
 							<td class ="invited-by"><!-- IF @first -->{invites.username}<!-- ENDIF @first --></td>
 							<td>{invites.invitations.email}</td>
 							<td>{invites.invitations.username}
-								<div class="btn-group pull-right">
+								<div class="btn-group float-end">
 									<button class="btn btn-danger btn-sm" data-action="delete"><i class="fa fa-times"></i></button>
 								</div>
 							</td>
diff --git a/src/views/admin/manage/uploads.tpl b/src/views/admin/manage/uploads.tpl
index 63ce59965f..2bf6d8894f 100644
--- a/src/views/admin/manage/uploads.tpl
+++ b/src/views/admin/manage/uploads.tpl
@@ -1,6 +1,6 @@
 <!-- IMPORT partials/breadcrumbs.tpl -->
 <div class="clearfix">
-	<div class="pull-right">
+	<div class="float-end">
 		<div class="btn-group">
 			<button id="new-folder" class="btn btn-primary"><i class="fa fa-folder"></i> [[admin/manage/uploads:new-folder]]</button>
 		</div>
diff --git a/src/views/admin/partials/categories/category-rows.tpl b/src/views/admin/partials/categories/category-rows.tpl
index d306307e43..b9ac72fb1e 100644
--- a/src/views/admin/partials/categories/category-rows.tpl
+++ b/src/views/admin/partials/categories/category-rows.tpl
@@ -22,7 +22,7 @@
                 </div>
             </div>
             <div class="col-md-3">
-                <div class="clearfix pull-right text-right">
+                <div class="clearfix float-end text-right">
                     <div class="btn-group category-tools">
                         <button class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" type="button"><i class="fa fa-fw fa-ellipsis-h"></i></button>
                         <ul class="dropdown-menu dropdown-menu-end">
diff --git a/src/views/admin/partials/categories/select-category.tpl b/src/views/admin/partials/categories/select-category.tpl
index aada26fa49..c778b0a359 100644
--- a/src/views/admin/partials/categories/select-category.tpl
+++ b/src/views/admin/partials/categories/select-category.tpl
@@ -16,7 +16,7 @@
 					<a class="dropdown-item" role="menuitem">{categories.level}
 						<span component="category-markup">
 							<div class="category-item d-inline-block">
-								<div role="presentation" class="icon pull-left" style="{function.generateCategoryBackground}">
+								<div role="presentation" class="icon float-start" style="{function.generateCategoryBackground}">
 									<i class="fa fa-fw {./icon}"></i>
 								</div>
 								{./name}
diff --git a/src/views/admin/partials/groups/memberlist.tpl b/src/views/admin/partials/groups/memberlist.tpl
index 9f016a2fd6..2ec3e658d9 100644
--- a/src/views/admin/partials/groups/memberlist.tpl
+++ b/src/views/admin/partials/groups/memberlist.tpl
@@ -29,7 +29,7 @@
 			<a href="{config.relative_path}/user/{group.members.userslug}">{group.members.username}</a> <i title="[[groups:owner]]" class="user-owner-icon fa fa-star text-warning <!-- IF !group.members.isOwner -->invisible<!-- ENDIF !group.members.isOwner -->"></i>
 
 			<!-- IF group.isOwner -->
-			<div class="owner-controls btn-group pull-right">
+			<div class="owner-controls btn-group float-end">
 				<a class="btn btn-sm" href="#" data-ajaxify="false" data-action="toggleOwnership" title="[[groups:details.grant]]">
 					<i class="fa fa-star"></i>
 				</a>
diff --git a/src/views/admin/partials/groups/privileges-select-category.tpl b/src/views/admin/partials/groups/privileges-select-category.tpl
index 257187d499..76f3578cb4 100644
--- a/src/views/admin/partials/groups/privileges-select-category.tpl
+++ b/src/views/admin/partials/groups/privileges-select-category.tpl
@@ -14,7 +14,7 @@
 			<a class="dropdown-item" role="menuitem">{categories.level}
 				<span component="category-markup">
 					<div class="category-item d-inline-block">
-						<div role="presentation" class="icon pull-left" style="{function.generateCategoryBackground}">
+						<div role="presentation" class="icon float-start" style="{function.generateCategoryBackground}">
 							<i class="fa fa-fw {./icon}"></i>
 						</div>
 						{./name}
diff --git a/src/views/admin/settings/navigation.tpl b/src/views/admin/settings/navigation.tpl
index 99e0114b78..cf276b40fe 100644
--- a/src/views/admin/settings/navigation.tpl
+++ b/src/views/admin/settings/navigation.tpl
@@ -19,7 +19,7 @@
 			<li data-index="{enabled.index}" class="card card-body text-bg-light border-0 <!-- IF !enabled.selected -->hidden<!-- ENDIF !enabled.selected -->">
 				<form>
 					<div class="row">
-						<div class="col-sm-12 text-end">
+						<div class="col-sm-12 text-end mb-3">
 							{{{ if enabled.enabled }}}
 							<button class="btn btn-warning toggle">[[admin/settings/navigation:btn.disable]]</button>
 							{{{ else }}}
@@ -114,7 +114,7 @@
 			<div class="card-body">
 				<ul id="available">
 					<li data-id="custom" class="clearfix">
-						<div data-id="custom" class="drag-item alert alert-success pull-left">
+						<div data-id="custom" class="drag-item alert alert-success float-start">
 							<i class="fa fa-fw fa-plus-circle"></i>
 						</div>
 						<p>
@@ -123,7 +123,7 @@
 					</li>
 					{{{ each available }}}
 					<li data-id="{@index}" class="clearfix">
-						<div data-id="{@index}" class="drag-item alert <!-- IF available.core -->alert-warning<!-- ELSE -->alert-info<!-- ENDIF available.core --> pull-left">
+						<div data-id="{@index}" class="drag-item alert <!-- IF available.core -->alert-warning<!-- ELSE -->alert-info<!-- ENDIF available.core --> float-start">
 							<i class="fa fa-fw <!-- IF available.iconClass -->{available.iconClass}<!-- ELSE -->fa-navicon<!-- ENDIF available.iconClass -->"></i>
 						</div>
 						<p>
diff --git a/src/views/partials/topic/post-preview.tpl b/src/views/partials/topic/post-preview.tpl
index 666313112c..4240d6e944 100644
--- a/src/views/partials/topic/post-preview.tpl
+++ b/src/views/partials/topic/post-preview.tpl
@@ -1,11 +1,11 @@
-<div id="post-tooltip" class="well" style="position:absolute; z-index: 1;">
+<div id="post-tooltip" class="card card-body shadow text-bg-light" style="position:absolute; z-index: 1;">
     <div class="clearfix">
-        <div class="icon pull-left">
+        <div class="icon float-start">
             <a href="{{{ if post.user.userslug }}}{config.relative_path}/user/{post.user.userslug}{{{ else }}}#{{{ end }}}">
                 {buildAvatar(post.user, "sm", true, "", "user/picture")} {post.user.username}
             </a>
         </div>
-        <small class="pull-right">
+        <small class="float-end">
             <span class="timeago" title="{post.timestampISO}"></span>
         </small>
     </div>
diff --git a/test/template-helpers.js b/test/template-helpers.js
index b89b726fd2..a366537c10 100644
--- a/test/template-helpers.js
+++ b/test/template-helpers.js
@@ -102,7 +102,7 @@ describe('helpers', () => {
 			],
 		};
 		const html = helpers.generateChildrenCategories(category);
-		assert.equal(html, `<span class="category-children"><span class="category-children-item pull-left"><div role="presentation" class="icon pull-left" style="background-color: #ff0000; color: #00ff00;"><i class="fa fa-fw undefined"></i></div><a href="${nconf.get('relative_path')}/category/undefined"><small>children</small></a></span></span>`);
+		assert.equal(html, `<span class="category-children"><span class="category-children-item float-start"><div role="presentation" class="icon float-start" style="background-color: #ff0000; color: #00ff00;"><i class="fa fa-fw undefined"></i></div><a href="${nconf.get('relative_path')}/category/undefined"><small>children</small></a></span></span>`);
 		done();
 	});