From 22e478307d3f037fc4be8b007eba15f4d67afcac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Fri, 2 Sep 2022 12:56:58 -0400
Subject: [PATCH] cookies/reputation/user pages

---
 src/views/admin/settings/cookies.tpl    |  56 +++---
 src/views/admin/settings/reputation.tpl |  96 +++++-----
 src/views/admin/settings/user.tpl       | 244 ++++++++++++------------
 3 files changed, 200 insertions(+), 196 deletions(-)

diff --git a/src/views/admin/settings/cookies.tpl b/src/views/admin/settings/cookies.tpl
index 367c86d257..39366db422 100644
--- a/src/views/admin/settings/cookies.tpl
+++ b/src/views/admin/settings/cookies.tpl
@@ -1,10 +1,10 @@
 <!-- IMPORT admin/partials/settings/header.tpl -->
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/cookies:eu-consent]]</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/cookies:eu-consent]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="form-group">
+			<div class="mb-3">
 				<div class="checkbox">
 					<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 						<input type="checkbox" class="mdl-switch__input" id="cookieConsentEnabled" data-field="cookieConsentEnabled">
@@ -12,58 +12,58 @@
 					</label>
 				</div>
 			</div>
-			<div class="form-group">
-				<label for="cookieConsentMessage">[[admin/settings/cookies:consent.message]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="cookieConsentMessage">[[admin/settings/cookies:consent.message]]</label>
 				<input class="form-control" id="cookieConsentMessage" type="text" data-field="cookieConsentMessage" />
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/cookies:consent.blank-localised-default]]
 				</p>
 			</div>
-			<div class="form-group">
-				<label for="cookieConsentDismiss">[[admin/settings/cookies:consent.acceptance]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="cookieConsentDismiss">[[admin/settings/cookies:consent.acceptance]]</label>
 				<input class="form-control" id="cookieConsentDismiss" type="text" data-field="cookieConsentDismiss" />
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/cookies:consent.blank-localised-default]]
 				</p>
 			</div>
-			<div class="form-group">
-				<label for="cookieConsentLink">[[admin/settings/cookies:consent.link-text]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="cookieConsentLink">[[admin/settings/cookies:consent.link-text]]</label>
 				<input class="form-control" id="cookieConsentLink" type="text" data-field="cookieConsentLink" />
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/cookies:consent.blank-localised-default]]
 				</p>
 			</div>
-			<div class="form-group">
-				<label for="cookieConsentLinkUrl">[[admin/settings/cookies:consent.link-url]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="cookieConsentLinkUrl">[[admin/settings/cookies:consent.link-url]]</label>
 				<input class="form-control" id="cookieConsentLinkUrl" type="text" data-field="cookieConsentLinkUrl" />
 			</div>
 		</form>
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">Settings</div>
-	<div class="col-sm-10 col-xs-12">
+<div class="row mb-4">
+	<div class="col-sm-2 col-12 settings-header">Settings</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="form-group">
-				<label for="cookieDomain">[[admin/settings/cookies:cookie-domain]]</label>
-				<input class="form-control" id="cookieDomain" type="text" placeholder=".domain.tld" data-field="cookieDomain" /><br />
-				<p class="help-block">
+			<div class="mb-3">
+				<label class="form-label" for="cookieDomain">[[admin/settings/cookies:cookie-domain]]</label>
+				<input class="form-control" id="cookieDomain" type="text" placeholder=".domain.tld" data-field="cookieDomain" />
+				<p class="form-text">
 					[[admin/settings/cookies:blank-default]]
 				</p>
 			</div>
 
-			<div class="form-group">
-				<label for="maxUserSessions">[[admin/settings/cookies:max-user-sessions]]</label>
-				<input class="form-control" id="maxUserSessions" type="number" placeholder="10" data-field="maxUserSessions" /><br />
-				<p class="help-block">
+			<div class="mb-3">
+				<label class="form-label" for="maxUserSessions">[[admin/settings/cookies:max-user-sessions]]</label>
+				<input class="form-control" id="maxUserSessions" type="number" placeholder="10" data-field="maxUserSessions" />
+				<p class="form-text">
 					[[admin/settings/cookies:blank-default]]
 				</p>
 			</div>
 
-			<div class="form-group">
+			<div class="mb-3">
 				<button id="delete-all-sessions" class="btn btn-danger">Revoke All Sessions</button>
-				<p class="help-block">
+				<p class="form-text">
 					This will delete all sessions, you will be logged out and will have to login again!
 				</p>
 			</div>
diff --git a/src/views/admin/settings/reputation.tpl b/src/views/admin/settings/reputation.tpl
index c9ac7d3acc..42821de3b8 100644
--- a/src/views/admin/settings/reputation.tpl
+++ b/src/views/admin/settings/reputation.tpl
@@ -1,23 +1,23 @@
 <!-- IMPORT admin/partials/settings/header.tpl -->
 
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/reputation:reputation]]</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/reputation:reputation]]</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 type="checkbox" class="mdl-switch__input" data-field="reputation:disabled">
 					<span class="mdl-switch__label"><strong>[[admin/settings/reputation: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 type="checkbox" class="mdl-switch__input" data-field="downvote:disabled">
 					<span class="mdl-switch__label"><strong>[[admin/settings/reputation:disable-down-voting]]</strong></span>
 				</label>
 			</div>
-			<div class="checkbox">
+			<div class="checkbox mb-3">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 					<input type="checkbox" class="mdl-switch__input" data-field="votesArePublic">
 					<span class="mdl-switch__label"><strong>[[admin/settings/reputation:votes-are-public]]</strong></span>
@@ -27,96 +27,96 @@
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/reputation:thresholds]]</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/reputation:thresholds]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="form-group">
-				<label for="min:rep:chat">[[admin/settings/reputation:min-rep-chat]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="min:rep:chat">[[admin/settings/reputation:min-rep-chat]]</label>
 				<input type="text" class="form-control" placeholder="0" data-field="min:rep:chat" id="min:rep:chat">
 			</div>
-			<div class="form-group">
-				<label for="min:rep:upvote">[[admin/settings/reputation:min-rep-upvote]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="min:rep:upvote">[[admin/settings/reputation:min-rep-upvote]]</label>
 				<input type="text" class="form-control" placeholder="0" data-field="min:rep:upvote" id="min:rep:upvote">
 			</div>
-			<div class="form-group">
-				<label for="upvotesPerDay">[[admin/settings/reputation:upvotes-per-day]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="upvotesPerDay">[[admin/settings/reputation:upvotes-per-day]]</label>
 				<input type="text" class="form-control" placeholder="10" data-field="upvotesPerDay" id="upvotesPerDay">
 			</div>
-			<div class="form-group">
-				<label for="upvotesPerUserPerDay">[[admin/settings/reputation:upvotes-per-user-per-day]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="upvotesPerUserPerDay">[[admin/settings/reputation:upvotes-per-user-per-day]]</label>
 				<input type="text" class="form-control" placeholder="3" data-field="upvotesPerUserPerDay" id="upvotesPerUserPerDay">
 			</div>
 
-			<div class="form-group">
-				<label for="min:rep:downvote">[[admin/settings/reputation:min-rep-downvote]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="min:rep:downvote">[[admin/settings/reputation:min-rep-downvote]]</label>
 				<input type="text" class="form-control" placeholder="0" data-field="min:rep:downvote" id="min:rep:downvote">
 			</div>
-			<div class="form-group">
+			<div class="mb-3">
 				<label for="downvotesPerDay">[[admin/settings/reputation:downvotes-per-day]]</label>
 				<input type="text" class="form-control" placeholder="10" data-field="downvotesPerDay" id="downvotesPerDay">
 			</div>
-			<div class="form-group">
-				<label for="downvotesPerUserPerDay">[[admin/settings/reputation:downvotes-per-user-per-day]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="downvotesPerUserPerDay">[[admin/settings/reputation:downvotes-per-user-per-day]]</label>
 				<input type="text" class="form-control" placeholder="3" data-field="downvotesPerUserPerDay" id="downvotesPerUserPerDay">
 			</div>
-			<div class="form-group">
-				<label for="min:rep:flag">[[admin/settings/reputation:min-rep-flag]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="min:rep:flag">[[admin/settings/reputation:min-rep-flag]]</label>
 				<input type="text" class="form-control" placeholder="0" data-field="min:rep:flag" id="min:rep:flag">
 			</div>
-			<div class="form-group">
-				<label for="min:rep:website">[[admin/settings/reputation:min-rep-website]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="min:rep:website">[[admin/settings/reputation:min-rep-website]]</label>
 				<input type="text" class="form-control" placeholder="0" data-field="min:rep:website" id="min:rep:website">
 			</div>
-			<div class="form-group">
-				<label for="min:rep:aboutme">[[admin/settings/reputation:min-rep-aboutme]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="min:rep:aboutme">[[admin/settings/reputation:min-rep-aboutme]]</label>
 				<input type="text" class="form-control" placeholder="0" data-field="min:rep:aboutme" id="min:rep:aboutme">
 			</div>
-			<div class="form-group">
-				<label for="min:rep:signature">[[admin/settings/reputation:min-rep-signature]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="min:rep:signature">[[admin/settings/reputation:min-rep-signature]]</label>
 				<input type="text" class="form-control" placeholder="0" data-field="min:rep:signature" id="min:rep:signature">
 			</div>
-			<div class="form-group">
-				<label for="min:rep:profile-picture">[[admin/settings/reputation:min-rep-profile-picture]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="min:rep:profile-picture">[[admin/settings/reputation:min-rep-profile-picture]]</label>
 				<input type="text" class="form-control" placeholder="0" data-field="min:rep:profile-picture" id="min:rep:profile-picture">
 			</div>
-			<div class="form-group">
-				<label for="min:rep:cover-picture">[[admin/settings/reputation:min-rep-cover-picture]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="min:rep:cover-picture">[[admin/settings/reputation:min-rep-cover-picture]]</label>
 				<input type="text" class="form-control" placeholder="0" data-field="min:rep:cover-picture" id="min:rep:cover-picture">
 			</div>
 		</form>
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/reputation:flags]]</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/reputation:flags]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="form-group">
-				<label for="flags:limitPerTarget">[[admin/settings/reputation:flags.limit-per-target]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="flags:limitPerTarget">[[admin/settings/reputation:flags.limit-per-target]]</label>
 				<input type="text" class="form-control" placeholder="[[admin/settings/reputation:flags.limit-per-target-placeholder]]" data-field="flags:limitPerTarget" id="flags:limitPerTarget">
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/reputation:flags.limit-per-target-help]]
 				</p>
 			</div>
-			<div class="form-group">
-				<label for="flags:autoFlagOnDownvoteThreshold">[[admin/settings/reputation:flags.auto-flag-on-downvote-threshold]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="flags:autoFlagOnDownvoteThreshold">[[admin/settings/reputation:flags.auto-flag-on-downvote-threshold]]</label>
 				<input type="text" class="form-control" placeholder="0" data-field="flags:autoFlagOnDownvoteThreshold" id="flags:autoFlagOnDownvoteThreshold">
 			</div>
 			<div class="row">
 				<div class="col-sm-6">
-					<div class="form-group">
-						<label for="flags:actionOnResolve">[[admin/settings/reputation:flags.action-on-resolve]]</label>
-						<select class="form-control" data-field="flags:actionOnResolve" name="flags:actionOnResolve" id="flags:actionOnResolve">
+					<div class="mb-3">
+						<label class="form-label" for="flags:actionOnResolve">[[admin/settings/reputation:flags.action-on-resolve]]</label>
+						<select class="form-select" data-field="flags:actionOnResolve" name="flags:actionOnResolve" id="flags:actionOnResolve">
 							<option value="">[[admin/settings/reputation:flags.action.nothing]]</option>
 							<option value="rescind">[[admin/settings/reputation:flags.action.rescind]]</option>
 						</select>
 					</div>
 				</div>
 				<div class="col-sm-6">
-					<div class="form-group">
-						<label for="flags:actionOnReject">[[admin/settings/reputation:flags.action-on-reject]]</label>
-						<select class="form-control" data-field="flags:actionOnReject" name="flags:actionOnReject" id="flags:actionOnReject">
+					<div class="mb-3">
+						<label class="form-label" for="flags:actionOnReject">[[admin/settings/reputation:flags.action-on-reject]]</label>
+						<select class="form-select" data-field="flags:actionOnReject" name="flags:actionOnReject" id="flags:actionOnReject">
 							<option value="">[[admin/settings/reputation:flags.action.nothing]]</option>
 							<option value="rescind">[[admin/settings/reputation:flags.action.rescind]]</option>
 						</select>
diff --git a/src/views/admin/settings/user.tpl b/src/views/admin/settings/user.tpl
index d49788c68b..f056d457cb 100644
--- a/src/views/admin/settings/user.tpl
+++ b/src/views/admin/settings/user.tpl
@@ -1,19 +1,25 @@
 <!-- IMPORT admin/partials/settings/header.tpl -->
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/user:authentication]]</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/user:authentication]]</div>
+	<div class="col-sm-10 col-12">
 		<form role="form">
-			<div class="form-group form-inline">
-				<label for="emailConfirmInterval">[[admin/settings/user:email-confirm-interval]]</label>
-				<input class="form-control" data-field="emailConfirmInterval" type="number" id="emailConfirmInterval" placeholder="Default: 10"
+			<div class="row mb-3 align-items-center">
+				<div class="col-auto">
+					<label class="form-label" for="emailConfirmInterval">[[admin/settings/user:email-confirm-interval]]</label>
+				</div>
+				<div class="col-auto">
+					<input class="form-control" data-field="emailConfirmInterval" type="number" id="emailConfirmInterval" placeholder="Default: 10"
 					value="10" />
-				<label for="emailConfirmInterval">[[admin/settings/user:email-confirm-email2]]</label>
+				</div>
+				<div class="col-auto">
+					<label class="form-label" for="emailConfirmInterval">[[admin/settings/user:email-confirm-email2]]</label>
+				</div>
 			</div>
 
-			<div class="form-group">
-				<label for="allowLoginWith">[[admin/settings/user:allow-login-with]]</label>
-				<select id="allowLoginWith" class="form-control" data-field="allowLoginWith">
+			<div class="mb-3">
+				<label class="form-label" for="allowLoginWith">[[admin/settings/user:allow-login-with]]</label>
+				<select id="allowLoginWith" class="form-select" data-field="allowLoginWith">
 					<option value="username-email">[[admin/settings/user:allow-login-with.username-email]]</option>
 					<option value="username">[[admin/settings/user:allow-login-with.username]]</option>
 				</select>
@@ -22,54 +28,54 @@
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/user:account-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/user:account-settings]]</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="gdpr_enabled">
 					<span class="mdl-switch__label"><strong>[[admin/settings/user:gdpr_enabled]]</strong></span>
 				</label>
-				<p class="help-block">[[admin/settings/user:gdpr_enabled_help]]</p>
+				<p class="form-text">[[admin/settings/user:gdpr_enabled_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="username:disableEdit">
 					<span class="mdl-switch__label"><strong>[[admin/settings/user:disable-username-changes]]</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="email:disableEdit">
 					<span class="mdl-switch__label"><strong>[[admin/settings/user:disable-email-changes]]</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="password:disableEdit">
 					<span class="mdl-switch__label"><strong>[[admin/settings/user:disable-password-changes]]</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="allowAccountDelete" checked>
 					<span class="mdl-switch__label"><strong>[[admin/settings/user:allow-account-deletion]]</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="hideFullname">
 					<span class="mdl-switch__label"><strong>[[admin/settings/user:hide-fullname]]</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="hideEmail">
 					<span class="mdl-switch__label"><strong>[[admin/settings/user:hide-email]]</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="showFullnameAsDisplayName">
 					<span class="mdl-switch__label"><strong>[[admin/settings/user:show-fullname-as-displayname]]</strong></span>
@@ -79,9 +85,9 @@
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/user:themes]]</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/user:themes]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
 			<div class="checkbox">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
@@ -93,148 +99,147 @@
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/user:account-protection]]</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/user:account-protection]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="form-group">
-				<label for="adminReloginDuration">[[admin/settings/user:admin-relogin-duration]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="adminReloginDuration">[[admin/settings/user:admin-relogin-duration]]</label>
 				<input id="adminReloginDuration" type="text" class="form-control" data-field="adminReloginDuration" placeholder="60" />
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/user:admin-relogin-duration-help]]
 				</p>
 			</div>
-			<div class="form-group">
-				<label for="loginAttempts">[[admin/settings/user:login-attempts]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="loginAttempts">[[admin/settings/user:login-attempts]]</label>
 				<input id="loginAttempts" type="text" class="form-control" data-field="loginAttempts" placeholder="5" />
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/user:login-attempts-help]]
 				</p>
 			</div>
-			<div class="form-group">
-				<label for="lockoutDuration">[[admin/settings/user:lockout-duration]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="lockoutDuration">[[admin/settings/user:lockout-duration]]</label>
 				<input id="lockoutDuration" type="text" class="form-control" data-field="lockoutDuration" placeholder="60" />
 			</div>
-			<div class="form-group">
-				<label for="passwordExpiryDays">[[admin/settings/user:password-expiry-days]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="passwordExpiryDays">[[admin/settings/user:password-expiry-days]]</label>
 				<input id="passwordExpiryDays" type="text" class="form-control" data-field="passwordExpiryDays" placeholder="0" />
 			</div>
 		</form>
 	</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/user:session-time]]
 	</div>
-	<div class="col-sm-10 col-xs-12">
+	<div class="col-sm-10 col-12">
 		<form>
 			<div class="row">
 				<div class="col-sm-6">
-					<div class="form-group">
-						<label for="loginDays">[[admin/settings/user:session-time-days]]</label>
-						<input id="loginDays" type="text" class="form-control" data-field="loginDays" placeholder="[[admin/settings/user:session-time-days]]" />
-					</div>
+					<label class="form-label" for="loginDays">[[admin/settings/user:session-time-days]]</label>
+					<input id="loginDays" type="text" class="form-control" data-field="loginDays" placeholder="[[admin/settings/user:session-time-days]]" />
 				</div>
 				<div class="col-sm-6">
-					<div class="form-group">
-						<label for="loginSeconds">[[admin/settings/user:session-time-seconds]]</label>
-						<input id="loginSeconds" type="text" class="form-control" data-field="loginSeconds" placeholder="[[admin/settings/user:session-time-seconds]]" />
+					<label class="form-label" for="loginSeconds">[[admin/settings/user:session-time-seconds]]</label>
+					<input id="loginSeconds" type="text" class="form-control" data-field="loginSeconds" placeholder="[[admin/settings/user:session-time-seconds]]" />
+				</div>
+				<div class="row">
+					<div class="col-12">
+						<p class="form-text">
+							[[admin/settings/user:session-time-help]]
+						</p>
 					</div>
 				</div>
-				<div class="col-xs-12">
-					<p class="help-block">
-						[[admin/settings/user:session-time-help]]
-					</p>
-				</div>
 			</div>
-			<div class="form-group">
-				<label for="onlineCutoff">[[admin/settings/user:online-cutoff]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="onlineCutoff">[[admin/settings/user:online-cutoff]]</label>
 				<input id="onlineCutoff" type="text" class="form-control" data-field="onlineCutoff">
-				<p class="help-block">[[admin/settings/user:online-cutoff-help]]</p>
+				<p class="form-text">[[admin/settings/user:online-cutoff-help]]</p>
 			</div>
 		</form>
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/user:registration]]</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/user:registration]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="form-group">
-				<label for="registrationType">[[admin/settings/user:registration-type]]</label>
-				<select id="registrationType" class="form-control" data-field="registrationType">
+			<div class="mb-3">
+				<label class="form-label" for="registrationType">[[admin/settings/user:registration-type]]</label>
+				<select id="registrationType" class="form-select" data-field="registrationType">
 					<option value="normal">[[admin/settings/user:registration-type.normal]]</option>
 					<option value="invite-only">[[admin/settings/user:registration-type.invite-only]]</option>
 					<option value="admin-invite-only">[[admin/settings/user:registration-type.admin-invite-only]]</option>
 					<option value="disabled">[[admin/settings/user:registration-type.disabled]]</option>
 				</select>
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/user:registration-type.help, {config.relative_path}]]
 				</p>
 			</div>
-			<div class="form-group">
-				<label for="registrationApprovalType">[[admin/settings/user:registration-approval-type]]</label>
-				<select id="registrationApprovalType" class="form-control" data-field="registrationApprovalType">
+			<div class="mb-3">
+				<label class="form-label" for="registrationApprovalType">[[admin/settings/user:registration-approval-type]]</label>
+				<select id="registrationApprovalType" class="form-select" data-field="registrationApprovalType">
 					<option value="normal">[[admin/settings/user:registration-type.normal]]</option>
 					<option value="admin-approval">[[admin/settings/user:registration-type.admin-approval]]</option>
 					<option value="admin-approval-ip">[[admin/settings/user:registration-type.admin-approval-ip]]</option>
 				</select>
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/user:registration-approval-type.help, {config.relative_path}]]
 				</p>
 			</div>
-			<div class="form-group">
-				<label for="autoApproveTime">[[admin/settings/user:registration-queue-auto-approve-time]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="autoApproveTime">[[admin/settings/user:registration-queue-auto-approve-time]]</label>
 				<input id="autoApproveTime" type="number" class="form-control" data-field="autoApproveTime" placeholder="0">
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/user:registration-queue-auto-approve-time-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="showAverageApprovalTime">
 					<span class="mdl-switch__label"><strong>[[admin/settings/user:registration-queue-show-average-time]]</strong></span>
 				</label>
 			</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="form-group">
-				<label for="maximumInvites">[[admin/settings/user:max-invites]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="maximumInvites">[[admin/settings/user:max-invites]]</label>
 				<input id="maximumInvites" type="number" class="form-control" data-field="maximumInvites" placeholder="0">
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/user:max-invites-help]]
 				</p>
 			</div>
-			<div class="form-group">
-				<label for="inviteExpiration">[[admin/settings/user:invite-expiration]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="inviteExpiration">[[admin/settings/user:invite-expiration]]</label>
 				<input id="inviteExpiration" type="number" class="form-control" data-field="inviteExpiration" placeholder="7">
-				<p class="help-block">
+				<p class="form-text">
 					[[admin/settings/user:invite-expiration-help]]
 				</p>
 			</div>
-			<div class="form-group">
-				<label for="minimumUsernameLength">[[admin/settings/user:min-username-length]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="minimumUsernameLength">[[admin/settings/user:min-username-length]]</label>
 				<input id="minimumUsernameLength" type="text" class="form-control" value="2" data-field="minimumUsernameLength">
 			</div>
-			<div class="form-group">
-				<label for="maximumUsernameLength">[[admin/settings/user:max-username-length]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="maximumUsernameLength">[[admin/settings/user:max-username-length]]</label>
 				<input id="maximumUsernameLength" type="text" class="form-control" value="16" data-field="maximumUsernameLength">
 			</div>
-			<div class="form-group">
-				<label for="minimumPasswordLength">[[admin/settings/user:min-password-length]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="minimumPasswordLength">[[admin/settings/user:min-password-length]]</label>
 				<input id="minimumPasswordLength" type="text" class="form-control" value="6" data-field="minimumPasswordLength">
 			</div>
-			<div class="form-group">
-				<label for="minimumPasswordStrength">[[admin/settings/user:min-password-strength]]</label>
-				<select id="minimumPasswordStrength" class="form-control" data-field="minimumPasswordStrength">
+			<div class="mb-3">
+				<label class="form-label" for="minimumPasswordStrength">[[admin/settings/user:min-password-strength]]</label>
+				<select id="minimumPasswordStrength" class="form-select" data-field="minimumPasswordStrength">
 					<option value="0">0 - too guessable: risky password</option>
 					<option value="1">1 - very guessable</option>
 					<option value="2">2 - somewhat guessable</option>
@@ -242,80 +247,79 @@
 					<option value="4">4 - very unguessable</option>
 				</select>
 			</div>
-			<div class="form-group">
-				<label for="maximumAboutMeLength">[[admin/settings/user:max-about-me-length]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="maximumAboutMeLength">[[admin/settings/user:max-about-me-length]]</label>
 				<input id="maximumAboutMeLength" type="text" class="form-control" value="500" data-field="maximumAboutMeLength">
 			</div>
-			<div class="form-group">
-				<label for="termsOfUse">[[admin/settings/user:terms-of-use]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="termsOfUse">[[admin/settings/user:terms-of-use]]</label>
 				<textarea id="termsOfUse" class="form-control" data-field="termsOfUse"></textarea>
 			</div>
 		</form>
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/user:user-search]]</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/user:user-search]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
-			<div class="form-group">
-				<label for="userSearchResultsPerPage">[[admin/settings/user:user-search-results-per-page]]</label>
+			<div class="mb-3">
+				<label class="form-label" for="userSearchResultsPerPage">[[admin/settings/user:user-search-results-per-page]]</label>
 				<input id="userSearchResultsPerPage" type="text" class="form-control" value="24" data-field="userSearchResultsPerPage">
 			</div>
-
 		</form>
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/user:default-user-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/user:default-user-settings]]</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="showemail">
 					<span class="mdl-switch__label"><strong>[[admin/settings/user:show-email]]</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="showfullname">
 					<span class="mdl-switch__label"><strong>[[admin/settings/user:show-fullname]]</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="restrictChat">
 					<span class="mdl-switch__label"><strong>[[admin/settings/user:restrict-chat]]</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="openOutgoingLinksInNewTab">
 					<span class="mdl-switch__label"><strong>[[admin/settings/user:outgoing-new-tab]]</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="topicSearchEnabled">
 					<span class="mdl-switch__label"><strong>[[admin/settings/user:topic-search]]</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="updateUrlWithPostIndex">
 					<span class="mdl-switch__label"><strong>[[admin/settings/user:update-url-with-post-index]]</strong></span>
 				</label>
 			</div>
 
-			<div class="form-group">
-				<label for="dailyDigestFreq">[[admin/settings/user:digest-freq]]</label>
-				<select id="dailyDigestFreq" class="form-control" data-field="dailyDigestFreq">
+			<div class="mb-3">
+				<label class="form-label" for="dailyDigestFreq">[[admin/settings/user:digest-freq]]</label>
+				<select id="dailyDigestFreq" class="form-select" data-field="dailyDigestFreq">
 					<option value="off">[[admin/settings/user:digest-freq.off]]</option>
 					<option value="day">[[admin/settings/user:digest-freq.daily]]</option>
 					<option value="week">[[admin/settings/user:digest-freq.weekly]]</option>
@@ -324,38 +328,38 @@
 				</select>
 			</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="followTopicsOnCreate">
 					<span class="mdl-switch__label"><strong>[[admin/settings/user:follow-created-topics]]</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="followTopicsOnReply">
 					<span class="mdl-switch__label"><strong>[[admin/settings/user:follow-replied-topics]]</strong></span>
 				</label>
 			</div>
 
-			<div class="form-group">
-				<label for="categoryWatchState">[[admin/settings/user:categoryWatchState]]</label>
-				<select id="categoryWatchState" class="form-control" data-field="categoryWatchState">
+			<div class="mb-3">
+				<label class="form-label" for="categoryWatchState">[[admin/settings/user:categoryWatchState]]</label>
+				<select id="categoryWatchState" class="form-select" data-field="categoryWatchState">
 					<option value="watching">[[admin/settings/user:categoryWatchState.watching]]</option>
 					<option value="notwatching">[[admin/settings/user:categoryWatchState.notwatching]]</option>
 					<option value="ignoring">[[admin/settings/user:categoryWatchState.ignoring]]</option>
 				</select>
 			</div>
 
-			<label>[[admin/settings/user:default-notification-settings]]</label>
+			<label class="form-label">[[admin/settings/user:default-notification-settings]]</label>
 
 			<!-- BEGIN notificationSettings -->
 			<div class="row">
-				<div class="form-group col-xs-7">
-					<label>{notificationSettings.label}</label>
+				<div class="mb-3 col-7">
+					<label class="form-label">{notificationSettings.label}</label>
 				</div>
-				<div class="form-group col-xs-5">
-					<select class="form-control" data-field="{notificationSettings.name}">
+				<div class="mb-3 col-5">
+					<select class="form-select" data-field="{notificationSettings.name}">
 						<option value="none">[[notifications:none]]</option>
 						<option value="notification">[[notifications:notification_only]]</option>
 						<option value="email">[[notifications:email_only]]</option>