From 2c3f33058078f4024e11d1ebb8ea1d42d8a442d8 Mon Sep 17 00:00:00 2001
From: Julian Lam <julian@nodebb.org>
Date: Fri, 21 Oct 2022 15:37:33 -0400
Subject: [PATCH] fix: rewrite and standardise all checkboxes in ACP to be bs5
 checkboxes

---
 src/views/admin/advanced/cache.tpl       |   7 +-
 src/views/admin/appearance/customise.tpl |  36 ++----
 src/views/admin/extend/plugins.tpl       |   8 +-
 src/views/admin/manage/category.tpl      |  16 +--
 src/views/admin/settings/advanced.tpl    |  56 ++++-----
 src/views/admin/settings/api.tpl         |   8 +-
 src/views/admin/settings/chat.tpl        |  16 +--
 src/views/admin/settings/cookies.tpl     |   8 +-
 src/views/admin/settings/email.tpl       |  72 ++++-------
 src/views/admin/settings/general.tpl     |  16 +--
 src/views/admin/settings/group.tpl       |  16 +--
 src/views/admin/settings/guest.tpl       |  24 ++--
 src/views/admin/settings/homepage.tpl    |   8 +-
 src/views/admin/settings/languages.tpl   |   8 +-
 src/views/admin/settings/navigation.tpl  |  16 +--
 src/views/admin/settings/pagination.tpl  |   8 +-
 src/views/admin/settings/post.tpl        |  98 ++++++---------
 src/views/admin/settings/reputation.tpl  |  32 ++---
 src/views/admin/settings/social.tpl      |   8 +-
 src/views/admin/settings/uploads.tpl     |  56 ++++-----
 src/views/admin/settings/user.tpl        | 152 +++++++++--------------
 src/views/admin/settings/web-crawler.tpl |  16 +--
 22 files changed, 257 insertions(+), 428 deletions(-)

diff --git a/src/views/admin/advanced/cache.tpl b/src/views/admin/advanced/cache.tpl
index 4e5275e990..a0f4eaca95 100644
--- a/src/views/admin/advanced/cache.tpl
+++ b/src/views/admin/advanced/cache.tpl
@@ -7,11 +7,8 @@
 				<div class="card">
 					<div class="card-header">[[admin/advanced/cache:{@key}-cache]]</div>
 					<div class="card-body">
-						<div class="checkbox mb-3" data-name="{@key}">
-							<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-								<input class="mdl-switch__input" type="checkbox" {{{if caches.enabled}}}checked{{{end}}}>
-								<span class="mdl-switch__label"></span>
-							</label>
+						<div class="form-check" data-name="{@key}">
+							<input class="form-check-input" type="checkbox" {{{if caches.enabled}}}checked{{{end}}}>
 						</div>
 
 						<div class="mb-3">{{{if ../length}}}{../length}{{{else}}}{../itemCount}{{{end}}} / {{{if ../max}}}{../max}{{{else}}}{../maxSize}{{{end}}}</div>
diff --git a/src/views/admin/appearance/customise.tpl b/src/views/admin/appearance/customise.tpl
index 190bc534d0..20c05b36af 100644
--- a/src/views/admin/appearance/customise.tpl
+++ b/src/views/admin/appearance/customise.tpl
@@ -15,11 +15,9 @@
 
 			<br />
 			<form class="form">
-				<div class="mb-3">
-					<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="useCustomCSS">
-						<input class="mdl-switch__input" id="useCustomCSS" type="checkbox" data-field="useCustomCSS" />
-						<span class="mdl-switch__label">[[admin/appearance/customise:custom-css.enable]]</span>
-					</label>
+				<div class="form-check">
+					<input class="form-check-input" id="useCustomCSS" type="checkbox" data-field="useCustomCSS" />
+					<label class="form-check-label" for="useCustomCSS">[[admin/appearance/customise:custom-css.enable]]</label>
 				</div>
 			</form>
 		</div>
@@ -33,11 +31,9 @@
 
 			<br />
 			<form class="form">
-				<div class="mb-3">
-					<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="useCustomJS">
-						<input class="mdl-switch__input" id="useCustomJS" type="checkbox" data-field="useCustomJS" />
-						<span class="mdl-switch__label">[[admin/appearance/customise:custom-js.enable]]</span>
-					</label>
+				<div class="form-check">
+					<input class="form-check-input" id="useCustomJS" type="checkbox" data-field="useCustomJS" />
+					<label class="form-check-label" for="useCustomJS">[[admin/appearance/customise:custom-js.enable]]</label>
 				</div>
 			</form>
 		</div>
@@ -52,24 +48,18 @@
 
 			<br />
 			<form class="form">
-				<div class="mb-3">
-					<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="useCustomHTML">
-						<input class="mdl-switch__input" id="useCustomHTML" type="checkbox" data-field="useCustomHTML" />
-						<span class="mdl-switch__label">[[admin/appearance/customise:custom-header.enable]]</span>
-					</label>
+				<div class="form-check">
+					<input class="form-check-input" id="useCustomHTML" type="checkbox" data-field="useCustomHTML" />
+					<label class="form-check-label" for="useCustomHTML">[[admin/appearance/customise:custom-header.enable]]</label>
 				</div>
 			</form>
 		</div>
 
 		<form class="form">
-			<div class="mb-3">
-				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="enableLiveReload">
-					<input class="mdl-switch__input" id="enableLiveReload" type="checkbox" data-field="enableLiveReload" checked />
-					<span class="mdl-switch__label">
-						[[admin/appearance/customise:custom-css.livereload]]
-						<div class="form-text">[[admin/appearance/customise:custom-css.livereload.description]]</div>
-					</span>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" id="enableLiveReload" type="checkbox" data-field="enableLiveReload" checked />
+				<label class="form-check-label" for="enableLiveReload">[[admin/appearance/customise:custom-css.livereload]]</label>
+				<div class="form-text">[[admin/appearance/customise:custom-css.livereload.description]]</div>
 			</div>
 		</form>
 	</div>
diff --git a/src/views/admin/extend/plugins.tpl b/src/views/admin/extend/plugins.tpl
index 98f93373b4..8c6491a4c5 100644
--- a/src/views/admin/extend/plugins.tpl
+++ b/src/views/admin/extend/plugins.tpl
@@ -89,11 +89,9 @@
 
 		<div class="card">
 			<div class="card-body">
-				<div class="checkbox">
-					<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-						<input id="plugin-submit-usage" class="mdl-switch__input" type="checkbox" data-field="submitPluginUsage" <!-- IF submitPluginUsage -->checked<!-- ENDIF submitPluginUsage -->/>
-						<span class="mdl-switch__label">[[admin/extend/plugins:submit-anonymous-usage]]</span>
-					</label>
+				<div class="form-check">
+					<input id="plugin-submit-usage" class="form-check-input" type="checkbox" data-field="submitPluginUsage" <!-- IF submitPluginUsage -->checked<!-- ENDIF submitPluginUsage -->/>
+					<label for="plugin-submit-usage" class="form-check-label">[[admin/extend/plugins:submit-anonymous-usage]]</label>
 				</div>
 			</div>
 		</div>
diff --git a/src/views/admin/manage/category.tpl b/src/views/admin/manage/category.tpl
index 06a7254f56..a1910815a0 100644
--- a/src/views/admin/manage/category.tpl
+++ b/src/views/admin/manage/category.tpl
@@ -124,22 +124,18 @@
 				<div class="row">
 					<div class="col-lg-6">
 						<div class="form-group">
-							<div class="checkbox">
-								<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-									<input type="checkbox" class="mdl-switch__input" id="cid-{category.cid}-isSection" data-name="isSection" <!-- IF category.isSection -->checked<!-- ENDIF category.isSection --> />
-									<span class="mdl-switch__label"><strong>[[admin/manage/categories:is-section]]</strong></span>
-								</label>
+							<div class="form-check">
+								<input type="checkbox" class="form-check-input" id="cid-{category.cid}-isSection" data-name="isSection" <!-- IF category.isSection -->checked<!-- ENDIF category.isSection --> />
+								<label class="form-check-label">[[admin/manage/categories:is-section]]</label>
 							</div>
 						</div>
 					</div>
 					{{{ if postQueueEnabled }}}
 					<div class="col-lg-6">
 						<div class="form-group">
-							<div class="checkbox">
-								<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-									<input type="checkbox" class="mdl-switch__input" data-name="postQueue" {{{ if category.postQueue }}}checked{{{ end }}} />
-									<span class="mdl-switch__label"><strong>[[admin/manage/categories:post-queue]]</strong></span>
-								</label>
+							<div class="form-check">
+								<input type="checkbox" class="form-check-input" data-name="postQueue" {{{ if category.postQueue }}}checked{{{ end }}} />
+								<label class="form-check-label">[[admin/manage/categories:post-queue]]</label>
 							</div>
 						</div>
 					</div>
diff --git a/src/views/admin/settings/advanced.tpl b/src/views/admin/settings/advanced.tpl
index 106bea8f62..816b0d603c 100644
--- a/src/views/admin/settings/advanced.tpl
+++ b/src/views/admin/settings/advanced.tpl
@@ -4,11 +4,9 @@
 	<div class="col-sm-2 col-12 settings-header">[[admin/settings/advanced:maintenance-mode]]</div>
 	<div class="col-sm-10 col-12">
 		<form>
-			<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="maintenanceMode">
-					<span class="mdl-switch__label"><strong>[[admin/settings/advanced:maintenance-mode]]</strong></span>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="maintenanceMode">
+				<label class="form-check-label">[[admin/settings/advanced:maintenance-mode]]</label>
 			</div>
 			<p class="form-text">
 				[[admin/settings/advanced:maintenance-mode.help]]
@@ -66,11 +64,9 @@
 				<label class="form-label" for="access-control-allow-headers">[[admin/settings/advanced:headers.acah]]</label>
 				<input class="form-control" id="access-control-allow-headers" type="text" placeholder="" data-field="access-control-allow-headers" />
 			</div>
-			<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="cross-origin-embedder-policy" id="cross-origin-embedder-policy">
-					<span class="mdl-switch__label"><strong>[[admin/settings/advanced:headers.coep]]</strong></span>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="cross-origin-embedder-policy" id="cross-origin-embedder-policy">
+				<label class="form-check-label">[[admin/settings/advanced:headers.coep]]</label>
 			</div>
 			<p class="form-text">[[admin/settings/advanced:headers.coep-help]]</p>
 			<div class="mb-3">
@@ -98,27 +94,21 @@
 	<div class="col-sm-2 col-12 settings-header">[[admin/settings/advanced:hsts]]</div>
 	<div class="col-sm-10 col-12">
 		<form>
-			<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="hsts-enabled" checked>
-					<span class="mdl-switch__label"><strong>[[admin/settings/advanced:hsts.enabled]]</strong></span>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="hsts-enabled" checked>
+				<label class="form-check-label">[[admin/settings/advanced:hsts.enabled]]</label>
 			</div>
 			<div class="mb-3">
 				<label class="form-label" for="hsts-maxage">[[admin/settings/advanced:hsts.maxAge]]</label>
 				<input class="form-control" id="hsts-maxage" type="number" placeholder="31536000" data-field="hsts-maxage" />
 			</div>
-			<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="hsts-subdomains" checked>
-					<span class="mdl-switch__label"><strong>[[admin/settings/advanced:hsts.subdomains]]</strong></span>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="hsts-subdomains" checked>
+				<label class="form-check-label">[[admin/settings/advanced:hsts.subdomains]]</label>
 			</div>
-			<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="hsts-preload">
-					<span class="mdl-switch__label"><strong>[[admin/settings/advanced:hsts.preload]]</strong></span>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="hsts-preload">
+				<label class="form-check-label">[[admin/settings/advanced:hsts.preload]]</label>
 			</div>
 			<p class="form-text">
 				[[admin/settings/advanced:hsts.help, https:\/\/hstspreload.org\/]]
@@ -134,11 +124,9 @@
 			[[admin/settings/advanced:traffic.help]]
 		</p>
 		<form>
-			<div class="mb-3">
-				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="eventLoopCheckEnabled">
-					<input class="mdl-switch__input" id="eventLoopCheckEnabled" type="checkbox" data-field="eventLoopCheckEnabled" checked />
-					<span class="mdl-switch__label">[[admin/settings/advanced:traffic.enable]]</span>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" id="eventLoopCheckEnabled" type="checkbox" data-field="eventLoopCheckEnabled" checked />
+				<label class="form-check-label" for="eventLoopCheckEnabled">[[admin/settings/advanced:traffic.enable]]</label>
 			</div>
 			<div class="mb-3">
 				<label class="form-label" for="eventLoopLagThreshold">[[admin/settings/advanced:traffic.event-lag]]</label>
@@ -197,11 +185,9 @@
 				<p class="form-text">
 					[[admin/settings/advanced:compression.help]]
 				</p>
-				<div class="checkbox">
-					<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-						<input class="mdl-switch__input" type="checkbox" data-field="useCompression">
-						<span class="mdl-switch__label"><strong>[[admin/settings/advanced:compression.enable]]</strong></span>
-					</label>
+				<div class="form-check">
+					<input class="form-check-input" type="checkbox" data-field="useCompression">
+					<label class="form-check-label">[[admin/settings/advanced:compression.enable]]</label>
 				</div>
 			</div>
 		</form>
diff --git a/src/views/admin/settings/api.tpl b/src/views/admin/settings/api.tpl
index aafb723453..1f8edb8f72 100644
--- a/src/views/admin/settings/api.tpl
+++ b/src/views/admin/settings/api.tpl
@@ -13,11 +13,9 @@
 	<div class="row mb-4">
 		<div class="col-sm-2 col-12 settings-header">[[admin/settings/api:settings]]</div>
 		<div class="col-sm-10 col-12">
-			<div class="checkbox">
-				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-					<input id="requireHttps" class="mdl-switch__input" type="checkbox" name="requireHttps" />
-					<span class="mdl-switch__label">[[admin/settings/api:require-https]]</span>
-				</label>
+			<div class="form-check">
+				<input id="requireHttps" class="form-check-input" type="checkbox" name="requireHttps" />
+				<label class="form-check-label">[[admin/settings/api:require-https]]</label>
 			</div>
 			<p class="form-text">[[admin/settings/api:require-https-caveat]]</p>
 		</div>
diff --git a/src/views/admin/settings/chat.tpl b/src/views/admin/settings/chat.tpl
index 0fca79272c..20b8e13a8e 100644
--- a/src/views/admin/settings/chat.tpl
+++ b/src/views/admin/settings/chat.tpl
@@ -5,20 +5,16 @@
 	<div class="col-sm-2 col-12 settings-header">[[admin/settings/chat:chat-settings]]</div>
 	<div class="col-sm-10 col-12">
 		<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="disableChat" data-field="disableChat">
-					<span class="mdl-switch__label"><strong>[[admin/settings/chat:disable]]</strong></span>
-				</label>
+			<div class="form-check">
+				<input type="checkbox" class="form-check-input" id="disableChat" data-field="disableChat">
+				<label class="form-check-label">[[admin/settings/chat:disable]]</label>
 			</div>
 		</div>
 
 		<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="disableChatMessageEditing" data-field="disableChatMessageEditing">
-					<span class="mdl-switch__label"><strong>[[admin/settings/chat:disable-editing]]</strong></span>
-				</label>
+			<div class="form-check">
+				<input type="checkbox" class="form-check-input" id="disableChatMessageEditing" data-field="disableChatMessageEditing">
+				<label class="form-check-label">[[admin/settings/chat:disable-editing]]</label>
 			</div>
 			<p class="form-text">[[admin/settings/chat:disable-editing-help]]</p>
 		</div>
diff --git a/src/views/admin/settings/cookies.tpl b/src/views/admin/settings/cookies.tpl
index 39366db422..8d82ada59b 100644
--- a/src/views/admin/settings/cookies.tpl
+++ b/src/views/admin/settings/cookies.tpl
@@ -5,11 +5,9 @@
 	<div class="col-sm-10 col-12">
 		<form>
 			<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">
-						<span class="mdl-switch__label"><strong>[[admin/settings/cookies:consent.enabled]]</strong></span>
-					</label>
+				<div class="form-check">
+					<input type="checkbox" class="form-check-input" id="cookieConsentEnabled" data-field="cookieConsentEnabled">
+					<label class="form-check-label">[[admin/settings/cookies:consent.enabled]]</label>
 				</div>
 			</div>
 			<div class="mb-3">
diff --git a/src/views/admin/settings/email.tpl b/src/views/admin/settings/email.tpl
index 3364a4d10b..4c192e9a19 100644
--- a/src/views/admin/settings/email.tpl
+++ b/src/views/admin/settings/email.tpl
@@ -20,26 +20,20 @@
 				<input type="text" class="form-control input-lg" id="email:from_name" data-field="email:from_name" placeholder="NodeBB" />
 			</div>
 
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" id="requireEmailAddress" data-field="requireEmailAddress" name="requireEmailAddress" />
+				<label for="requireEmailAddress" class="form-check-label">[[admin/settings/email:require-email-address]]</label>
 			</div>
 			<p class="form-text">[[admin/settings/email:require-email-address-warning]]</p>
 
-			<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>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" id="sendEmailToBanned" data-field="sendEmailToBanned" name="sendEmailToBanned" />
+				<label for="sendEmailToBanned" class="form-check-label">[[admin/settings/email:sendEmailToBanned]]</label>
 			</div>
 
-			<div class="checkbox">
-				<label for="removeEmailNotificationImages" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-					<input class="mdl-switch__input" type="checkbox" id="removeEmailNotificationImages" data-field="removeEmailNotificationImages" name="removeEmailNotificationImages" />
-					<span class="mdl-switch__label">[[admin/settings/email:notifications.remove-images]]</span>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" id="removeEmailNotificationImages" data-field="removeEmailNotificationImages" name="removeEmailNotificationImages" />
+				<label for="removeEmailNotificationImages" class="form-check-label">[[admin/settings/email:notifications.remove-images]]</label>
 			</div>
 		</form>
 	</div>
@@ -66,26 +60,20 @@
 			<input class="form-control" data-field="emailConfirmExpiry" type="number" id="emailConfirmExpiry" placeholder="24" />
 		</div>
 
-		<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 class="form-check">
+			<input class="form-check-input" type="checkbox" id="sendValidationEmail" data-field="sendValidationEmail" name="sendValidationEmail" />
+			<label for="sendValidationEmail" class="form-check-label">[[admin/settings/email:send-validation-email]]</label>
 		</div>
 
-		<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 class="form-check">
+			<input class="form-check-input" type="checkbox" id="includeUnverifiedEmails" data-field="includeUnverifiedEmails" name="includeUnverifiedEmails" />
+			<label for="includeUnverifiedEmails" class="form-check-label">[[admin/settings/email:include-unverified-emails]]</label>
 		</div>
 		<p class="form-text">[[admin/settings/email:include-unverified-warning]]</p>
 
-		<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 class="form-check">
+			<input class="form-check-input" type="checkbox" id="emailPrompt" data-field="emailPrompt" name="emailPrompt" />
+			<label for="emailPrompt" class="form-check-label">[[admin/settings/email:prompt]]</label>
 		</div>
 		<p class="form-text">[[admin/settings/email:prompt-help]]</p>
 	</div>
@@ -95,11 +83,9 @@
 	<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 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 class="form-check">
+				<input class="form-check-input" type="checkbox" id="disableEmailSubscriptions" data-field="disableEmailSubscriptions" name="disableEmailSubscriptions" />
+				<label for="disableEmailSubscriptions" class="form-check-label">[[admin/settings/email:subscriptions.disable]]</label>
 			</div>
 
 			<div class="mb-3">
@@ -120,18 +106,14 @@
 			[[admin/settings/email:smtp-transport-help]]
 		</div>
 		<form>
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" id="email:smtpTransport:enabled" data-field="email:smtpTransport:enabled" name="email:smtpTransport:enabled" />
+				<label for="email:smtpTransport:enabled" class="form-check-label">[[admin/settings/email:smtp-transport.enabled]]</label>
 			</div>
 			<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 class="form-check">
+					<input class="form-check-input" type="checkbox" id="email:smtpTransport:pool" data-field="email:smtpTransport:pool" name="email:smtpTransport:pool" />
+					<label for="email:smtpTransport:pool" class="form-check-label">[[admin/settings/email:smtp-transport.pool]]</label>
 				</div>
 				<p class="form-text">
 					[[admin/settings/email:smtp-transport.pool-help]]
diff --git a/src/views/admin/settings/general.tpl b/src/views/admin/settings/general.tpl
index e73257869b..5642a6ec30 100644
--- a/src/views/admin/settings/general.tpl
+++ b/src/views/admin/settings/general.tpl
@@ -22,11 +22,9 @@
 				</p>
 			</div>
 
-			<div class="checkbox mb-3">
-				<label for="showSiteTitle" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-					<input type="checkbox" class="mdl-switch__input" id="showSiteTitle" data-field="showSiteTitle" name="showSiteTitle" />
-					<span class="mdl-switch__label">[[admin/settings/general:title.show-in-header]]</span>
-				</label>
+			<div class="form-check">
+				<input type="checkbox" class="form-check-input" id="showSiteTitle" data-field="showSiteTitle" name="showSiteTitle" />
+				<label for="showSiteTitle" class="form-check-label">[[admin/settings/general:title.show-in-header]]</label>
 			</div>
 			<div class="mb-3">
 				<label class="form-label" for="browserTitle">[[admin/settings/general:browser-title]]</label>
@@ -185,11 +183,9 @@
 	<div class="col-sm-2 col-12 settings-header">[[admin/settings/general:outgoing-links]]</div>
 	<div class="col-sm-10 col-12">
 		<form>
-			<div class="checkbox mb-3">
-				<label for="useOutgoingLinksPage" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-					<input type="checkbox" class="mdl-switch__input" id="useOutgoingLinksPage" data-field="useOutgoingLinksPage">
-					<span class="mdl-switch__label"><strong>[[admin/settings/general:outgoing-links.warning-page]]</strong></span>
-				</label>
+			<div class="form-check">
+				<input type="checkbox" class="form-check-input" id="useOutgoingLinksPage" data-field="useOutgoingLinksPage">
+				<label for="useOutgoingLinksPage" class="form-check-label">[[admin/settings/general:outgoing-links.warning-page]]</label>
 			</div>
 
 			<div class="mb-3">
diff --git a/src/views/admin/settings/group.tpl b/src/views/admin/settings/group.tpl
index 681497812f..1d77c894fe 100644
--- a/src/views/admin/settings/group.tpl
+++ b/src/views/admin/settings/group.tpl
@@ -4,11 +4,9 @@
 	<div class="col-sm-2 col-12 settings-header">[[admin/settings/group:general]]</div>
 	<div class="col-sm-10 col-12">
 		<form role="form">
-			<div class="checkbox">
-				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-					<input class="mdl-switch__input" type="checkbox" data-field="allowPrivateGroups">
-					<span class="mdl-switch__label"><strong>[[admin/settings/group:private-groups]]</strong></span>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="allowPrivateGroups">
+				<label class="form-check-label">[[admin/settings/group:private-groups]]</label>
 			</div>
 
 			<p class="form-text">
@@ -18,11 +16,9 @@
 				[[admin/settings/group:private-groups.warning]]
 			</p>
 
-			<div class="checkbox">
-				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-					<input class="mdl-switch__input" type="checkbox" data-field="allowMultipleBadges">
-					<span class="mdl-switch__label"><strong>[[admin/settings/group:allow-multiple-badges]]</strong></span>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="allowMultipleBadges">
+				<label class="form-check-label">[[admin/settings/group:allow-multiple-badges]]</label>
 			</div>
 
 			<p class="form-text">
diff --git a/src/views/admin/settings/guest.tpl b/src/views/admin/settings/guest.tpl
index 2d78c350f7..a85b1a7212 100644
--- a/src/views/admin/settings/guest.tpl
+++ b/src/views/admin/settings/guest.tpl
@@ -4,30 +4,24 @@
 	<div class="col-sm-2 col-12 settings-header">[[admin/settings/guest:settings]]</div>
 	<div class="col-sm-10 col-12">
 		<form role="form" 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="allowGuestHandles">
-					<span class="mdl-switch__label"><strong>[[admin/settings/guest:handles.enabled]]</strong></span>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="allowGuestHandles">
+				<label class="form-check-label">[[admin/settings/guest:handles.enabled]]</label>
 			</div>
 			<p class="form-text">
 				[[admin/settings/guest:handles.enabled-help]]
 			</p>
 		</form>
 		<form role="form" 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="guestsIncrementTopicViews">
-					<span class="mdl-switch__label"><strong>[[admin/settings/guest:topic-views.enabled]]</strong></span>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="guestsIncrementTopicViews">
+				<label class="form-check-label">[[admin/settings/guest:topic-views.enabled]]</label>
 			</div>
 		</form>
 		<form role="form" 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="allowGuestReplyNotifications">
-					<span class="mdl-switch__label"><strong>[[admin/settings/guest:reply-notifications.enabled]]</strong></span>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="allowGuestReplyNotifications">
+				<label class="form-check-label">[[admin/settings/guest:reply-notifications.enabled]]</label>
 			</div>
 		</form>
 	</div>
diff --git a/src/views/admin/settings/homepage.tpl b/src/views/admin/settings/homepage.tpl
index 97f839a8b0..ef07a87828 100644
--- a/src/views/admin/settings/homepage.tpl
+++ b/src/views/admin/settings/homepage.tpl
@@ -21,11 +21,9 @@
 					<p class="form-text">[[user:custom_route_help]]</p>
 				</div>
 
-				<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="allowUserHomePage">
-						<span class="mdl-switch__label"><strong>[[admin/settings/homepage:allow-user-home-pages]]</strong></span>
-					</label>
+				<div class="form-check">
+					<input class="form-check-input" type="checkbox" data-field="allowUserHomePage">
+					<label class="form-check-label">[[admin/settings/homepage:allow-user-home-pages]]</label>
 				</div>
 				<div>
 					<label class="form-label" for="homePageTitle">[[admin/settings/homepage:home-page-title]]</label>
diff --git a/src/views/admin/settings/languages.tpl b/src/views/admin/settings/languages.tpl
index db29345346..56ae241393 100644
--- a/src/views/admin/settings/languages.tpl
+++ b/src/views/admin/settings/languages.tpl
@@ -20,11 +20,9 @@
 
 		<form class="row">
 			<div class="form-group col-sm-6">
-				<div class="checkbox">
-					<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-						<input class="mdl-switch__input" type="checkbox" data-field="autoDetectLang" <!-- IF autoDetectLang -->checked<!-- ENDIF autoDetectLang -->/>
-						<span class="mdl-switch__label">[[admin/settings/languages:auto-detect]]</span>
-					</label>
+				<div class="formcheck">
+					<input class="form-check-input" type="checkbox" data-field="autoDetectLang" <!-- IF autoDetectLang -->checked<!-- ENDIF autoDetectLang -->/>
+					<label class="form-check-label">[[admin/settings/languages:auto-detect]]</label>
 				</div>
 			</div>
 		</form>
diff --git a/src/views/admin/settings/navigation.tpl b/src/views/admin/settings/navigation.tpl
index cf276b40fe..ce43521fbd 100644
--- a/src/views/admin/settings/navigation.tpl
+++ b/src/views/admin/settings/navigation.tpl
@@ -83,18 +83,14 @@
 						</div>
 					</div>
 
-					<div class="checkbox">
-						<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-							<input class="mdl-switch__input" type="checkbox" name="targetBlank" <!-- IF enabled.targetBlank -->checked<!-- ENDIF enabled.targetBlank -->/>
-							<span class="mdl-switch__label"><strong>[[admin/settings/navigation:open-new-window]]</strong></span>
-						</label>
+					<div class="form-check">
+						<input class="form-check-input" type="checkbox" name="targetBlank" <!-- IF enabled.targetBlank -->checked<!-- ENDIF enabled.targetBlank -->/>
+						<label class="form-check-label">[[admin/settings/navigation:open-new-window]]</label>
 					</div>
 
-					<div class="checkbox">
-						<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-							<input class="mdl-switch__input" type="checkbox" name="dropdown" {{{ if enabled.dropdown }}}checked{{{ end }}}/>
-							<span class="mdl-switch__label"><strong>[[admin/settings/navigation:dropdown]]</strong></span>
-						</label>
+					<div class="form-check">
+						<input class="form-check-input" type="checkbox" name="dropdown" {{{ if enabled.dropdown }}}checked{{{ end }}}/>
+						<label class="form-check-label">[[admin/settings/navigation:dropdown]]</label>
 					</div>
 					<div>
 						<p class="form-text">
diff --git a/src/views/admin/settings/pagination.tpl b/src/views/admin/settings/pagination.tpl
index 5316787e94..f804e3b649 100644
--- a/src/views/admin/settings/pagination.tpl
+++ b/src/views/admin/settings/pagination.tpl
@@ -4,11 +4,9 @@
 	<div class="col-sm-2 col-12 settings-header">[[admin/settings/pagination:pagination]]</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="usePagination">
-					<span class="mdl-switch__label"><strong>[[admin/settings/pagination:enable]]</strong></span>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="usePagination">
+				<label class="form-check-label">[[admin/settings/pagination:enable]]</label>
 			</div>
 		</form>
 	</div>
diff --git a/src/views/admin/settings/post.tpl b/src/views/admin/settings/post.tpl
index 2129e920e2..ab6cedd13f 100644
--- a/src/views/admin/settings/post.tpl
+++ b/src/views/admin/settings/post.tpl
@@ -120,11 +120,9 @@
 			<div class="row">
 				<div class="col-sm-6">
 					<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 class="form-check">
+							<input class="form-check-input" type="checkbox" data-field="postQueue">
+							<label class="form-check-label">[[admin/settings/post:restrictions.post-queue]]</label>
 						</div>
 						<p class="form-text">
 							[[admin/settings/post:restrictions.post-queue-help]]
@@ -193,11 +191,9 @@
 					<option value="first">[[admin/settings/post:teaser.first]]</option>
 				</select>
 			</div>
-			<div class="checkbox">
-				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-					<input class="mdl-switch__input" type="checkbox" data-field="showPostPreviewsOnHover">
-					<span class="mdl-switch__label"><strong>[[admin/settings/post:showPostPreviewsOnHover]]</strong></span>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="showPostPreviewsOnHover">
+				<label class="form-check-label">[[admin/settings/post:showPostPreviewsOnHover]]</label>
 			</div>
 		</form>
 	</div>
@@ -227,11 +223,9 @@
 				<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">
-				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-					<input class="mdl-switch__input" type="checkbox" data-field="disableRecentCategoryFilter">
-					<span class="mdl-switch__label"><strong>[[admin/settings/post:recent.categoryFilter.disable]]</strong></span>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="disableRecentCategoryFilter">
+				<label class="form-check-label">[[admin/settings/post:recent.categoryFilter.disable]]</label>
 			</div>
 		</form>
 	</div>
@@ -241,29 +235,21 @@
 	<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 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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="disableSignatures">
+				<label class="form-check-label">[[admin/settings/post:signature.disable]]</label>
 			</div>
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="signatures:disableLinks">
+				<label class="form-check-label">[[admin/settings/post:signature.no-links]]</label>
 			</div>
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="signatures:disableImages">
+				<label class="form-check-label">[[admin/settings/post:signature.no-images]]</label>
 			</div>
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="signatures:hideDuplicates">
+				<label class="form-check-label">[[admin/settings/post:signature.hide-duplicates]]</label>
 			</div>
 			<div>
 				<label class="form-label" for="maximumSignatureLength">[[admin/settings/post:signature.max-length]]</label>
@@ -280,27 +266,21 @@
 			<p>
 				[[admin/settings/post:composer-help]]
 			</p>
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" id="composer:showHelpTab" data-field="composer:showHelpTab" checked />
+				<label class="form-check-label" for="composer:showHelpTab">[[admin/settings/post:composer.show-help]]</label>
 			</div>
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" id="composer:allowPluginHelp" data-field="composer:allowPluginHelp" checked />
+				<label class="form-check-label" for="composer:allowPluginHelp">[[admin/settings/post:composer.enable-plugin-help]]</label>
 			</div>
 			<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">
-				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="enablePostHistory">
-					<input class="mdl-switch__input" type="checkbox" id="enablePostHistory" data-field="enablePostHistory" checked />
-					<span class="mdl-switch__label">[[admin/settings/post:enable-post-history]]</span>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" id="enablePostHistory" data-field="enablePostHistory" checked />
+				<label class="form-check-label" for="enablePostHistory">[[admin/settings/post:enable-post-history]]</label>
 			</div>
 		</form>
 	</div>
@@ -310,12 +290,10 @@
 	<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="form-text">[[admin/settings/post:backlinks.help]]</p>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="topicBacklinks">
+				<label class="form-check-label">[[admin/settings/post:backlinks.enabled]]</label>
+				<p class="form-text">[[admin/settings/post:backlinks.help]]</p>
 			</div>
 		</form>
 	</div>
@@ -325,11 +303,9 @@
 	<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">
-					<input class="mdl-switch__input" type="checkbox" data-field="trackIpPerPost">
-					<span class="mdl-switch__label"><strong>[[admin/settings/post:ip-tracking.each-post]]</strong></span>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="trackIpPerPost">
+				<label class="form-check-label">[[admin/settings/post:ip-tracking.each-post]]</label>
 			</div>
 		</form>
 	</div>
diff --git a/src/views/admin/settings/reputation.tpl b/src/views/admin/settings/reputation.tpl
index 42821de3b8..2741846a76 100644
--- a/src/views/admin/settings/reputation.tpl
+++ b/src/views/admin/settings/reputation.tpl
@@ -5,23 +5,17 @@
 	<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 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 class="form-check">
+				<input type="checkbox" class="form-check-input" data-field="reputation:disabled">
+				<label class="form-check-label">[[admin/settings/reputation:disable]]</label>
 			</div>
-			<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 class="form-check">
+				<input type="checkbox" class="form-check-input" data-field="downvote:disabled">
+				<label class="form-check-label">[[admin/settings/reputation:disable-down-voting]]</label>
 			</div>
-			<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>
-				</label>
+			<div class="form-check">
+				<input type="checkbox" class="form-check-input" data-field="votesArePublic">
+				<label class="form-check-label">[[admin/settings/reputation:votes-are-public]]</label>
 			</div>
 		</form>
 	</div>
@@ -123,11 +117,9 @@
 					</div>
 				</div>
 			</div>
-			<div class="checkbox">
-				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-					<input type="checkbox" class="mdl-switch__input" data-field="flags:autoResolveOnBan">
-					<span class="mdl-switch__label"><strong>[[admin/settings/reputation:flags.auto-resolve-on-ban]]</strong></span>
-				</label>
+			<div class="form-check">
+				<input type="checkbox" class="form-check-input" data-field="flags:autoResolveOnBan">
+				<label class="form-check-label">[[admin/settings/reputation:flags.auto-resolve-on-ban]]</label>
 			</div>
 		</form>
 	</div>
diff --git a/src/views/admin/settings/social.tpl b/src/views/admin/settings/social.tpl
index dc44c4e7f4..06836b7b90 100644
--- a/src/views/admin/settings/social.tpl
+++ b/src/views/admin/settings/social.tpl
@@ -5,10 +5,10 @@
 			<div class="col-sm-10 col-12">
 				<div class="form-group" id="postSharingNetworks">
 					<!-- BEGIN posts -->
-					<div class="checkbox mb-3">
-						<label for="{posts.id}" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-							<input type="checkbox" class="mdl-switch__input" id="{posts.id}" data-field="{posts.id}" name="{posts.id}" <!-- IF posts.activated -->checked<!-- ENDIF posts.activated --> />
-							<span class="mdl-switch__label"><i class="fa {posts.class}"></i> {posts.name}</span>
+					<div class="form-check">
+						<input type="checkbox" class="form-check-input" id="{posts.id}" data-field="{posts.id}" name="{posts.id}" <!-- IF posts.activated -->checked<!-- ENDIF posts.activated --> />
+						<label for="{posts.id}" class="form-check-label">
+							<i class="fa {posts.class}"></i> {posts.name}
 						</label>
 					</div>
 					<!-- END posts -->
diff --git a/src/views/admin/settings/uploads.tpl b/src/views/admin/settings/uploads.tpl
index 97a228ea8d..bb09aff9cf 100644
--- a/src/views/admin/settings/uploads.tpl
+++ b/src/views/admin/settings/uploads.tpl
@@ -6,18 +6,14 @@
 	</div>
 	<div class="col-sm-10 col-12">
 		<form>
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="stripEXIFData">
+				<label class="form-check-label">[[admin/settings/uploads:strip-exif-data]]</label>
 			</div>
 
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="privateUploads">
+				<label class="form-check-label">[[admin/settings/uploads:private]]</label>
 			</div>
 
 			<div class="mb-3">
@@ -82,11 +78,9 @@
 				</p>
 			</div>
 
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="allowTopicsThumbnail">
+				<label class="form-check-label">[[admin/settings/uploads:allow-topic-thumbnails]]</label>
 			</div>
 
 			<div class="mb-3">
@@ -127,11 +121,9 @@
 		[[admin/settings/uploads:orphans]]
 	</div>
 	<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>
-			</label>
+		<div class="form-check">
+			<input class="form-check-input" type="checkbox" data-field="preserveOrphanedUploads">
+			<label class="form-check-label">[[admin/settings/uploads:preserve-orphaned-uploads]]</label>
 		</div>
 
 		<div class="row">
@@ -150,18 +142,14 @@
 	</div>
 	<div class="col-sm-10 col-12">
 		<form>
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="allowProfileImageUploads">
+				<label class="form-check-label">[[admin/settings/uploads:allow-profile-image-uploads]]</label>
 			</div>
 
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="profile:convertProfileImageToPNG">
+				<label class="form-check-label">[[admin/settings/uploads:convert-profile-image-png]]</label>
 			</div>
 
 			<div class="mb-3">
@@ -196,11 +184,9 @@
 				</p>
 			</div>
 
-			<div class="checkbox">
-				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-					<input class="mdl-switch__input" type="checkbox" data-field="profile:keepAllUserImages">
-					<span class="mdl-switch__label"><strong>[[admin/settings/uploads:keep-all-user-images]]</strong></span>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="profile:keepAllUserImages">
+				<label class="form-check-label">[[admin/settings/uploads:keep-all-user-images]]</label>
 			</div>
 		</form>
 	</div>
diff --git a/src/views/admin/settings/user.tpl b/src/views/admin/settings/user.tpl
index b28a4a2956..406c3d9281 100644
--- a/src/views/admin/settings/user.tpl
+++ b/src/views/admin/settings/user.tpl
@@ -19,54 +19,38 @@
 	<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 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>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="gdpr_enabled">
+				<label class="form-check-label">[[admin/settings/user:gdpr_enabled]]</label>
 				<p class="form-text">[[admin/settings/user:gdpr_enabled_help]]</p>
 			</div>
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="username:disableEdit">
+				<label class="form-check-label">[[admin/settings/user:disable-username-changes]]</label>
 			</div>
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="email:disableEdit">
+				<label class="form-check-label">[[admin/settings/user:disable-email-changes]]</label>
 			</div>
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="password:disableEdit">
+				<label class="form-check-label">[[admin/settings/user:disable-password-changes]]</label>
 			</div>
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="allowAccountDelete" checked>
+				<label class="form-check-label">[[admin/settings/user:allow-account-deletion]]</label>
 			</div>
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="hideFullname">
+				<label class="form-check-label">[[admin/settings/user:hide-fullname]]</label>
 			</div>
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="hideEmail">
+				<label class="form-check-label">[[admin/settings/user:hide-email]]</label>
 			</div>
-			<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>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="showFullnameAsDisplayName">
+				<label class="form-check-label">[[admin/settings/user:show-fullname-as-displayname]]</label>
 			</div>
 		</form>
 	</div>
@@ -76,11 +60,9 @@
 	<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">
-					<input class="mdl-switch__input" type="checkbox" data-field="disableCustomUserSkins">
-					<span class="mdl-switch__label"><strong>[[admin/settings/user:disable-user-skins]]</strong></span>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="disableCustomUserSkins">
+				<label class="form-check-label">[[admin/settings/user:disable-user-skins]]</label>
 			</div>
 		</form>
 	</div>
@@ -183,18 +165,14 @@
 				</p>
 			</div>
 
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="showAverageApprovalTime">
+				<label class="form-check-label">[[admin/settings/user:registration-queue-show-average-time]]</label>
 			</div>
 
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" id="requireEmailAddress" data-field="requireEmailAddress" name="requireEmailAddress" />
+				<label for="requireEmailAddress" class="form-check-label">[[admin/settings/email:require-email-address]]</label>
 			</div>
 			<p class="form-text">[[admin/settings/email:require-email-address-warning]]</p>
 
@@ -262,46 +240,34 @@
 	<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 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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="showemail">
+				<label class="form-check-label">[[admin/settings/user:show-email]]</label>
 			</div>
 
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="showfullname">
+				<label class="form-check-label">[[admin/settings/user:show-fullname]]</label>
 			</div>
 
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="restrictChat">
+				<label class="form-check-label">[[admin/settings/user:restrict-chat]]</label>
 			</div>
 
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="openOutgoingLinksInNewTab">
+				<label class="form-check-label">[[admin/settings/user:outgoing-new-tab]]</label>
 			</div>
 
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="topicSearchEnabled">
+				<label class="form-check-label">[[admin/settings/user:topic-search]]</label>
 			</div>
 
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="updateUrlWithPostIndex">
+				<label class="form-check-label">[[admin/settings/user:update-url-with-post-index]]</label>
 			</div>
 
 			<div class="mb-3">
@@ -315,18 +281,14 @@
 				</select>
 			</div>
 
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="followTopicsOnCreate">
+				<label class="form-check-label">[[admin/settings/user:follow-created-topics]]</label>
 			</div>
 
-			<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 class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="followTopicsOnReply">
+				<label class="form-check-label">[[admin/settings/user:follow-replied-topics]]</label>
 			</div>
 
 			<div class="mb-3">
diff --git a/src/views/admin/settings/web-crawler.tpl b/src/views/admin/settings/web-crawler.tpl
index 74733d8ea8..acd006c2da 100644
--- a/src/views/admin/settings/web-crawler.tpl
+++ b/src/views/admin/settings/web-crawler.tpl
@@ -14,18 +14,14 @@
 	<div class="col-sm-2 col-12 settings-header">[[admin/settings/web-crawler:sitemap-feed-settings]]</div>
 	<div class="col-sm-10 col-12">
 		<form>
-			<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="feeds:disableRSS">
-					<span class="mdl-switch__label"><strong>[[admin/settings/web-crawler:disable-rss-feeds]]</strong></span>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="feeds:disableRSS">
+				<label class="form-check-label">[[admin/settings/web-crawler:disable-rss-feeds]]</label>
 			</div>
 
-			<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="feeds:disableSitemap">
-					<span class="mdl-switch__label"><strong>[[admin/settings/web-crawler:disable-sitemap-xml]]</strong></span>
-				</label>
+			<div class="form-check">
+				<input class="form-check-input" type="checkbox" data-field="feeds:disableSitemap">
+				<label class="form-check-label">[[admin/settings/web-crawler:disable-sitemap-xml]]</label>
 			</div>
 
 			<div class="mb-3">