diff --git a/public/src/widgets.js b/public/src/widgets.js
index e6612a2952..85cabdf0bb 100644
--- a/public/src/widgets.js
+++ b/public/src/widgets.js
@@ -21,17 +21,17 @@ module.exports.render = function (template) {
 		});
 
 		if (location === 'footer' && !$('#content [widget-area="footer"],#content [data-widget-area="footer"]').length) {
-			$('#content').append($('<div class="row"><div data-widget-area="footer" class="col-xs-12"></div></div>'));
+			$('#content').append($('<div class="row"><div data-widget-area="footer" class="col-12"></div></div>'));
 		} else if (location === 'sidebar' && !$('#content [widget-area="sidebar"],#content [data-widget-area="sidebar"]').length) {
 			if ($('[component="account/cover"]').length) {
-				$('[component="account/cover"]').nextAll().wrapAll($('<div class="row"><div class="col-lg-9 col-xs-12"></div><div data-widget-area="sidebar" class="col-lg-3 col-xs-12"></div></div></div>'));
+				$('[component="account/cover"]').nextAll().wrapAll($('<div class="row"><div class="col-lg-9 col-12"></div><div data-widget-area="sidebar" class="col-lg-3 col-12"></div></div></div>'));
 			} else if ($('[component="groups/cover"]').length) {
-				$('[component="groups/cover"]').nextAll().wrapAll($('<div class="row"><div class="col-lg-9 col-xs-12"></div><div data-widget-area="sidebar" class="col-lg-3 col-xs-12"></div></div></div>'));
+				$('[component="groups/cover"]').nextAll().wrapAll($('<div class="row"><div class="col-lg-9 col-12"></div><div data-widget-area="sidebar" class="col-lg-3 col-12"></div></div></div>'));
 			} else {
-				$('#content > *').wrapAll($('<div class="row"><div class="col-lg-9 col-xs-12"></div><div data-widget-area="sidebar" class="col-lg-3 col-xs-12"></div></div></div>'));
+				$('#content > *').wrapAll($('<div class="row"><div class="col-lg-9 col-12"></div><div data-widget-area="sidebar" class="col-lg-3 col-12"></div></div></div>'));
 			}
 		} else if (location === 'header' && !$('#content [widget-area="header"],#content [data-widget-area="header"]').length) {
-			$('#content').prepend($('<div class="row"><div data-widget-area="header" class="col-xs-12"></div></div>'));
+			$('#content').prepend($('<div class="row"><div data-widget-area="header" class="col-12"></div></div>'));
 		}
 
 		area = $('#content [widget-area="' + location + '"],#content [data-widget-area="' + location + '"]').eq(0);
diff --git a/src/categories/create.js b/src/categories/create.js
index ce3f01f22e..40e434bbe8 100644
--- a/src/categories/create.js
+++ b/src/categories/create.js
@@ -40,7 +40,7 @@ module.exports = function (Categories) {
 			order: order,
 			link: data.link || '',
 			numRecentReplies: 1,
-			class: (data.class ? data.class : 'col-md-3 col-xs-6'),
+			class: (data.class ? data.class : 'col-md-3 col-6'),
 			imageClass: 'cover',
 			isSection: 0,
 			subCategoriesPerPage: 10,
diff --git a/src/views/admin/dashboard/logins.tpl b/src/views/admin/dashboard/logins.tpl
index 9f3be1d1d6..ae9695ce63 100644
--- a/src/views/admin/dashboard/logins.tpl
+++ b/src/views/admin/dashboard/logins.tpl
@@ -1,5 +1,5 @@
 <div class="row dashboard">
-	<div class="col-xs-12">
+	<div class="col-12">
 		<a class="btn btn-link" href="{config.relative_path}/admin/dashboard">
 			<i class="fa fa-chevron-left"></i>
 			[[admin/dashboard:back-to-dashboard]]
diff --git a/src/views/admin/dashboard/searches.tpl b/src/views/admin/dashboard/searches.tpl
index baefcea306..44a736d207 100644
--- a/src/views/admin/dashboard/searches.tpl
+++ b/src/views/admin/dashboard/searches.tpl
@@ -1,5 +1,5 @@
 <div class="row dashboard">
-	<div class="col-xs-12">
+	<div class="col-12">
 		<a class="btn btn-link" href="{config.relative_path}/admin/dashboard">
 			<i class="fa fa-chevron-left"></i>
 			[[admin/dashboard:back-to-dashboard]]
diff --git a/src/views/admin/dashboard/topics.tpl b/src/views/admin/dashboard/topics.tpl
index 98b86e5e8c..ad47c9615d 100644
--- a/src/views/admin/dashboard/topics.tpl
+++ b/src/views/admin/dashboard/topics.tpl
@@ -1,5 +1,5 @@
 <div class="row dashboard">
-	<div class="col-xs-12">
+	<div class="col-12">
 		<a class="btn btn-link" href="{config.relative_path}/admin/dashboard">
 			<i class="fa fa-chevron-left"></i>
 			[[admin/dashboard:back-to-dashboard]]
diff --git a/src/views/admin/dashboard/users.tpl b/src/views/admin/dashboard/users.tpl
index 7c6e249b49..9ca93c9bac 100644
--- a/src/views/admin/dashboard/users.tpl
+++ b/src/views/admin/dashboard/users.tpl
@@ -1,5 +1,5 @@
 <div class="dashboard">
-	<div class="col-xs-12">
+	<div class="col-12">
 		<a class="btn btn-link" href="{config.relative_path}/admin/dashboard">
 			<i class="fa fa-chevron-left"></i>
 			[[admin/dashboard:back-to-dashboard]]
diff --git a/src/views/admin/partials/pageviews-range-select.tpl b/src/views/admin/partials/pageviews-range-select.tpl
index 09ede7ff74..e01d5a6965 100644
--- a/src/views/admin/partials/pageviews-range-select.tpl
+++ b/src/views/admin/partials/pageviews-range-select.tpl
@@ -2,13 +2,13 @@
 	<fieldset>
 		<div class="alert alert-danger hidden">[[admin/dashboard:page-views-custom-error]]</div>
 		<div class="row">
-			<div class="col-xs-6">
+			<div class="col-6">
 				<div class="form-group">
 					<label for="startRange">[[admin/dashboard:page-views-custom-start]]</label>
 					<input class="form-control" type="date" id="startRange" name="startRange" />
 				</div>
 			</div>
-			<div class="col-xs-6">
+			<div class="col-6">
 				<div class="form-group">
 					<label for="endRange">[[admin/dashboard:page-views-custom-end]]</label>
 					<input class="form-control" type="date" id="endRange" name="endRange" />
diff --git a/src/views/admin/partials/settings/header.tpl b/src/views/admin/partials/settings/header.tpl
index d9e097e8c4..b0d46b9624 100644
--- a/src/views/admin/partials/settings/header.tpl
+++ b/src/views/admin/partials/settings/header.tpl
@@ -1,9 +1,9 @@
 <div class="settings">
 	<div class="row mb-4">
-		<div class="col-sm-2 col-xs-12 content-header">
+		<div class="col-sm-2 col-12 content-header">
 			[[admin/admin:settings-header-contents]]
 		</div>
-		<div class="col-sm-10 col-xs-12">
+		<div class="col-sm-10 col-12">
 			<nav class="section-content">
 				<ul></ul>
 			</nav>
diff --git a/src/views/admin/partials/temporary-ban.tpl b/src/views/admin/partials/temporary-ban.tpl
index 5a3fdc9c62..c437aa0d5c 100644
--- a/src/views/admin/partials/temporary-ban.tpl
+++ b/src/views/admin/partials/temporary-ban.tpl
@@ -1,12 +1,12 @@
 <form class="form">
 	<div class="row">
-		<div class="col-xs-4">
+		<div class="col-4">
 			<div class="form-group">
 				<label for="length">[[admin/manage/users:temp-ban.length]]</label>
 				<input class="form-control" id="length" name="length" type="number" min="0" value="1" />
 			</div>
 		</div>
-		<div class="col-xs-8">
+		<div class="col-8">
 			<div class="form-group">
 				<label for="reason">[[admin/manage/users:temp-ban.reason]]</label>
 				<input type="text" class="form-control" id="reason" name="reason" />
diff --git a/src/views/admin/partials/temporary-mute.tpl b/src/views/admin/partials/temporary-mute.tpl
index 31bcd631f3..01864acfc6 100644
--- a/src/views/admin/partials/temporary-mute.tpl
+++ b/src/views/admin/partials/temporary-mute.tpl
@@ -1,12 +1,12 @@
 <form class="form">
 	<div class="row">
-		<div class="col-xs-4">
+		<div class="col-4">
 			<div class="form-group">
 				<label for="length">[[admin/manage/users:temp-ban.length]]</label>
 				<input class="form-control" id="length" name="length" type="number" min="0" value="1" />
 			</div>
 		</div>
-		<div class="col-xs-8">
+		<div class="col-8">
 			<div class="form-group">
 				<label for="reason">[[admin/manage/users:temp-ban.reason]]</label>
 				<input type="text" class="form-control" id="reason" name="reason" />
diff --git a/src/views/admin/settings/sockets.tpl b/src/views/admin/settings/sockets.tpl
index a5810276b5..6ee7a2bf1f 100644
--- a/src/views/admin/settings/sockets.tpl
+++ b/src/views/admin/settings/sockets.tpl
@@ -1,8 +1,8 @@
 <!-- IMPORT admin/partials/settings/header.tpl -->
 
 <div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/sockets:reconnection]]</div>
-	<div class="col-sm-10 col-xs-12">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/sockets:reconnection]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
 			<div class="form-group">
 				<label for="maxReconnectionAttempts">[[admin/settings/sockets:max-attempts]]</label>
diff --git a/src/views/admin/settings/tags.tpl b/src/views/admin/settings/tags.tpl
index 6e8fb5096f..6c9eb9e6ac 100644
--- a/src/views/admin/settings/tags.tpl
+++ b/src/views/admin/settings/tags.tpl
@@ -38,8 +38,8 @@
 </div>
 
 <div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/tags:related-topics]]</div>
-	<div class="col-sm-10 col-xs-12">
+	<div class="col-sm-2 col-12 settings-header">[[admin/settings/tags:related-topics]]</div>
+	<div class="col-sm-10 col-12">
 		<form>
 			<div class="mb-3">
 				<label class="form-label" for="maximumRelatedTopics">[[admin/settings/tags:max-related-topics]]</label>
diff --git a/src/views/install/index.tpl b/src/views/install/index.tpl
index 17657b41cd..631ddf6285 100644
--- a/src/views/install/index.tpl
+++ b/src/views/install/index.tpl
@@ -41,7 +41,7 @@
 				</p>
 
 				<div class="row input-row">
-					<div class="col-sm-7 col-xs-12 input-field">
+					<div class="col-sm-7 col-12 input-field">
 						<label for="install:url">Web Address (URL)</label>
 						<input id="install:url" type="text" class="form-control" name="url" value="<!-- IF url -->{url}<!-- ENDIF url -->" placeholder="http://localhost:4567" />
 					</div>
@@ -56,28 +56,28 @@
 				</p>
 
 				<div class="row input-row">
-					<div class="col-sm-7 col-xs-12 input-field">
+					<div class="col-sm-7 col-12 input-field">
 						<label for="admin:username">Username</label>
 						<input id="admin:username" type="text" class="form-control" name="admin:username" value="<!-- IF admin:username -->{admin:username}<!-- ENDIF admin:username -->" placeholder="Username" />
 					</div>
 					<div class="col-sm-5 help-text" data-help="Enter an <strong>alphanumeric username</strong>. Spaces between words are allowed. You can always change your username later on your profile page."></div>
 				</div>
 				<div class="row input-row">
-					<div class="col-sm-7 col-xs-12 input-field">
+					<div class="col-sm-7 col-12 input-field">
 						<label for="admin:email">Email Address</label>
 						<input id="admin:email" type="text" class="form-control" name="admin:email" value="<!-- IF admin:email -->{admin:email}<!-- ENDIF admin:email -->" placeholder="Email Address" />
 					</div>
 					<div class="col-sm-5 help-text" data-help="Please enter your email address."></div>
 				</div>
 				<div class="row input-row">
-					<div class="col-sm-7 col-xs-12 input-field">
+					<div class="col-sm-7 col-12 input-field">
 						<label for="admin:password">Password</label>
 						<input id="admin:password" type="password" class="form-control" name="admin:password" value="<!-- IF admin:password -->{admin:password}<!-- ENDIF admin:password -->" placeholder="Password" data-minimum-strength="{minimumPasswordStrength}" data-minimum-length="{minimumPasswordLength}" />
 					</div>
 					<div class="col-sm-5 help-text" data-help="Use a combination of numbers, symbols, and different cases. You can change the strictness of password creation in the Admin Control Panel. Minimum {minimumPasswordLength} characters."></div>
 				</div>
 				<div class="row input-row">
-					<div class="col-sm-7 col-xs-12 input-field">
+					<div class="col-sm-7 col-12 input-field">
 						<label for="admin:passwordConfirm">Confirm Password</label>
 						<input id="admin:passwordConfirm" type="password" class="form-control" name="admin:passwordConfirm" value="<!-- IF admin:passwordConfirm -->{admin:passwordConfirm}<!-- ENDIF admin:passwordConfirm -->" placeholder="Confirm Password" />
 					</div>
@@ -97,7 +97,7 @@
 				</p>
 
 				<div class="row input-row">
-					<div class="col-sm-7 col-xs-12 input-field">
+					<div class="col-sm-7 col-12 input-field">
 						<label for="install:database">Database Type</label>
 						<select id="install:database" class="form-control" name="database">
 							<option value="mongo">MongoDB</option>
@@ -138,7 +138,7 @@
 		<div data-database="{databases.name}">
 			 {{{ each databases.questions }}}
 				<div class="row input-row">
-					<div class="col-sm-7 col-xs-12 input-field">
+					<div class="col-sm-7 col-12 input-field">
 						<label for="{databases.questions.name}">{databases.questions.description}</label>
 						<input id="{databases.questions.name}" type="<!-- IF hidden -->password<!-- ELSE -->text<!-- ENDIF hidden -->" class="form-control" name="{databases.questions.name}" placeholder="{databases.questions.default}" value="{databases.questions.default}" />
 					</div>