diff --git a/views/about.blade.php b/views/about.blade.php
index 45ccdd22..b6d625f1 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 441c0412..62eca9b0 100644
--- a/views/barcodescannertesting.blade.php
+++ b/views/barcodescannertesting.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">
 
 		<form id="barcodescannertesting-form"
 			novalidate>
diff --git a/views/batteries.blade.php b/views/batteries.blade.php
index 649cecdb..c082ff62 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 64fd6441..4a82b63e 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 d6f43e80..b1749ab1 100644
--- a/views/batteriesoverview.blade.php
+++ b/views/batteriesoverview.blade.php
@@ -50,7 +50,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>
@@ -61,7 +61,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 b6afeb01..51a82b9a 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 176b2328..e979263d 100644
--- a/views/batteryform.blade.php
+++ b/views/batteryform.blade.php
@@ -25,7 +25,7 @@ EditObjectId: {{ $battery->id }},
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<form id="battery-form"
 			novalidate>
 
diff --git a/views/batterytracking.blade.php b/views/batterytracking.blade.php
index 79696f21..577853c4 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 8aabeeca..8b66098d 100644
--- a/views/choreform.blade.php
+++ b/views/choreform.blade.php
@@ -25,7 +25,7 @@ EditObjectId: {{ $chore->id }},
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<form id="chore-form"
 			novalidate>
 
diff --git a/views/chores.blade.php b/views/chores.blade.php
index cf70eff5..ce490cf7 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 c5eada22..d97b8dd9 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 61e14b74..74a63aa7 100644
--- a/views/choresoverview.blade.php
+++ b/views/choresoverview.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>
@@ -80,7 +80,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 859ae8d3..0f542e53 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 f4aeb092..f075af4b 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/productamountpicker.blade.php b/views/components/productamountpicker.blade.php
index 9adec301..ffa86834 100644
--- a/views/components/productamountpicker.blade.php
+++ b/views/components/productamountpicker.blade.php
@@ -18,13 +18,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 3ca6e5bc..a0dcda7b 100644
--- a/views/components/productcard.blade.php
+++ b/views/components/productcard.blade.php
@@ -63,4 +63,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 27e00b18..d00e84d3 100644
--- a/views/consume.blade.php
+++ b/views/consume.blade.php
@@ -149,7 +149,7 @@ $classes = $embedded ? '' : 'col-md-6 col-xl-4';
 		</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 6afa8528..5d19c31b 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 07782e74..efb3cac3 100644
--- a/views/equipmentform.blade.php
+++ b/views/equipmentform.blade.php
@@ -28,7 +28,7 @@ InstructionManualFileNameName: '{{ $equipment->instruction_manual_file_name }}',
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<form id="equipment-form"
 			novalidate>
 
@@ -61,7 +61,7 @@ InstructionManualFileNameName: '{{ $equipment->instruction_manual_file_name }}',
 		</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 80416293..dacbdaf5 100644
--- a/views/inventory.blade.php
+++ b/views/inventory.blade.php
@@ -121,7 +121,7 @@ $classes = $embedded ? '' : 'col-md-6 col-xl-4';
 		</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 e6ac51d8..6910fb71 100644
--- a/views/locationform.blade.php
+++ b/views/locationform.blade.php
@@ -25,7 +25,7 @@ EditObjectId: {{ $location->id }},
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 
 		<form id="location-form"
 			novalidate>
diff --git a/views/locations.blade.php b/views/locations.blade.php
index 51f8465c..656961c4 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 11e4b590..d92fbc80 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 3323ec19..1c902ac6 100644
--- a/views/manageapikeys.blade.php
+++ b/views/manageapikeys.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/productbarcodeform.blade.php b/views/productbarcodeform.blade.php
index fe0d4d32..7f167b0e 100644
--- a/views/productbarcodeform.blade.php
+++ b/views/productbarcodeform.blade.php
@@ -34,7 +34,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="barcode-form"
 			novalidate>
 
diff --git a/views/productform.blade.php b/views/productform.blade.php
index 000c9e76..84f926e7 100644
--- a/views/productform.blade.php
+++ b/views/productform.blade.php
@@ -30,7 +30,7 @@ EditMode: '{{ $mode }}',
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<form id="product-form"
 			novalidate>
 
@@ -472,7 +472,7 @@ EditMode: '{{ $mode }}',
 
 	</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 a00e5392..8bf843b3 100644
--- a/views/productgroupform.blade.php
+++ b/views/productgroupform.blade.php
@@ -25,7 +25,7 @@ EditObjectId: {{ $group->id }},
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<form id="product-group-form"
 			novalidate>
 
diff --git a/views/productgroups.blade.php b/views/productgroups.blade.php
index 88ec1da5..19f7f734 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 798ad758..f782c6e2 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 e66cd69c..3195ac39 100644
--- a/views/purchase.blade.php
+++ b/views/purchase.blade.php
@@ -171,7 +171,7 @@ $classes = $embedded ? '' : 'col-md-6 col-xl-4';
 		</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 70aa9df2..0251878d 100644
--- a/views/quantityunitconversionform.blade.php
+++ b/views/quantityunitconversionform.blade.php
@@ -35,7 +35,7 @@ EditObjectId: {{ $quConversion->id }},
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<form id="quconversion-form"
 			novalidate>
 
diff --git a/views/quantityunitform.blade.php b/views/quantityunitform.blade.php
index 41ea0776..559b1680 100644
--- a/views/quantityunitform.blade.php
+++ b/views/quantityunitform.blade.php
@@ -25,7 +25,7 @@ GrocyConfig.EditObjectId: {{ $quantityUnit->id }},
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<form id="quantityunit-form"
 			novalidate>
 
@@ -94,7 +94,7 @@ GrocyConfig.EditObjectId: {{ $quantityUnit->id }},
 		</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 21880d7f..278ff913 100644
--- a/views/quantityunitpluraltesting.blade.php
+++ b/views/quantityunitpluraltesting.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">
 		<form id="quantityunitpluraltesting-form"
 			novalidate>
 
diff --git a/views/quantityunits.blade.php b/views/quantityunits.blade.php
index b4032ed1..1a67c184 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 35afb1f9..9dabacfe 100644
--- a/views/recipeform.blade.php
+++ b/views/recipeform.blade.php
@@ -33,7 +33,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>
 
@@ -105,7 +105,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 e30b6cca..adc39aea 100644
--- a/views/recipeposform.blade.php
+++ b/views/recipeposform.blade.php
@@ -40,7 +40,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">
 		<form id="recipe-pos-form"
 			novalidate>
 
@@ -135,7 +135,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 d48300c2..70ab8670 100644
--- a/views/recipes.blade.php
+++ b/views/recipes.blade.php
@@ -12,7 +12,7 @@
 @section('content')
 
 <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">
@@ -40,7 +40,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>
@@ -52,7 +52,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>
@@ -206,7 +206,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 3fe571f0..9384e1a4 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 7cb075ce..ae889397 100644
--- a/views/shoppinglist.blade.php
+++ b/views/shoppinglist.blade.php
@@ -100,7 +100,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>
@@ -111,7 +111,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>
@@ -138,7 +138,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>
@@ -265,12 +265,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 5f556600..37064da6 100644
--- a/views/shoppinglistform.blade.php
+++ b/views/shoppinglistform.blade.php
@@ -25,7 +25,7 @@ GrocyConfig.EditObjectId: {{ $shoppingList->id }},
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<form id="shopping-list-form"
 			novalidate>
 
diff --git a/views/shoppinglistitemform.blade.php b/views/shoppinglistitemform.blade.php
index 27b4bf48..c640d3fb 100644
--- a/views/shoppinglistitemform.blade.php
+++ b/views/shoppinglistitemform.blade.php
@@ -27,7 +27,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="shoppinglist-form"
 			novalidate>
diff --git a/views/shoppinglistsettings.blade.php b/views/shoppinglistsettings.blade.php
index 20ab46f0..0505d8fa 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 61f755f5..d931942a 100644
--- a/views/shoppinglocationform.blade.php
+++ b/views/shoppinglocationform.blade.php
@@ -25,7 +25,7 @@ EditObjectId: {{ $shoppinglocation->id }},
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<form id="shoppinglocation-form"
 			novalidate>
 
diff --git a/views/shoppinglocations.blade.php b/views/shoppinglocations.blade.php
index 9a5d6765..9d41e9bd 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 4ca207cb..5e0a4168 100644
--- a/views/stockentries.blade.php
+++ b/views/stockentries.blade.php
@@ -27,7 +27,7 @@ $collapsed_flex = $embedded ? '' : 'd-md-flex';
 
 <div class="row collapse {{ $collaped_flex }}"
 	id="stockentry-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 c967e2cc..fedf54c1 100644
--- a/views/stockentryform.blade.php
+++ b/views/stockentryform.blade.php
@@ -19,7 +19,7 @@ EditObjectProductId: {{ $stockEntry->product_id },
 <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 d7314b43..41d7c457 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 8ffff7f2..93857d4b 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 8f8e1298..198134d9 100755
--- a/views/stockoverview.blade.php
+++ b/views/stockoverview.blade.php
@@ -73,7 +73,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>
@@ -85,7 +85,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>
@@ -100,7 +100,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>
@@ -114,7 +114,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 917882f1..27710d8b 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 126ac1df..26389ec7 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 407d2d8f..345f1259 100644
--- a/views/taskcategoryform.blade.php
+++ b/views/taskcategoryform.blade.php
@@ -25,7 +25,7 @@ EditObjectId: {{ $category->id }},
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<form id="task-category-form"
 			novalidate>
 
diff --git a/views/taskform.blade.php b/views/taskform.blade.php
index 7a71b215..5c484639 100644
--- a/views/taskform.blade.php
+++ b/views/taskform.blade.php
@@ -25,7 +25,7 @@ EditObjectId: {{ $task->id }},
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<form id="task-form"
 			novalidate>
 
diff --git a/views/tasks.blade.php b/views/tasks.blade.php
index 5a1505a6..229e11b4 100644
--- a/views/tasks.blade.php
+++ b/views/tasks.blade.php
@@ -50,7 +50,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>
@@ -61,7 +61,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>
@@ -74,7 +74,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 490e36b5..6e96019e 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 08fcd12a..064a6e6e 100644
--- a/views/transfer.blade.php
+++ b/views/transfer.blade.php
@@ -95,7 +95,7 @@ $classes = $embedded ? '' : 'col-md-6 col-xl-4';
 		</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 5c05e44d..a5eebf0c 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 71c953e7..5f417179 100644
--- a/views/userentityform.blade.php
+++ b/views/userentityform.blade.php
@@ -25,7 +25,7 @@ EditObjectId: {{ $userentity->id }},
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<form id="userentity-form"
 			novalidate>
 
diff --git a/views/userfieldform.blade.php b/views/userfieldform.blade.php
index 51ba9c92..139604b6 100644
--- a/views/userfieldform.blade.php
+++ b/views/userfieldform.blade.php
@@ -25,7 +25,7 @@ EditObjectId: {{ $userfield->id }},
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<form id="userfield-form"
 			novalidate>
 
diff --git a/views/userfields.blade.php b/views/userfields.blade.php
index 3a426e8a..29600ef3 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 9337a991..fd147cba 100644
--- a/views/userform.blade.php
+++ b/views/userform.blade.php
@@ -28,7 +28,7 @@ EditMode: '{{ $mode }}',
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<script>
 			GrocyConfig.EditMode = '{{ $mode }}';
 		</script>
@@ -94,7 +94,7 @@ EditMode: '{{ $mode }}',
 		</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 7b331197..eeb78b04 100644
--- a/views/userobjectform.blade.php
+++ b/views/userobjectform.blade.php
@@ -27,7 +27,7 @@ EditObjectId: {{ $userobject->id }},
 <hr class="my-2">
 
 <div class="row">
-	<div class="col-lg-6 col-xs-12">
+	<div class="col-lg-6 col-12">
 		<form id="userobject-form"
 			novalidate>
 
diff --git a/views/userobjects.blade.php b/views/userobjects.blade.php
index 5bd16345..7f244c54 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 3a3a8914..8a647b24 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 bc4c8e22..09410c56 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>