diff --git a/public/scss/admin/admin.scss b/public/scss/admin/admin.scss
index 05df1f8df5..65f9c0d677 100644
--- a/public/scss/admin/admin.scss
+++ b/public/scss/admin/admin.scss
@@ -11,7 +11,7 @@
 @import "./manage/privileges";
 @import "./manage/tags";
 @import "./manage/groups";
-// @import "./appearance/customise";
+@import "./appearance/customise";
 // @import "./appearance/themes";
 // @import "./extend/plugins";
 // @import "./extend/rewards";
@@ -27,9 +27,9 @@
 // @import "../flags";
 
 @import "./modules/alerts";
-// @import "./modules/selectable";
-// @import "./modules/nprogress";
-// @import "./modules/search";
+@import "./modules/selectable";
+@import "./modules/nprogress";
+@import "./modules/search";
 
 body {
 	overflow-y: scroll;
diff --git a/public/scss/admin/appearance/customise.scss b/public/scss/admin/appearance/customise.scss
new file mode 100644
index 0000000000..ee4e4b0dd4
--- /dev/null
+++ b/public/scss/admin/appearance/customise.scss
@@ -0,0 +1,9 @@
+#customCSS, #customJS, #customHTML, #email-editor {
+	width: 100%;
+	height: 450px;
+	display: block;
+}
+// ACP text colour when searching through custom CSS or JS.
+.ace_search_field {
+ color: #000 !important;
+}
\ No newline at end of file
diff --git a/public/scss/admin/header.scss b/public/scss/admin/header.scss
index 7aa0c9a212..b0cbae638b 100644
--- a/public/scss/admin/header.scss
+++ b/public/scss/admin/header.scss
@@ -75,10 +75,8 @@
 			padding: 10px 20px;
 			width: 250px;
 			height: 44px;
-			background-color: rgba(0, 0, 0, 0.2);
 			border-radius: 3px;
 			box-shadow: none;
-			// @include transition(.4s ease background-color);
 			transition: .4s ease background-color;
 
 			&:focus {
diff --git a/public/scss/admin/modules/nprogress.scss b/public/scss/admin/modules/nprogress.scss
new file mode 100644
index 0000000000..4584a127d7
--- /dev/null
+++ b/public/scss/admin/modules/nprogress.scss
@@ -0,0 +1,80 @@
+#nprogress {
+	pointer-events: none;
+  }
+
+  #nprogress .bar {
+	background: #29d;
+
+	position: fixed;
+	z-index: 1031;
+	top: 0;
+	left: 0;
+
+	width: 100%;
+	height: 2px;
+  }
+
+  #nprogress .peg {
+	display: block;
+	position: absolute;
+	right: 0px;
+	width: 100px;
+	height: 100%;
+	box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+	opacity: 1.0;
+
+	-webkit-transform: rotate(3deg) translate(0px, -4px);
+		-ms-transform: rotate(3deg) translate(0px, -4px);
+			transform: rotate(3deg) translate(0px, -4px);
+  }
+
+  #nprogress .spinner {
+	display: block;
+	position: fixed;
+	z-index: 1031;
+	top: 165px;
+	right: 35px;
+  }
+
+  @include media-breakpoint-down(sm) {
+	#nprogress .spinner {
+	  bottom: 15px;
+	  right: 15px;
+	  top: initial;
+	}
+  }
+
+
+  #nprogress .spinner-icon {
+	width: 18px;
+	height: 18px;
+	box-sizing: border-box;
+
+	border: solid 2px transparent;
+	border-top-color: #29d;
+	border-left-color: #29d;
+	border-radius: 50%;
+
+	-webkit-animation: nprogress-spinner 400ms linear infinite;
+			animation: nprogress-spinner 400ms linear infinite;
+  }
+
+  .nprogress-custom-parent {
+	overflow: hidden;
+	position: relative;
+  }
+
+  .nprogress-custom-parent #nprogress .spinner,
+  .nprogress-custom-parent #nprogress .bar {
+	position: absolute;
+  }
+
+  @-webkit-keyframes nprogress-spinner {
+	0%   { -webkit-transform: rotate(0deg); }
+	100% { -webkit-transform: rotate(360deg); }
+  }
+  @keyframes nprogress-spinner {
+	0%   { transform: rotate(0deg); }
+	100% { transform: rotate(360deg); }
+  }
+
diff --git a/public/scss/admin/modules/search.scss b/public/scss/admin/modules/search.scss
new file mode 100644
index 0000000000..57b8d8613e
--- /dev/null
+++ b/public/scss/admin/modules/search.scss
@@ -0,0 +1,45 @@
+#acp-search {
+    .dropdown-menu {
+        max-height: 75vh;
+        overflow-y: auto;
+
+        > li > a {
+            // &.focus {
+            //     &:extend(.dropdown-menu>li>a:focus);
+            // }
+            &:focus {
+                outline: none;
+            }
+        }
+    }
+
+    .state-start-typing {
+        .keep-typing, .search-forum, .no-results {
+            display: none;
+        }
+    }
+
+    .state-keep-typing {
+        .start-typing, .search-forum, .no-results {
+            display: none;
+        }
+    }
+
+    .state-no-results {
+        .keep-typing, .start-typing {
+            display: none;
+        }
+    }
+
+    .state-yes-results {
+        .keep-typing, .start-typing, .no-results {
+            display: none;
+        }
+    }
+
+    .search-disabled {
+        .search-forum {
+            display: none;
+        }
+    }
+}
\ No newline at end of file
diff --git a/public/scss/admin/modules/selectable.scss b/public/scss/admin/modules/selectable.scss
new file mode 100644
index 0000000000..938a459932
--- /dev/null
+++ b/public/scss/admin/modules/selectable.scss
@@ -0,0 +1,23 @@
+.selectable {
+	user-select: none;
+	position: relative;
+
+	.selector {
+		position: absolute;
+		border: 1px solid #89B;
+		background: #BCE;
+		background-color: #BEC;
+		border-color: #8B9;
+		z-index: 999;
+	}
+
+	.selection {
+		border: 1px solid transparent;
+		margin: 2px;
+
+		&.selected, &.active {
+			background-color: #ECF1DB;
+			border: 1px dashed #9B8;
+		}
+	}
+}
\ No newline at end of file
diff --git a/public/src/admin/modules/search.js b/public/src/admin/modules/search.js
index ddf0eedaf7..16fe21a26d 100644
--- a/public/src/admin/modules/search.js
+++ b/public/src/admin/modules/search.js
@@ -33,7 +33,7 @@ define('admin/modules/search', ['mousetrap', 'alerts'], function (mousetrap, ale
 			);
 
 			return '<li role="presentation" class="result">' +
-				'<a role= "menuitem" href= "' + config.relative_path + '/' + namespace + '" >' +
+				'<a class="dropdown-item" role="menuitem" href= "' + config.relative_path + '/' + namespace + '" >' +
 					title +
 					'<br>' + (!results ? '' :
 				('<small><code>' +
diff --git a/src/views/admin/partials/menu.tpl b/src/views/admin/partials/menu.tpl
index eff7cfd352..c5f0202aca 100644
--- a/src/views/admin/partials/menu.tpl
+++ b/src/views/admin/partials/menu.tpl
@@ -141,7 +141,7 @@
 				<div id="acp-search" >
 					<div class="dropdown" data-text="[[admin/menu:search.placeholder]]">
 						<input type="text" data-bs-toggle="dropdown" class="form-control">
-						<ul class="dropdown-menu dropdown-menu-right state-start-typing" role="menu">
+						<ul class="dropdown-menu dropdown-menu-end state-start-typing" role="menu">
 							<li role="presentation" class="no-results">
 								<a class="dropdown-item">[[admin/menu:search.no-results]]</a>
 							</li>
diff --git a/src/views/admin/settings/email.tpl b/src/views/admin/settings/email.tpl
index d4ef6a52a7..5b99ac4a14 100644
--- a/src/views/admin/settings/email.tpl
+++ b/src/views/admin/settings/email.tpl
@@ -1,57 +1,57 @@
 <!-- IMPORT admin/partials/settings/header.tpl -->
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/email:email-settings]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/email:email-settings]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="form-group">
-				<label for="email:from"><strong>[[admin/settings/email:address]]</strong></label>
-				<p class="help-block">
+			<div class="mb-3">
+				<label class="form-label" for="email:from">[[admin/settings/email:address]]</label>
+				<p class="form-text">
 					[[admin/settings/email:address-help]]
 				</p>
-				<input type="text" class="form-control input-lg" id="email:from" data-field="email:from" placeholder="info@example.org" /><br />
+				<input type="text" class="form-control input-lg" id="email:from" data-field="email:from" placeholder="info@example.org" />
 			</div>
 
-			<div class="form-group">
-				<label for="email:from_name"><strong>From Name</strong></label>
-				<p class="help-block">
+			<div class="mb-3">
+				<label class="form-label" for="email:from_name">[[admin/settings/email:from]]</label>
+				<p class="form-text">
 					[[admin/settings/email:from-help]]
 				</p>
-				<input type="text" class="form-control input-lg" id="email:from_name" data-field="email:from_name" placeholder="NodeBB" /><br />
+				<input type="text" class="form-control input-lg" id="email:from_name" data-field="email:from_name" placeholder="NodeBB" />
 			</div>
 
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label for="requireEmailAddress" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" id="requireEmailAddress" data-field="requireEmailAddress" name="requireEmailAddress" />
 					<span class="mdl-switch__label">[[admin/settings/email:require-email-address]]</span>
 				</label>
 			</div>
-			<p class="help-block">[[admin/settings/email:require-email-address-warning]]</p>
+			<p class="form-text">[[admin/settings/email:require-email-address-warning]]</p>
 
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label for="sendValidationEmail" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" id="sendValidationEmail" data-field="sendValidationEmail" name="sendValidationEmail" />
 					<span class="mdl-switch__label">[[admin/settings/email:send-validation-email]]</span>
 				</label>
 			</div>
 
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label for="includeUnverifiedEmails" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" id="includeUnverifiedEmails" data-field="includeUnverifiedEmails" name="includeUnverifiedEmails" />
 					<span class="mdl-switch__label">[[admin/settings/email:include-unverified-emails]]</span>
 				</label>
 			</div>
-			<p class="help-block">[[admin/settings/email:include-unverified-warning]]</p>
+			<p class="form-text">[[admin/settings/email:include-unverified-warning]]</p>
 
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label for="emailPrompt" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" id="emailPrompt" data-field="emailPrompt" name="emailPrompt" />
 					<span class="mdl-switch__label">[[admin/settings/email:prompt]]</span>
 				</label>
 			</div>
-			<p class="help-block">[[admin/settings/email:prompt-help]]</p>
+			<p class="form-text">[[admin/settings/email:prompt-help]]</p>
 
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label for="sendEmailToBanned" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" id="sendEmailToBanned" data-field="sendEmailToBanned" name="sendEmailToBanned" />
 					<span class="mdl-switch__label">[[admin/settings/email:sendEmailToBanned]]</span>
@@ -68,21 +68,21 @@
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/email:subscriptions]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/email:subscriptions]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label for="disableEmailSubscriptions" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" id="disableEmailSubscriptions" data-field="disableEmailSubscriptions" name="disableEmailSubscriptions" />
 					<span class="mdl-switch__label">[[admin/settings/email:subscriptions.disable]]</span>
 				</label>
 			</div>
 
-			<div class="form-group">
-				<label for="digestHour"><strong>[[admin/settings/email:subscriptions.hour]]</strong></label>
+			<div class="mb-3">
+				<label class="form-label" for="digestHour">[[admin/settings/email:subscriptions.hour]]</label>
 				<input type="number" class="form-control input-lg" id="digestHour" data-field="digestHour" placeholder="17" min="0" max="24" />
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/email:subscriptions.hour-help]]
 				</p>
 			</div>
@@ -90,35 +90,33 @@
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/email:smtp-transport]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/email:smtp-transport]]</div>
+	<div class="col-sm-10 col-12">
 		<div class="alert alert-warning">
-			<p>
-				[[admin/settings/email:smtp-transport-help]]
-			</p>
+			[[admin/settings/email:smtp-transport-help]]
 		</div>
 		<form>
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label for="email:smtpTransport:enabled" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" id="email:smtpTransport:enabled" data-field="email:smtpTransport:enabled" name="email:smtpTransport:enabled" />
 					<span class="mdl-switch__label">[[admin/settings/email:smtp-transport.enabled]]</span>
 				</label>
 			</div>
-			<div class="form-group">
+			<div class="mb-3">
 				<div class="checkbox">
 					<label for="email:smtpTransport:pool" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 						<input class="mdl-switch__input" type="checkbox" id="email:smtpTransport:pool" data-field="email:smtpTransport:pool" name="email:smtpTransport:pool" />
 						<span class="mdl-switch__label">[[admin/settings/email:smtp-transport.pool]]</span>
 					</label>
 				</div>
-				<p class="col-xs-12 help-block">
+				<p class="form-text">
 					[[admin/settings/email:smtp-transport.pool-help]]
 				</p>
 			</div>
-			<div class="form-group">
-				<label for="email:smtpTransport:service"><strong>[[admin/settings/email:smtp-transport.service]]</strong></label>
-				<select class="form-control input-lg" id="email:smtpTransport:service" data-field="email:smtpTransport:service">
+			<div class="mb-3">
+				<label class="form-label" for="email:smtpTransport:service">[[admin/settings/email:smtp-transport.service]]</label>
+				<select class="form-select" id="email:smtpTransport:service" data-field="email:smtpTransport:service">
 					<option value="nodebb-custom-smtp" style="font-weight: bold">[[admin/settings/email:smtp-transport.service-custom]]</option>
 					<option style="font-size: 10px" disabled>&nbsp;</option>
 
@@ -126,7 +124,7 @@
 					<option value="{@value}">{@value}</option>
 					{{{ end }}}
 				</select>
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/email:smtp-transport.service-help]]
 					<br>
 					[[admin/settings/email:smtp-transport.gmail-warning1]]
@@ -134,67 +132,75 @@
 					[[admin/settings/email:smtp-transport.gmail-warning2]]
 				</p>
 			</div>
-			<div class="form-group well" id="email:smtpTransport:custom-service" style="display: none">
+			<div class="mb-3 card card-body text-bg-light border-0" id="email:smtpTransport:custom-service" style="display: none">
 				<h5>Custom Service</h5>
+				<div class="mb-3">
+					<label class="form-label" for="email:smtpTransport:host">[[admin/settings/email:smtp-transport.host]]</label>
+					<input type="text" class="form-control input-md" id="email:smtpTransport:host" data-field="email:smtpTransport:host" placeholder="smtp.example.org">
+				</div>
 
-				<label for="email:smtpTransport:host">[[admin/settings/email:smtp-transport.host]]</label>
-				<input type="text" class="form-control input-md" id="email:smtpTransport:host" data-field="email:smtpTransport:host" placeholder="smtp.example.org">
+				<div class="mb-3">
+					<label class="form-label" for="email:smtpTransport:port">[[admin/settings/email:smtp-transport.port]]</label>
+					<input type="text" class="form-control input-md" id="email:smtpTransport:port" data-field="email:smtpTransport:port" placeholder="5555">
+				</div>
 
-				<label for="email:smtpTransport:port">[[admin/settings/email:smtp-transport.port]]</label>
-				<input type="text" class="form-control input-md" id="email:smtpTransport:port" data-field="email:smtpTransport:port" placeholder="5555">
-
-				<label for="email:smtpTransport:security">[[admin/settings/email:smtp-transport.security]]</label>
-				<select class="form-control" id="email:smtpTransport:security" data-field="email:smtpTransport:security">
-					<option value="ENCRYPTED">[[admin/settings/email:smtp-transport.security-encrypted]]</option>
-					<option value="STARTTLS">[[admin/settings/email:smtp-transport.security-starttls]]</option>
-					<option value="NONE">[[admin/settings/email:smtp-transport.security-none]]</option>
-				</select>
+				<div>
+					<label class="form-label" for="email:smtpTransport:security">[[admin/settings/email:smtp-transport.security]]</label>
+					<select class="form-select" id="email:smtpTransport:security" data-field="email:smtpTransport:security">
+						<option value="ENCRYPTED">[[admin/settings/email:smtp-transport.security-encrypted]]</option>
+						<option value="STARTTLS">[[admin/settings/email:smtp-transport.security-starttls]]</option>
+						<option value="NONE">[[admin/settings/email:smtp-transport.security-none]]</option>
+					</select>
+				</div>
 			</div>
-			<div class="form-group">
-				<label for="email:smtpTransport:user"><strong>[[admin/settings/email:smtp-transport.username]]</strong></label>
+			<div class="mb-3">
+				<label class="form-label" for="email:smtpTransport:user">[[admin/settings/email:smtp-transport.username]]</label>
 				<input id="email:smtpTransport:user" type="text" class="form-control input-lg" data-field="email:smtpTransport:user" placeholder="admin@example.org" autocomplete="off" />
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/email:smtp-transport.username-help]]
 				</p>
 			</div>
-			<div class="form-group">
-				<label for="email:smtpTransport:pass"><strong>[[admin/settings/email:smtp-transport.password]]</strong></label>
+			<div>
+				<label class="form-label" for="email:smtpTransport:pass">[[admin/settings/email:smtp-transport.password]]</label>
 				<input id="email:smtpTransport:pass" type="password" class="form-control input-lg" data-field="email:smtpTransport:pass" autocomplete="off" />
 			</div>
 		</form>
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/email:template]]</div>
-	<div class="col-sm-10 col-xs-12">
-		<label for="email-editor-selector">[[admin/settings/email:template.select]]</label><br />
-		<select id="email-editor-selector" class="form-control">
-			<!-- BEGIN emails -->
-			<option value="{emails.path}">{emails.path}</option>
-			<!-- END emails -->
-		</select>
-		<br />
-		<div id="email-editor"></div>
-		<input type="hidden" id="email-editor-holder" value="" data-field="" />
-		<br />
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/email:template]]</div>
+	<div class="col-sm-10 col-12">
+		<div class="mb-3">
+			<label class="form-label" for="email-editor-selector">[[admin/settings/email:template.select]]</label>
+			<select id="email-editor-selector" class="form-select">
+				<!-- BEGIN emails -->
+				<option value="{emails.path}">{emails.path}</option>
+				<!-- END emails -->
+			</select>
+		</div>
+		<div class="mb-3">
+			<div id="email-editor"></div>
+			<input type="hidden" id="email-editor-holder" value="" data-field="" />
+		</div>
+
 		<button class="btn btn-warning" type="button" data-action="email.revert">[[admin/settings/email:template.revert]]</button>
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/email:testing]]</div>
-	<div class="col-sm-10 col-xs-12">
-		<div class="form-group">
-			<label for="test-email">[[admin/settings/email:testing.select]]</label>
-			<select id="test-email" class="form-control">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/email:testing]]</div>
+	<div class="col-sm-10 col-12">
+		<div class="mb-3">
+			<label class="form-label" for="test-email">[[admin/settings/email:testing.select]]</label>
+			<select id="test-email" class="form-select">
 				<!-- BEGIN sendable -->
 				<option value="{@value}">{@value}</option>
 				<!-- END sendable -->
 			</select>
 		</div>
 		<button class="btn btn-primary" type="button" data-action="email.test">[[admin/settings/email:testing.send]]</button>
-		<p class="help-block">
+		<p class="form-text">
 			[[admin/settings/email:testing.send-help]]
 		</p>
 	</div>
diff --git a/src/views/admin/settings/post.tpl b/src/views/admin/settings/post.tpl
index 8e8d2e76bc..2129e920e2 100644
--- a/src/views/admin/settings/post.tpl
+++ b/src/views/admin/settings/post.tpl
@@ -1,20 +1,20 @@
 <!-- IMPORT admin/partials/settings/header.tpl -->
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/post:sorting]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/post:sorting]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="form-group">
-				<label for="topicPostSort">[[admin/settings/post:sorting.post-default]]</label>
-				<select id="topicPostSort" class="form-control" data-field="topicPostSort">
+			<div class="mb-3">
+				<label class="form-label" for="topicPostSort">[[admin/settings/post:sorting.post-default]]</label>
+				<select id="topicPostSort" class="form-select" data-field="topicPostSort">
 					<option value="oldest_to_newest">[[admin/settings/post:sorting.oldest-to-newest]]</option>
 					<option value="newest_to_oldest">[[admin/settings/post:sorting.newest-to-oldest]]</option>
 					<option value="most_votes">[[admin/settings/post:sorting.most-votes]]</option>
 				</select>
 			</div>
-			<div class="form-group">
-				<label for="categoryTopicSort">[[admin/settings/post:sorting.topic-default]]</label>
-				<select id="categoryTopicSort" class="form-control" data-field="categoryTopicSort">
+			<div class="mb-3">
+				<label class="form-label" for="categoryTopicSort">[[admin/settings/post:sorting.topic-default]]</label>
+				<select id="categoryTopicSort" class="form-select" data-field="categoryTopicSort">
 					<option value="oldest_to_newest">[[admin/settings/post:sorting.oldest-to-newest]]</option>
 					<option value="newest_to_oldest">[[admin/settings/post:sorting.newest-to-oldest]]</option>
 					<option value="most_posts">[[admin/settings/post:sorting.most-posts]]</option>
@@ -24,28 +24,28 @@
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/post:length]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/post:length]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
 			<div class="row">
-				<div class="col-xs-6">
-					<div class="form-group">
-						<label for="minimumTitleLength">[[admin/settings/post:restrictions.min-title-length]]</label>
+				<div class="col-6">
+					<div class="mb-3">
+						<label class="form-label" for="minimumTitleLength">[[admin/settings/post:restrictions.min-title-length]]</label>
 						<input id="minimumTitleLength" type="text" class="form-control" value="3" data-field="minimumTitleLength">
 					</div>
-					<div class="form-group">
-						<label for="maximumTitleLength">[[admin/settings/post:restrictions.max-title-length]]</label>
+					<div class="mb-3">
+						<label class="form-label" for="maximumTitleLength">[[admin/settings/post:restrictions.max-title-length]]</label>
 						<input id="maximumTitleLength" type="text" class="form-control" value="255" data-field="maximumTitleLength">
 					</div>
 				</div>
-				<div class="col-xs-6">
-					<div class="form-group">
-						<label for="minimumPostLength">[[admin/settings/post:restrictions.min-post-length]]</label>
+				<div class="col-6">
+					<div class="mb-3">
+						<label class="form-label" for="minimumPostLength">[[admin/settings/post:restrictions.min-post-length]]</label>
 						<input id="minimumPostLength" type="text" class="form-control" value="8" data-field="minimumPostLength">
 					</div>
-					<div class="form-group">
-						<label for="maximumPostLength">[[admin/settings/post:restrictions.max-post-length]]</label>
+					<div class="mb-3">
+						<label class="form-label" for="maximumPostLength">[[admin/settings/post:restrictions.max-post-length]]</label>
 						<input id="maximumPostLength" type="text" class="form-control" value="32767" data-field="maximumPostLength">
 					</div>
 				</div>
@@ -54,31 +54,31 @@
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/post:restrictions]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/post:restrictions]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="form-group">
-				<label for="postDelay">[[admin/settings/post:restrictions.seconds-between]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="postDelay">[[admin/settings/post:restrictions.seconds-between]]</label>
 				<input id="postDelay" type="text" class="form-control" value="10" data-field="postDelay">
 			</div>
-			<div class="form-group">
-				<label for="postEditDuration">[[admin/settings/post:restrictions.seconds-edit-after]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="postEditDuration">[[admin/settings/post:restrictions.seconds-edit-after]]</label>
 				<input id="postEditDuration" type="text" class="form-control" value="0" data-field="postEditDuration">
 			</div>
-			<div class="form-group">
-				<label for="postDeleteDuration">[[admin/settings/post:restrictions.seconds-delete-after]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="postDeleteDuration">[[admin/settings/post:restrictions.seconds-delete-after]]</label>
 				<input id="postDeleteDuration" type="text" class="form-control" value="0" data-field="postDeleteDuration">
 			</div>
-			<div class="form-group">
-				<label for="preventTopicDeleteAfterReplies">[[admin/settings/post:restrictions.replies-no-delete]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="preventTopicDeleteAfterReplies">[[admin/settings/post:restrictions.replies-no-delete]]</label>
 				<input id="preventTopicDeleteAfterReplies" type="text" class="form-control" value="0" data-field="preventTopicDeleteAfterReplies">
 			</div>
 
-			<div class="form-group">
-				<label for="topicStaleDays">[[admin/settings/post:restrictions.days-until-stale]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="topicStaleDays">[[admin/settings/post:restrictions.days-until-stale]]</label>
 				<input id="topicStaleDays" type="text" class="form-control" value="60" data-field="topicStaleDays">
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/post:restrictions.stale-help]]
 				</p>
 			</div>
@@ -86,62 +86,62 @@
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/post:restrictions-new]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/post:restrictions-new]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="form-group">
-				<label for="newbiePostDelayThreshold">[[admin/settings/post:restrictions.rep-threshold]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="newbiePostDelayThreshold">[[admin/settings/post:restrictions.rep-threshold]]</label>
 				<input id="newbiePostDelayThreshold" type="text" class="form-control" value="3" data-field="newbiePostDelayThreshold">
 			</div>
 
-			<div class="form-group">
-				<label for="newbiePostDelay">[[admin/settings/post:restrictions.seconds-between-new]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="newbiePostDelay">[[admin/settings/post:restrictions.seconds-between-new]]</label>
 				<input id="newbiePostDelay" type="text" class="form-control" value="120" data-field="newbiePostDelay">
 			</div>
 
-			<div class="form-group">
-				<label for="initialPostDelay">[[admin/settings/post:restrictions.seconds-before-new]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="initialPostDelay">[[admin/settings/post:restrictions.seconds-before-new]]</label>
 				<input id="initialPostDelay" type="text" class="form-control" value="10" data-field="initialPostDelay">
 			</div>
 
-			<div class="form-group">
-				<label for="newbiePostEditDuration">[[admin/settings/post:restrictions.seconds-edit-after]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="newbiePostEditDuration">[[admin/settings/post:restrictions.seconds-edit-after]]</label>
 				<input id="newbiePostEditDuration" type="text" class="form-control" value="120" data-field="newbiePostEditDuration">
 			</div>
 		</form>
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/post:post-queue]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/post:post-queue]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
 			<div class="row">
 				<div class="col-sm-6">
-					<div class="form-group">
+					<div class="mb-3">
 						<div class="checkbox">
 							<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 								<input class="mdl-switch__input" type="checkbox" data-field="postQueue">
 								<span class="mdl-switch__label"><strong>[[admin/settings/post:restrictions.post-queue]]</strong></span>
 							</label>
 						</div>
-						<p class="help-block">
+						<p class="form-text">
 							[[admin/settings/post:restrictions.post-queue-help]]
 						</p>
 					</div>
 				</div>
 				<div class="col-sm-6">
-					<div class="form-group">
-						<label for="postQueueReputationThreshold">[[admin/settings/post:restrictions.post-queue-rep-threshold]]</label>
+					<div class="mb-3">
+						<label class="form-label" for="postQueueReputationThreshold">[[admin/settings/post:restrictions.post-queue-rep-threshold]]</label>
 						<input id="postQueueReputationThreshold" type="text" class="form-control" value="0" data-field="postQueueReputationThreshold">
 					</div>
 				</div>
 			</div>
 			<div class="row">
-				<div class="form-group">
-					<label for="groupsExemptFromPostQueue">[[admin/settings/post:restrictions.groups-exempt-from-post-queue]]</label>
-					<select id="groupsExemptFromPostQueue" class="form-control" multiple data-field="groupsExemptFromPostQueue">
+				<div class="mb-3">
+					<label class="form-label" for="groupsExemptFromPostQueue">[[admin/settings/post:restrictions.groups-exempt-from-post-queue]]</label>
+					<select id="groupsExemptFromPostQueue" class="form-select" multiple data-field="groupsExemptFromPostQueue">
 						<!-- BEGIN groupsExemptFromPostQueue -->
 						<option value="{groupsExemptFromPostQueue.displayName}">{groupsExemptFromPostQueue.displayName}</option>
 						<!-- END -->
@@ -152,28 +152,28 @@
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/post:timestamp]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/post:timestamp]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="form-group">
-				<label for="timeagoCutoff">[[admin/settings/post:timestamp.cut-off]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="timeagoCutoff">[[admin/settings/post:timestamp.cut-off]]</label>
 				<input type="number" class="form-control" id="timeagoCutoff" data-field="timeagoCutoff"  />
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/post:timestamp.cut-off-help]]
 				</p>
 			</div>
-			<div class="form-group">
-				<label for="necroThreshold">[[admin/settings/post:timestamp.necro-threshold]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="necroThreshold">[[admin/settings/post:timestamp.necro-threshold]]</label>
 				<input type="number" class="form-control" id="necroThreshold" data-field="necroThreshold"  />
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/post:timestamp.necro-threshold-help]]
 				</p>
 			</div>
-			<div class="form-group">
-				<label for="incrementTopicViewsInterval">[[admin/settings/post:timestamp.topic-views-interval]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="incrementTopicViewsInterval">[[admin/settings/post:timestamp.topic-views-interval]]</label>
 				<input type="number" class="form-control" id="incrementTopicViewsInterval" data-field="incrementTopicViewsInterval"  />
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/post:timestamp.topic-views-interval-help]]
 				</p>
 			</div>
@@ -181,13 +181,13 @@
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">Teaser</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">Teaser</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="form-group">
-				<label for="teaserPost">[[admin/settings/post:teaser]]</label>
-				<select id="teaserPost" class="form-control" data-field="teaserPost">
+			<div class="mb-3">
+				<label class="form-label" for="teaserPost">[[admin/settings/post:teaser]]</label>
+				<select id="teaserPost" class="form-select" data-field="teaserPost">
 					<option value="last-post">[[admin/settings/post:teaser.last-post]]</option>
 					<option value="last-reply">[[admin/settings/post:teaser.last-reply]]</option>
 					<option value="first">[[admin/settings/post:teaser.first]]</option>
@@ -203,28 +203,28 @@
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/post:unread]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/post:unread]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="form-group">
-				<label for="unreadCutoff">[[admin/settings/post:unread.cutoff]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="unreadCutoff">[[admin/settings/post:unread.cutoff]]</label>
 				<input id="unreadCutoff" type="text" class="form-control" value="2" data-field="unreadCutoff">
 			</div>
-			<div class="form-group">
-				<label for="bookmarkthreshold">[[admin/settings/post:unread.min-track-last]]</label>
+			<div>
+				<label class="form-label" for="bookmarkthreshold">[[admin/settings/post:unread.min-track-last]]</label>
 				<input id="bookmarkthreshold" type="text" class="form-control" value="5" data-field="bookmarkThreshold">
 			</div>
 		</form>
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/post:recent]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/post:recent]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="form-group">
-				<label for="recentMaxTopics">[[admin/settings/post:recent.max-topics]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="recentMaxTopics">[[admin/settings/post:recent.max-topics]]</label>
 				<input id="recentMaxTopics" type="text" class="form-control" value="200" data-field="recentMaxTopics">
 			</div>
 			<div class="checkbox">
@@ -237,63 +237,63 @@
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/post:signature]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/post:signature]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" data-field="disableSignatures">
 					<span class="mdl-switch__label"><strong>[[admin/settings/post:signature.disable]]</strong></span>
 				</label>
 			</div>
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" data-field="signatures:disableLinks">
 					<span class="mdl-switch__label"><strong>[[admin/settings/post:signature.no-links]]</strong></span>
 				</label>
 			</div>
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" data-field="signatures:disableImages">
 					<span class="mdl-switch__label"><strong>[[admin/settings/post:signature.no-images]]</strong></span>
 				</label>
 			</div>
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" data-field="signatures:hideDuplicates">
 					<span class="mdl-switch__label"><strong>[[admin/settings/post:signature.hide-duplicates]]</strong></span>
 				</label>
 			</div>
-			<div class="form-group">
-				<label for="maximumSignatureLength">[[admin/settings/post:signature.max-length]]</label>
+			<div>
+				<label class="form-label" for="maximumSignatureLength">[[admin/settings/post:signature.max-length]]</label>
 				<input id="maximumSignatureLength" type="text" class="form-control" value="255" data-field="maximumSignatureLength">
 			</div>
 		</form>
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/post:composer]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/post:composer]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
 			<p>
 				[[admin/settings/post:composer-help]]
 			</p>
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="composer:showHelpTab">
 					<input class="mdl-switch__input" type="checkbox" id="composer:showHelpTab" data-field="composer:showHelpTab" checked />
 					<span class="mdl-switch__label">[[admin/settings/post:composer.show-help]]</span>
 				</label>
 			</div>
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="composer:allowPluginHelp">
 					<input class="mdl-switch__input" type="checkbox" id="composer:allowPluginHelp" data-field="composer:allowPluginHelp" checked />
 					<span class="mdl-switch__label">[[admin/settings/post:composer.enable-plugin-help]]</span>
 				</label>
 			</div>
-			<div class="form-group">
-				<label for="composer:customHelpText">[[admin/settings/post:composer.custom-help]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="composer:customHelpText">[[admin/settings/post:composer.custom-help]]</label>
 				<textarea class="form-control" id="composer:customHelpText" data-field="composer:customHelpText" rows="5"></textarea>
 			</div>
 			<div class="checkbox">
@@ -306,24 +306,24 @@
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/post:backlinks]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/post:backlinks]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
 			<div class="checkbox">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" data-field="topicBacklinks">
 					<span class="mdl-switch__label"><strong>[[admin/settings/post:backlinks.enabled]]</strong></span>
-					<p class="help-block">[[admin/settings/post:backlinks.help]]</p>
+					<p class="form-text">[[admin/settings/post:backlinks.help]]</p>
 				</label>
 			</div>
 		</form>
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/post:ip-tracking]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/post:ip-tracking]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
 			<div class="checkbox">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
diff --git a/src/views/admin/settings/uploads.tpl b/src/views/admin/settings/uploads.tpl
index 820d6943dc..97a228ea8d 100644
--- a/src/views/admin/settings/uploads.tpl
+++ b/src/views/admin/settings/uploads.tpl
@@ -1,115 +1,115 @@
 <!-- IMPORT admin/partials/settings/header.tpl -->
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">
 		[[admin/settings/uploads:posts]]
 	</div>
-	<div class="col-sm-10 col-xs-12">
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" data-field="stripEXIFData">
 					<span class="mdl-switch__label"><strong>[[admin/settings/uploads:strip-exif-data]]</strong></span>
 				</label>
 			</div>
 
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" data-field="privateUploads">
 					<span class="mdl-switch__label"><strong>[[admin/settings/uploads:private]]</strong></span>
 				</label>
 			</div>
 
-			<div class="form-group">
-				<label for="privateUploadsExtensions">[[admin/settings/uploads:private-extensions]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="privateUploadsExtensions">[[admin/settings/uploads:private-extensions]]</label>
 				<input id="privateUploadsExtensions" type="text" class="form-control" value="" data-field="privateUploadsExtensions" placeholder="">
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/uploads:private-uploads-extensions-help]]
 				</p>
 			</div>
 
 			<div class="row">
-				<div class="col-xs-6">
-					<div class="form-group">
-						<label for="resizeImageWidthThreshold">[[admin/settings/uploads:resize-image-width-threshold]]</label>
+				<div class="col-6">
+					<div class="mb-3">
+						<label class="form-label" for="resizeImageWidthThreshold">[[admin/settings/uploads:resize-image-width-threshold]]</label>
 						<input id="resizeImageWidthThreshold" type="text" class="form-control" value="2000" data-field="resizeImageWidthThreshold" placeholder="2000">
-						<p class="help-block">
+						<p class="form-text">
 							[[admin/settings/uploads:resize-image-width-threshold-help]]
 						</p>
 					</div>
 				</div>
 
-				<div class="col-xs-6">
-					<div class="form-group">
-						<label for="resizeImageWidth">[[admin/settings/uploads:resize-image-width]]</label>
+				<div class="col-6">
+					<div class="mb-3">
+						<label class="form-label" for="resizeImageWidth">[[admin/settings/uploads:resize-image-width]]</label>
 						<input id="resizeImageWidth" type="text" class="form-control" value="760" data-field="resizeImageWidth" placeholder="760">
-						<p class="help-block">
+						<p class="form-text">
 							[[admin/settings/uploads:resize-image-width-help]]
 						</p>
 					</div>
 				</div>
 			</div>
 
-			<div class="form-group">
-				<label for="resizeImageQuality">[[admin/settings/uploads:resize-image-quality]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="resizeImageQuality">[[admin/settings/uploads:resize-image-quality]]</label>
 				<input id="resizeImageQuality" type="text" class="form-control" value="60" data-field="resizeImageQuality" placeholder="60">
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/uploads:resize-image-quality-help]]
 				</p>
 			</div>
 
-			<div class="form-group">
-				<label for="maximumFileSize">[[admin/settings/uploads:max-file-size]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="maximumFileSize">[[admin/settings/uploads:max-file-size]]</label>
 				<input id="maximumFileSize" type="text" class="form-control" value="2048" data-field="maximumFileSize">
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/uploads:max-file-size-help]]
 				</p>
 			</div>
 
-			<div class="form-group">
-				<label for="rejectImageWidth">[[admin/settings/uploads:reject-image-width]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="rejectImageWidth">[[admin/settings/uploads:reject-image-width]]</label>
 				<input id="rejectImageWidth" type="text" class="form-control" value="5000" data-field="rejectImageWidth" placeholder="5000">
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/uploads:reject-image-width-help]]
 				</p>
 			</div>
 
-			<div class="form-group">
-				<label for="rejectImageHeight">[[admin/settings/uploads:reject-image-height]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="rejectImageHeight">[[admin/settings/uploads:reject-image-height]]</label>
 				<input id="rejectImageHeight" type="text" class="form-control" value="5000" data-field="rejectImageHeight" placeholder="5000">
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/uploads:reject-image-height-help]]
 				</p>
 			</div>
 
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" data-field="allowTopicsThumbnail">
 					<span class="mdl-switch__label"><strong>[[admin/settings/uploads:allow-topic-thumbnails]]</strong></span>
 				</label>
 			</div>
 
-			<div class="form-group">
-				<label for="topicThumbSize">[[admin/settings/uploads:topic-thumb-size]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="topicThumbSize">[[admin/settings/uploads:topic-thumb-size]]</label>
 				<input id="topicThumbSize" type="text" class="form-control" value="120" data-field="topicThumbSize">
 			</div>
 
-			<div class="form-group">
-				<label for="allowedFileExtensions">[[admin/settings/uploads:allowed-file-extensions]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="allowedFileExtensions">[[admin/settings/uploads:allowed-file-extensions]]</label>
 				<input id="allowedFileExtensions" type="text" class="form-control" value="" data-field="allowedFileExtensions" data-field-type="tagsinput" />
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/uploads:allowed-file-extensions-help]]
 				</p>
 			</div>
 
-			<div class="form-group">
-				<label for="uploadRateLimitThreshold">[[admin/settings/uploads:upload-limit-threshold]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="uploadRateLimitThreshold">[[admin/settings/uploads:upload-limit-threshold]]</label>
 				<div id="uploadRateLimitThreshold" class="row">
-					<div class="col-xs-2">
+					<div class="col-2">
 						<input type="text" class="form-control" data-field="uploadRateLimitThreshold" />
 					</div>
-					<div class="col-xs-2">
-						<select class="form-control" data-field="uploadRateLimitCooldown">
+					<div class="col-3">
+						<select class="form-select" data-field="uploadRateLimitCooldown">
 							<option value="60">[[admin/settings/uploads:upload-limit-threshold-per-minute, 1]]</option>
 							<option value="300">[[admin/settings/uploads:upload-limit-threshold-per-minutes, 5]]</option>
 							<option value="900">[[admin/settings/uploads:upload-limit-threshold-per-minutes, 15]]</option>
@@ -122,12 +122,12 @@
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">
 		[[admin/settings/uploads:orphans]]
 	</div>
-	<div class="col-sm-10 col-xs-12">
-		<div class="checkbox">
+	<div class="col-sm-10 col-12">
+		<div class="checkbox mb-3">
 			<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 				<input class="mdl-switch__input" type="checkbox" data-field="preserveOrphanedUploads">
 				<span class="mdl-switch__label"><strong>[[admin/settings/uploads:preserve-orphaned-uploads]]</strong></span>
@@ -135,65 +135,63 @@
 		</div>
 
 		<div class="row">
-			<div class="form-group col-sm-6">
-				<label for="orphanExpiryDays">[[admin/settings/uploads:orphanExpiryDays]]</label>
+			<div class="mb-3 col-sm-6">
+				<label class="form-label" for="orphanExpiryDays">[[admin/settings/uploads:orphanExpiryDays]]</label>
 				<input id="orphanExpiryDays" type="number" min="0" placeholder="0" class="form-control" data-field="orphanExpiryDays" />
-				<p class="help-block">[[admin/settings/uploads:orphanExpiryDays-help]]</p>
+				<p class="form-text">[[admin/settings/uploads:orphanExpiryDays-help]]</p>
 			</div>
 		</div>
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">
 		[[admin/settings/uploads:profile-avatars]]
 	</div>
-	<div class="col-sm-10 col-xs-12">
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" data-field="allowProfileImageUploads">
 					<span class="mdl-switch__label"><strong>[[admin/settings/uploads:allow-profile-image-uploads]]</strong></span>
 				</label>
 			</div>
 
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input class="mdl-switch__input" type="checkbox" data-field="profile:convertProfileImageToPNG">
 					<span class="mdl-switch__label"><strong>[[admin/settings/uploads:convert-profile-image-png]]</strong></span>
 				</label>
 			</div>
 
-			<div class="form-group">
+			<div class="mb-3">
 				<label>[[admin/settings/uploads:default-avatar]]</label>
 				<div class="input-group">
 					<input id="defaultAvatar" type="text" class="form-control" placeholder="A custom image to use instead of user icons" data-field="defaultAvatar" />
-					<span class="input-group-btn">
-						<input data-action="upload" data-target="defaultAvatar" data-route="{config.relative_path}/api/admin/uploadDefaultAvatar" type="button" class="btn btn-default" value="[[admin/settings/uploads:upload]]" />
-					</span>
+					<input data-action="upload" data-target="defaultAvatar" data-route="{config.relative_path}/api/admin/uploadDefaultAvatar" type="button" class="btn btn-outline-secondary" value="[[admin/settings/uploads:upload]]" />
 				</div>
 			</div>
 
-			<div class="form-group">
-				<label for="profileImageDimension">[[admin/settings/uploads:profile-image-dimension]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="profileImageDimension">[[admin/settings/uploads:profile-image-dimension]]</label>
 				<input id="profileImageDimension" type="text" class="form-control" data-field="profileImageDimension" placeholder="200" />
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/uploads:profile-image-dimension-help]]
 				</p>
 			</div>
 
-			<div class="form-group">
-				<label for="maximumProfileImageSize">[[admin/settings/uploads:max-profile-image-size]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="maximumProfileImageSize">[[admin/settings/uploads:max-profile-image-size]]</label>
 				<input id="maximumProfileImageSize" type="text" class="form-control" placeholder="Maximum size of uploaded user images in kibibytes" data-field="maximumProfileImageSize" />
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/uploads:max-profile-image-size-help]]
 				</p>
 			</div>
 
-			<div class="form-group">
-				<label for="maximumCoverImageSize">[[admin/settings/uploads:max-cover-image-size]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="maximumCoverImageSize">[[admin/settings/uploads:max-cover-image-size]]</label>
 				<input id="maximumCoverImageSize" type="text" class="form-control" placeholder="Maximum size of uploaded cover images in kibibytes" data-field="maximumCoverImageSize" />
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/uploads:max-cover-image-size-help]]
 				</p>
 			</div>
@@ -208,15 +206,15 @@
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/uploads:profile-covers]]</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/uploads:profile-covers]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<label for="profile:defaultCovers"><strong>[[admin/settings/uploads:default-covers]]</strong></label>
-			<p class="help-block">
+			<label class="form-label" for="profile:defaultCovers"><strong>[[admin/settings/uploads:default-covers]]</strong></label>
+			<p class="form-text">
 				[[admin/settings/uploads:default-covers-help]]
 			</p>
-			<input type="text" class="form-control input-lg" id="profile:defaultCovers" data-field="profile:defaultCovers" data-field-type="tagsinput" value="/assets/images/cover-default.png" placeholder="https://example.com/group1.png, https://example.com/group2.png" />
+			<input type="text" class="form-control form-control-lg" id="profile:defaultCovers" data-field="profile:defaultCovers" data-field-type="tagsinput" value="/assets/images/cover-default.png" placeholder="https://example.com/group1.png, https://example.com/group2.png" />
 		</form>
 	</div>
 </div>