diff --git a/views/about.blade.php b/views/about.blade.php
index 30aa8fff..dea55f33 100644
--- a/views/about.blade.php
+++ b/views/about.blade.php
@@ -5,7 +5,7 @@
 
 @section('content')
 <div class="row">
-	<div class="col-xs-12 col-md-6 text-center">
+	<div class="col-12 col-md-6 text-center">
 		<h2 class="title">@yield('title')</h2>
 
 		<ul class="nav nav-tabs justify-content-center mt-3">
diff --git a/views/barcodescannertesting.blade.php b/views/barcodescannertesting.blade.php
index b03b7d34..581263d9 100644
--- a/views/barcodescannertesting.blade.php
+++ b/views/barcodescannertesting.blade.php
@@ -19,7 +19,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 
 		<form id="barcodescannertesting-form"
 			novalidate>
diff --git a/views/batteries.blade.php b/views/batteries.blade.php
index 551984cb..89b15260 100644
--- a/views/batteries.blade.php
+++ b/views/batteries.blade.php
@@ -42,7 +42,7 @@
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
@@ -53,7 +53,7 @@
 				placeholder="{{ $__t('Search') }}">
 		</div>
 	</div>
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="form-check custom-control custom-checkbox">
 			<input class="form-check-input custom-control-input"
 				type="checkbox"
diff --git a/views/batteriesjournal.blade.php b/views/batteriesjournal.blade.php
index 0e96eacb..0d5d2f8b 100644
--- a/views/batteriesjournal.blade.php
+++ b/views/batteriesjournal.blade.php
@@ -23,7 +23,7 @@
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
@@ -34,7 +34,7 @@
 				placeholder="{{ $__t('Search') }}">
 		</div>
 	</div>
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Battery') }}</span>
diff --git a/views/batteriesoverview.blade.php b/views/batteriesoverview.blade.php
index eb61e236..729e65a1 100644
--- a/views/batteriesoverview.blade.php
+++ b/views/batteriesoverview.blade.php
@@ -55,7 +55,7 @@
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
@@ -66,7 +66,7 @@
 				placeholder="{{ $__t('Search') }}">
 		</div>
 	</div>
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Status') }}</span>
diff --git a/views/batteriessettings.blade.php b/views/batteriessettings.blade.php
index a9c4838a..3ea2a2a5 100644
--- a/views/batteriessettings.blade.php
+++ b/views/batteriessettings.blade.php
@@ -14,7 +14,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<h4 class="mt-2">{{ $__t('Batteries overview') }}</h4>
 		@include('components.numberpicker', array(
 		'id' => 'batteries_due_soon_days',
diff --git a/views/batteryform.blade.php b/views/batteryform.blade.php
index c145893d..3d679a3e 100644
--- a/views/batteryform.blade.php
+++ b/views/batteryform.blade.php
@@ -18,7 +18,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 
 		<script>
 			Grocy.EditMode = '{{ $mode }}';
diff --git a/views/batterytracking.blade.php b/views/batterytracking.blade.php
index 81bedba5..67ef03cd 100644
--- a/views/batterytracking.blade.php
+++ b/views/batterytracking.blade.php
@@ -6,7 +6,7 @@
 
 @section('content')
 <div class="row">
-	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
+	<div class="col-12 col-md-6 col-xl-4 pb-3">
 		<h2 class="title">@yield('title')</h2>
 
 		<hr class="my-2">
@@ -44,7 +44,7 @@
 		</form>
 	</div>
 
-	<div class="col-xs-12 col-md-6 col-xl-4">
+	<div class="col-12 col-md-6 col-xl-4">
 		@include('components.batterycard')
 	</div>
 </div>
diff --git a/views/choreform.blade.php b/views/choreform.blade.php
index a517d2dc..02a23722 100644
--- a/views/choreform.blade.php
+++ b/views/choreform.blade.php
@@ -18,7 +18,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<script>
 			Grocy.EditMode = '{{ $mode }}';
 		</script>
diff --git a/views/chores.blade.php b/views/chores.blade.php
index f85f02bb..25ee3ccb 100644
--- a/views/chores.blade.php
+++ b/views/chores.blade.php
@@ -42,7 +42,7 @@
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
@@ -53,7 +53,7 @@
 				placeholder="{{ $__t('Search') }}">
 		</div>
 	</div>
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="form-check custom-control custom-checkbox">
 			<input class="form-check-input custom-control-input"
 				type="checkbox"
diff --git a/views/choresjournal.blade.php b/views/choresjournal.blade.php
index 717783fc..714c688c 100644
--- a/views/choresjournal.blade.php
+++ b/views/choresjournal.blade.php
@@ -23,7 +23,7 @@
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
@@ -34,7 +34,7 @@
 				placeholder="{{ $__t('Search') }}">
 		</div>
 	</div>
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Chore') }}</span>
diff --git a/views/choresoverview.blade.php b/views/choresoverview.blade.php
index a64c5133..82b36ef0 100644
--- a/views/choresoverview.blade.php
+++ b/views/choresoverview.blade.php
@@ -60,7 +60,7 @@
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
@@ -71,7 +71,7 @@
 				placeholder="{{ $__t('Search') }}">
 		</div>
 	</div>
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Status') }}</span>
@@ -85,7 +85,7 @@
 		</div>
 	</div>
 	@if(GROCY_FEATURE_FLAG_CHORES_ASSIGNMENTS)
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Assignment') }}</span>
diff --git a/views/choressettings.blade.php b/views/choressettings.blade.php
index 70eac032..339e4b02 100644
--- a/views/choressettings.blade.php
+++ b/views/choressettings.blade.php
@@ -14,7 +14,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<h4 class="mt-2">{{ $__t('Chores overview') }}</h4>
 		@include('components.numberpicker', array(
 		'id' => 'chores_due_soon_days',
diff --git a/views/choretracking.blade.php b/views/choretracking.blade.php
index 7c68fa08..400a2b27 100644
--- a/views/choretracking.blade.php
+++ b/views/choretracking.blade.php
@@ -6,7 +6,7 @@
 
 @section('content')
 <div class="row">
-	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
+	<div class="col-12 col-md-6 col-xl-4 pb-3">
 		<h2 class="title">@yield('title')</h2>
 
 		<hr class="my-2">
@@ -58,7 +58,7 @@
 		</form>
 	</div>
 
-	<div class="col-xs-12 col-md-6 col-xl-4">
+	<div class="col-12 col-md-6 col-xl-4">
 		@include('components.chorecard')
 	</div>
 </div>
diff --git a/views/components/barcodescanner.blade.php b/views/components/barcodescanner.blade.php
index e4364f95..cd18a70c 100644
--- a/views/components/barcodescanner.blade.php
+++ b/views/components/barcodescanner.blade.php
@@ -25,4 +25,4 @@
 </style>
 @endpush
 
-@endif
\ No newline at end of file
+@endif
diff --git a/views/components/productamountpicker.blade.php b/views/components/productamountpicker.blade.php
index 0736454c..276d769b 100644
--- a/views/components/productamountpicker.blade.php
+++ b/views/components/productamountpicker.blade.php
@@ -21,13 +21,13 @@
 			'min' => $DEFAULT_MIN_AMOUNT,
 			'decimals' => $userSettings['stock_decimal_places_amounts'],
 			'value' => $value,
-			'additionalGroupCssClasses' => 'col-sm-5 col-xs-12 my-0',
+			'additionalGroupCssClasses' => 'col-sm-5 col-12 my-0',
 			'additionalCssClasses' => 'input-group-productamountpicker locale-number-input locale-number-quantity-amount',
 			'additionalHtmlContextHelp' => '',
 			'additionalHtmlElements' => ''
 			))
 
-			<div class="col-sm-7 col-xs-12">
+			<div class="col-sm-7 col-12">
 				<label for="qu_id">{{ $__t('Quantity unit') }}</label>
 				<select @if($isRequired)
 					required
diff --git a/views/components/productcard.blade.php b/views/components/productcard.blade.php
index a6f5e82b..f159af70 100644
--- a/views/components/productcard.blade.php
+++ b/views/components/productcard.blade.php
@@ -68,4 +68,4 @@
 			class="font-italic d-none">{{ $__t('No price history available') }}</span>
 		@endif
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/views/consume.blade.php b/views/consume.blade.php
index 152afe24..47ad29f3 100644
--- a/views/consume.blade.php
+++ b/views/consume.blade.php
@@ -16,7 +16,7 @@
 </script>
 
 <div class="row">
-	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
+	<div class="col-12 col-md-6 col-xl-4 pb-3">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
 			<button class="btn btn-outline-dark d-md-none mt-2 float-right order-1 order-md-3 hide-when-embedded"
@@ -147,7 +147,7 @@
 		</form>
 	</div>
 
-	<div class="col-xs-12 col-md-6 col-xl-4 hide-when-embedded">
+	<div class="col-12 col-md-6 col-xl-4 hide-when-embedded">
 		@include('components.productcard')
 	</div>
 </div>
diff --git a/views/equipment.blade.php b/views/equipment.blade.php
index ae0067bf..161d801f 100644
--- a/views/equipment.blade.php
+++ b/views/equipment.blade.php
@@ -6,7 +6,7 @@
 
 @section('content')
 <div class="row">
-	<div class="col-xs-12 col-md-4 pb-3">
+	<div class="col-12 col-md-4 pb-3">
 		<div class="title-related-links border-bottom mb-2 py-1">
 			<h2 class="title">@yield('title')</h2>
 			<div class="float-right">
@@ -109,7 +109,7 @@
 		</table>
 	</div>
 
-	<div class="col-xs-12 col-md-8">
+	<div class="col-12 col-md-8">
 		<ul class="nav nav-tabs grocy-tabs">
 			<li class="nav-item">
 				<a class="nav-link active"
diff --git a/views/equipmentform.blade.php b/views/equipmentform.blade.php
index 522cf8b1..fb8a235a 100644
--- a/views/equipmentform.blade.php
+++ b/views/equipmentform.blade.php
@@ -18,7 +18,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<script>
 			Grocy.EditMode = '{{ $mode }}';
 		</script>
@@ -67,7 +67,7 @@
 		</form>
 	</div>
 
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<div class="row">
 			<div class="col">
 				<div class="title-related-links mb-3">
diff --git a/views/inventory.blade.php b/views/inventory.blade.php
index 5c33f19b..0f639a4d 100644
--- a/views/inventory.blade.php
+++ b/views/inventory.blade.php
@@ -12,7 +12,7 @@
 </script>
 
 <div class="row">
-	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
+	<div class="col-12 col-md-6 col-xl-4 pb-3">
 		<h2 class="title">@yield('title')</h2>
 
 		<hr class="my-2">
@@ -117,7 +117,7 @@
 		</form>
 	</div>
 
-	<div class="col-xs-12 col-md-6 col-xl-4 hide-when-embedded">
+	<div class="col-12 col-md-6 col-xl-4 hide-when-embedded">
 		@include('components.productcard')
 	</div>
 </div>
diff --git a/views/locationform.blade.php b/views/locationform.blade.php
index 88759632..026a8eb9 100644
--- a/views/locationform.blade.php
+++ b/views/locationform.blade.php
@@ -18,7 +18,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<script>
 			Grocy.EditMode = '{{ $mode }}';
 		</script>
diff --git a/views/locations.blade.php b/views/locations.blade.php
index c71b7c3d..3a088465 100644
--- a/views/locations.blade.php
+++ b/views/locations.blade.php
@@ -42,7 +42,7 @@
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
diff --git a/views/login.blade.php b/views/login.blade.php
index 0ddc9c68..a42af798 100644
--- a/views/login.blade.php
+++ b/views/login.blade.php
@@ -5,7 +5,7 @@
 
 @section('content')
 <div class="row">
-	<div class="col-lg-6 offset-lg-3 col-xs-12">
+	<div class="col-lg-6 offset-lg-3 col-12">
 		<h2 class="text-center">@yield('title')</h2>
 
 		<hr class="my-2">
diff --git a/views/manageapikeys.blade.php b/views/manageapikeys.blade.php
index 84169a59..6c5f2e80 100644
--- a/views/manageapikeys.blade.php
+++ b/views/manageapikeys.blade.php
@@ -47,7 +47,7 @@
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
diff --git a/views/productbarcodeform.blade.php b/views/productbarcodeform.blade.php
index 3089b9bc..2ac5dbf2 100644
--- a/views/productbarcodeform.blade.php
+++ b/views/productbarcodeform.blade.php
@@ -28,7 +28,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 
 		<script>
 			Grocy.EditMode = '{{ $mode }}';
diff --git a/views/productform.blade.php b/views/productform.blade.php
index 0ec74462..23bbf6bd 100644
--- a/views/productform.blade.php
+++ b/views/productform.blade.php
@@ -18,7 +18,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<script>
 			Grocy.EditMode = '{{ $mode }}';
 		</script>
@@ -476,7 +476,7 @@
 
 	</div>
 
-	<div class="col-lg-6 col-xs-12 @if($mode == 'create') d-none @endif">
+	<div class="col-lg-6 col-12 @if($mode == 'create') d-none @endif">
 
 		<div class="row @if(!GROCY_FEATURE_FLAG_STOCK) d-none @endif">
 			<div class="col">
diff --git a/views/productgroupform.blade.php b/views/productgroupform.blade.php
index 70370284..0234f68a 100644
--- a/views/productgroupform.blade.php
+++ b/views/productgroupform.blade.php
@@ -18,7 +18,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<script>
 			Grocy.EditMode = '{{ $mode }}';
 		</script>
diff --git a/views/productgroups.blade.php b/views/productgroups.blade.php
index 53c9de16..33085998 100644
--- a/views/productgroups.blade.php
+++ b/views/productgroups.blade.php
@@ -42,7 +42,7 @@
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group mb-3">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
diff --git a/views/products.blade.php b/views/products.blade.php
index 22283303..c2f5e01e 100644
--- a/views/products.blade.php
+++ b/views/products.blade.php
@@ -46,7 +46,7 @@
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
@@ -57,7 +57,7 @@
 				placeholder="{{ $__t('Search') }}">
 		</div>
 	</div>
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Product group') }}</span>
@@ -71,7 +71,7 @@
 			</select>
 		</div>
 	</div>
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="form-check custom-control custom-checkbox">
 			<input class="form-check-input custom-control-input"
 				type="checkbox"
diff --git a/views/purchase.blade.php b/views/purchase.blade.php
index 8a0e1f82..0a9e7115 100644
--- a/views/purchase.blade.php
+++ b/views/purchase.blade.php
@@ -16,7 +16,7 @@
 </script>
 
 <div class="row">
-	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
+	<div class="col-12 col-md-6 col-xl-4 pb-3">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
 			<button class="btn btn-outline-dark d-md-none mt-2 float-right order-1 order-md-3 hide-when-embedded"
@@ -169,7 +169,7 @@
 		</form>
 	</div>
 
-	<div class="col-xs-12 col-md-6 col-xl-4 hide-when-embedded">
+	<div class="col-12 col-md-6 col-xl-4 hide-when-embedded">
 		@include('components.productcard')
 	</div>
 </div>
diff --git a/views/quantityunitconversionform.blade.php b/views/quantityunitconversionform.blade.php
index 5d4a0193..025c2886 100644
--- a/views/quantityunitconversionform.blade.php
+++ b/views/quantityunitconversionform.blade.php
@@ -27,7 +27,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 
 		<script>
 			Grocy.EditMode = '{{ $mode }}';
diff --git a/views/quantityunitform.blade.php b/views/quantityunitform.blade.php
index 0aae953e..e30c8492 100644
--- a/views/quantityunitform.blade.php
+++ b/views/quantityunitform.blade.php
@@ -18,7 +18,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<script>
 			Grocy.EditMode = '{{ $mode }}';
 		</script>
@@ -97,7 +97,7 @@
 		</form>
 	</div>
 
-	<div class="col-lg-6 col-xs-12 @if($mode == 'create') d-none @endif">
+	<div class="col-lg-6 col-12 @if($mode == 'create') d-none @endif">
 		<div class="row">
 			<div class="col">
 				<div class="title-related-links">
diff --git a/views/quantityunitpluraltesting.blade.php b/views/quantityunitpluraltesting.blade.php
index 84577500..9112729d 100644
--- a/views/quantityunitpluraltesting.blade.php
+++ b/views/quantityunitpluraltesting.blade.php
@@ -19,7 +19,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<form id="quantityunitpluraltesting-form"
 			novalidate>
 
diff --git a/views/quantityunits.blade.php b/views/quantityunits.blade.php
index 8386c97d..8f676110 100644
--- a/views/quantityunits.blade.php
+++ b/views/quantityunits.blade.php
@@ -42,7 +42,7 @@
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
diff --git a/views/recipeform.blade.php b/views/recipeform.blade.php
index a1862f7e..c272383b 100644
--- a/views/recipeform.blade.php
+++ b/views/recipeform.blade.php
@@ -36,7 +36,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-xs-12 col-md-7 pb-3">
+	<div class="col-12 col-md-7 pb-3">
 		<form id="recipe-form"
 			novalidate>
 
@@ -108,7 +108,7 @@
 		</form>
 	</div>
 
-	<div class="col-xs-12 col-md-5 pb-3 @if($mode == 'create') d-none @endif">
+	<div class="col-12 col-md-5 pb-3 @if($mode == 'create') d-none @endif">
 		<div class="row">
 			<div class="col">
 				<div class="title-related-links">
diff --git a/views/recipeposform.blade.php b/views/recipeposform.blade.php
index 187ddae9..d6e5f091 100644
--- a/views/recipeposform.blade.php
+++ b/views/recipeposform.blade.php
@@ -27,7 +27,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-xs-12 col-md-6 col-xl-5 pb-3">
+	<div class="col-12 col-md-6 col-xl-5 pb-3">
 		<script>
 			Grocy.EditMode = '{{ $mode }}';
 			Grocy.EditObjectParentId = {{ $recipe->id }};
@@ -136,7 +136,7 @@
 		</form>
 	</div>
 
-	<div class="col-xs-12 col-md-6 col-xl-4 hide-when-embedded">
+	<div class="col-12 col-md-6 col-xl-4 hide-when-embedded">
 		@include('components.productcard')
 	</div>
 </div>
diff --git a/views/recipes.blade.php b/views/recipes.blade.php
index 3b46c0f0..443bdd66 100644
--- a/views/recipes.blade.php
+++ b/views/recipes.blade.php
@@ -11,7 +11,7 @@
 </script>
 
 <div class="row">
-	<div class="col-xs-12 col-md-6 d-print-none">
+	<div class="col-12 col-md-6 d-print-none">
 		<div class="title-related-links border-bottom mb-2 py-1">
 			<h2 class="title">@yield('title')</h2>
 			<div class="float-right">
@@ -39,7 +39,7 @@
 
 		<div class="row collapse d-md-flex"
 			id="table-filter-row">
-			<div class="col-xs-12 col-md-5 col-xl-5">
+			<div class="col-12 col-md-5 col-xl-5">
 				<div class="input-group">
 					<div class="input-group-prepend">
 						<span class="input-group-text"><i class="fas fa-search"></i></span>
@@ -51,7 +51,7 @@
 				</div>
 			</div>
 
-			<div class="col-xs-12 col-md-5 col-xl-5">
+			<div class="col-12 col-md-5 col-xl-5">
 				<div class="input-group">
 					<div class="input-group-prepend">
 						<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Status') }}</span>
@@ -205,7 +205,7 @@
 	$allRecipes = $selectedRecipeSubRecipes;
 	array_unshift($allRecipes, $selectedRecipe);
 	@endphp
-	<div class="col-xs-12 col-md-6 print-view">
+	<div class="col-12 col-md-6 print-view">
 		<div id="selectedRecipeCard"
 			class="card grocy-card">
 			@if(count($allRecipes) > 1)
diff --git a/views/recipessettings.blade.php b/views/recipessettings.blade.php
index 9d0e83ff..1303dcf5 100644
--- a/views/recipessettings.blade.php
+++ b/views/recipessettings.blade.php
@@ -14,7 +14,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<h4 class="mt-2">{{ $__t('Recipe card') }}</h4>
 		<div class="form-group">
 			<div class="custom-control custom-checkbox">
diff --git a/views/shoppinglist.blade.php b/views/shoppinglist.blade.php
index 22d1123c..bcaebf7b 100644
--- a/views/shoppinglist.blade.php
+++ b/views/shoppinglist.blade.php
@@ -110,7 +110,7 @@
 
 <div class="row collapse d-md-flex d-print-none hide-on-fullscreen-card"
 	id="table-filter-row">
-	<div class="col-xs-12 col-md-5">
+	<div class="col-12 col-md-5">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
@@ -121,7 +121,7 @@
 				placeholder="{{ $__t('Search') }}">
 		</div>
 	</div>
-	<div class="col-xs-12 col-md-4 col-lg-5">
+	<div class="col-12 col-md-4 col-lg-5">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Status') }}</span>
@@ -148,7 +148,7 @@
 
 <div id="shoppinglist-main"
 	class="row d-print-none">
-	<div class="@if(boolval($userSettings['shopping_list_show_calendar'])) col-xs-12 col-md-8 @else col-12 @endif pb-3">
+	<div class="@if(boolval($userSettings['shopping_list_show_calendar'])) col-12 col-md-8 @else col-12 @endif pb-3">
 		<table id="shoppinglist-table"
 			class="table table-sm table-striped nowrap w-100">
 			<thead>
@@ -275,12 +275,12 @@
 	</div>
 
 	@if(boolval($userSettings['shopping_list_show_calendar']))
-	<div class="col-xs-12 col-md-4 mt-md-2 d-print-none">
+	<div class="col-12 col-md-4 mt-md-2 d-print-none">
 		@include('components.calendarcard')
 	</div>
 	@endif
 
-	<div class="@if(boolval($userSettings['shopping_list_show_calendar'])) col-xs-12 col-md-8 @else col-12 @endif d-print-none pt-2">
+	<div class="@if(boolval($userSettings['shopping_list_show_calendar'])) col-12 col-md-8 @else col-12 @endif d-print-none pt-2">
 		<div class="form-group">
 			<label class="text-larger font-weight-bold"
 				for="notes">{{ $__t('Notes') }}</label>
diff --git a/views/shoppinglistform.blade.php b/views/shoppinglistform.blade.php
index b807067d..fced868c 100644
--- a/views/shoppinglistform.blade.php
+++ b/views/shoppinglistform.blade.php
@@ -18,7 +18,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<script>
 			Grocy.EditMode = '{{ $mode }}';
 		</script>
diff --git a/views/shoppinglistitemform.blade.php b/views/shoppinglistitemform.blade.php
index 8d1b87d8..8d84b32d 100644
--- a/views/shoppinglistitemform.blade.php
+++ b/views/shoppinglistitemform.blade.php
@@ -23,7 +23,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
+	<div class="col-12 col-md-6 col-xl-4 pb-3">
 		<script>
 			Grocy.EditMode = '{{ $mode }}';
 		</script>
diff --git a/views/shoppinglistsettings.blade.php b/views/shoppinglistsettings.blade.php
index 7eb5b2c9..ebdc3166 100644
--- a/views/shoppinglistsettings.blade.php
+++ b/views/shoppinglistsettings.blade.php
@@ -14,7 +14,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<h4 class="mt-2">{{ $__t('Shopping list') }}</h4>
 		<div class="form-group">
 			<div class="custom-control custom-checkbox">
diff --git a/views/shoppinglocationform.blade.php b/views/shoppinglocationform.blade.php
index a47b2ba8..0c7aa4ac 100644
--- a/views/shoppinglocationform.blade.php
+++ b/views/shoppinglocationform.blade.php
@@ -18,7 +18,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<script>
 			Grocy.EditMode = '{{ $mode }}';
 		</script>
diff --git a/views/shoppinglocations.blade.php b/views/shoppinglocations.blade.php
index 6306f565..24084285 100644
--- a/views/shoppinglocations.blade.php
+++ b/views/shoppinglocations.blade.php
@@ -42,7 +42,7 @@
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
diff --git a/views/stockentries.blade.php b/views/stockentries.blade.php
index d8cd4b59..f3be05fd 100644
--- a/views/stockentries.blade.php
+++ b/views/stockentries.blade.php
@@ -31,7 +31,7 @@
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		@include('components.productpicker', array(
 		'products' => $products,
 		'disallowAllProductWorkflows' => true,
diff --git a/views/stockentryform.blade.php b/views/stockentryform.blade.php
index e92eba13..c3f4c8ea 100644
--- a/views/stockentryform.blade.php
+++ b/views/stockentryform.blade.php
@@ -18,7 +18,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
+	<div class="col-12 col-md-6 col-xl-4 pb-3">
 
 		<form id="stockentry-form"
 			novalidate>
diff --git a/views/stockentrylabel.blade.php b/views/stockentrylabel.blade.php
index cf126361..036c198c 100644
--- a/views/stockentrylabel.blade.php
+++ b/views/stockentrylabel.blade.php
@@ -37,4 +37,4 @@
 	</p>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/views/stockjournal.blade.php b/views/stockjournal.blade.php
index 284d09d6..61c38eb7 100644
--- a/views/stockjournal.blade.php
+++ b/views/stockjournal.blade.php
@@ -34,7 +34,7 @@
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">
-	<div class="col-xs-12 col-md-6 col-xl-2">
+	<div class="col-12 col-md-6 col-xl-2">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
@@ -45,7 +45,7 @@
 				placeholder="{{ $__t('Search') }}">
 		</div>
 	</div>
-	<div class="col-xs-12 col-md-6 col-xl-2">
+	<div class="col-12 col-md-6 col-xl-2">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Product') }}</span>
@@ -59,7 +59,7 @@
 			</select>
 		</div>
 	</div>
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Transaction type') }}</span>
@@ -73,7 +73,7 @@
 			</select>
 		</div>
 	</div>
-	<div class="col-xs-12 col-md-6 col-xl-2">
+	<div class="col-12 col-md-6 col-xl-2">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Location') }}</span>
@@ -87,7 +87,7 @@
 			</select>
 		</div>
 	</div>
-	<div class="col-xs-12 col-md-6 col-xl-2">
+	<div class="col-12 col-md-6 col-xl-2">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('User') }}</span>
diff --git a/views/stockjournalsummary.blade.php b/views/stockjournalsummary.blade.php
index f1b0726b..3c6d6ef1 100644
--- a/views/stockjournalsummary.blade.php
+++ b/views/stockjournalsummary.blade.php
@@ -23,7 +23,7 @@
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">
-	<div class="col-xs-12 col-md-6 col-xl-2">
+	<div class="col-12 col-md-6 col-xl-2">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
@@ -34,7 +34,7 @@
 				placeholder="{{ $__t('Search') }}">
 		</div>
 	</div>
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Product') }}</span>
@@ -48,7 +48,7 @@
 			</select>
 		</div>
 	</div>
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Transaction type') }}</span>
@@ -62,7 +62,7 @@
 			</select>
 		</div>
 	</div>
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('User') }}</span>
diff --git a/views/stockoverview.blade.php b/views/stockoverview.blade.php
index 3458f897..e7f8510d 100755
--- a/views/stockoverview.blade.php
+++ b/views/stockoverview.blade.php
@@ -82,7 +82,7 @@
 </div>
 <div class="row collapse d-md-flex"
 	id="table-filter-row">
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
@@ -94,7 +94,7 @@
 		</div>
 	</div>
 	@if(GROCY_FEATURE_FLAG_STOCK_LOCATION_TRACKING)
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Location') }}</span>
@@ -109,7 +109,7 @@
 		</div>
 	</div>
 	@endif
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Product group') }}</span>
@@ -123,7 +123,7 @@
 			</select>
 		</div>
 	</div>
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Status') }}</span>
diff --git a/views/stocksettings.blade.php b/views/stocksettings.blade.php
index 697e798f..7e95c8ae 100644
--- a/views/stocksettings.blade.php
+++ b/views/stocksettings.blade.php
@@ -14,7 +14,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<div id="productpresets">
 			<h4>{{ $__t('Presets for new products') }}</h4>
 
diff --git a/views/taskcategories.blade.php b/views/taskcategories.blade.php
index 96dcab79..af31c9f0 100644
--- a/views/taskcategories.blade.php
+++ b/views/taskcategories.blade.php
@@ -42,7 +42,7 @@
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
diff --git a/views/taskcategoryform.blade.php b/views/taskcategoryform.blade.php
index 3e96afc9..127f13f4 100644
--- a/views/taskcategoryform.blade.php
+++ b/views/taskcategoryform.blade.php
@@ -18,7 +18,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<script>
 			Grocy.EditMode = '{{ $mode }}';
 		</script>
diff --git a/views/taskform.blade.php b/views/taskform.blade.php
index 8b0937c1..1e38b99d 100644
--- a/views/taskform.blade.php
+++ b/views/taskform.blade.php
@@ -18,7 +18,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<script>
 			Grocy.EditMode = '{{ $mode }}';
 		</script>
diff --git a/views/tasks.blade.php b/views/tasks.blade.php
index d62b1009..f162aea3 100644
--- a/views/tasks.blade.php
+++ b/views/tasks.blade.php
@@ -55,7 +55,7 @@
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
@@ -66,7 +66,7 @@
 				placeholder="{{ $__t('Search') }}">
 		</div>
 	</div>
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Status') }}</span>
@@ -79,7 +79,7 @@
 			</select>
 		</div>
 	</div>
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="form-check custom-control custom-checkbox">
 			<input class="form-check-input custom-control-input"
 				type="checkbox"
diff --git a/views/taskssettings.blade.php b/views/taskssettings.blade.php
index 1d15ac15..043772cf 100644
--- a/views/taskssettings.blade.php
+++ b/views/taskssettings.blade.php
@@ -14,7 +14,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 
 		@include('components.numberpicker', array(
 		'id' => 'tasks_due_soon_days',
diff --git a/views/transfer.blade.php b/views/transfer.blade.php
index 16f6d2d4..b35be860 100644
--- a/views/transfer.blade.php
+++ b/views/transfer.blade.php
@@ -11,7 +11,7 @@
 </script>
 
 <div class="row">
-	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
+	<div class="col-12 col-md-6 col-xl-4 pb-3">
 		<h2 class="title">@yield('title')</h2>
 
 		<hr class="my-2">
@@ -90,7 +90,7 @@
 		</form>
 	</div>
 
-	<div class="col-xs-12 col-md-6 col-xl-4 hide-when-embedded">
+	<div class="col-12 col-md-6 col-xl-4 hide-when-embedded">
 		@include('components.productcard')
 	</div>
 </div>
diff --git a/views/userentities.blade.php b/views/userentities.blade.php
index 7eddb65b..7cf3c81b 100644
--- a/views/userentities.blade.php
+++ b/views/userentities.blade.php
@@ -38,7 +38,7 @@
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
diff --git a/views/userentityform.blade.php b/views/userentityform.blade.php
index e6079913..7f183db4 100644
--- a/views/userentityform.blade.php
+++ b/views/userentityform.blade.php
@@ -18,7 +18,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<script>
 			Grocy.EditMode = '{{ $mode }}';
 		</script>
diff --git a/views/userfieldform.blade.php b/views/userfieldform.blade.php
index b03d593a..cd47b182 100644
--- a/views/userfieldform.blade.php
+++ b/views/userfieldform.blade.php
@@ -18,7 +18,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<script>
 			Grocy.EditMode = '{{ $mode }}';
 		</script>
diff --git a/views/userfields.blade.php b/views/userfields.blade.php
index 98b706f8..1002b813 100644
--- a/views/userfields.blade.php
+++ b/views/userfields.blade.php
@@ -39,7 +39,7 @@
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
@@ -50,7 +50,7 @@
 				placeholder="{{ $__t('Search') }}">
 		</div>
 	</div>
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Entity') }}</span>
diff --git a/views/userform.blade.php b/views/userform.blade.php
index dac69d95..b3be676d 100644
--- a/views/userform.blade.php
+++ b/views/userform.blade.php
@@ -18,7 +18,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<script>
 			Grocy.EditMode = '{{ $mode }}';
 		</script>
@@ -95,7 +95,7 @@
 		</form>
 	</div>
 
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<div class="title-related-links">
 			<h4>
 				{{ $__t('Picture') }}
diff --git a/views/userobjectform.blade.php b/views/userobjectform.blade.php
index 61f3b583..424cbd32 100644
--- a/views/userobjectform.blade.php
+++ b/views/userobjectform.blade.php
@@ -18,7 +18,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<script>
 			Grocy.EditMode = '{{ $mode }}';
 			Grocy.EditObjectParentId = {{ $userentity->id }};
diff --git a/views/userobjects.blade.php b/views/userobjects.blade.php
index bfa2c0b7..df6593e1 100644
--- a/views/userobjects.blade.php
+++ b/views/userobjects.blade.php
@@ -47,7 +47,7 @@
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
diff --git a/views/users.blade.php b/views/users.blade.php
index ca573c75..761fcfed 100644
--- a/views/users.blade.php
+++ b/views/users.blade.php
@@ -42,7 +42,7 @@
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">
-	<div class="col-xs-12 col-md-6 col-xl-3">
+	<div class="col-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
diff --git a/views/usersettings.blade.php b/views/usersettings.blade.php
index 6f4bd66e..ca5061f6 100644
--- a/views/usersettings.blade.php
+++ b/views/usersettings.blade.php
@@ -14,7 +14,7 @@
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 
 		<div class="form-group">
 			<label for="locale">{{ $__t('Language') }}</label>