Still converting to bootstrap 5, removed all old css

approot/admin-database.xml

@@ -53,7 +53,7 @@
 			</div>
 		</div>
 		<div class="col-12">
-			${apply-btn class="btn-primary"} ${discard-btn}
+			${apply-btn class="btn-primary me-1"}${discard-btn}
 		</div>
 	</form>
 	<br/>

approot/explore.xml

@@ -9,7 +9,7 @@
 <message id="Lms.Explore.template.play-btn"><i class="fa fa-fw fa-play-circle"></i></message>
 
 <message id="Lms.Explore.template.filters">
-	${add-filter class="btn-sm btn-info"} ${clusters class="Lms-explore-clusters"}
+	${add-filter class="btn-sm btn-info me-1"}${clusters class="d-inline-block"}
 </message>
 
 <message id="Lms.Explore.template.add-filter">

approot/login.xml

@@ -4,47 +4,37 @@
 
 <message id="Lms.Auth.template">
 	<div class="container">
-		<div class="page-header">
-			<h2>${tr:Lms.Auth.welcome}</h2>
-		</div>
-		<form>
-			<div class="form-horizontal">
-				<div class="form-group">
-					<label class="control-label col-sm-2"  for="${id:login-name}">
+		<form class="row mt-5 justify-content-md-center">
+			<div class="row col col-lg-6 g-3">
+				<h2>${tr:Lms.Auth.welcome}</h2>
+				<div class="col-12">
+					<label class="form-label" for="${id:login-name}">
 						${tr:Lms.login}
 					</label>
-					<div class="col-sm-5">
-						${login-name}
-					</div>
-					<div class="help-block col-sm-5">
+					${login-name}
+					<div class="invalid-feedback">
 						${login-name-info}
 					</div>
 				</div>
-
-				<div class="form-group">
-					<label class="control-label col-sm-2"  for="${id:password}">
+				<div class="col-12">
+					<label class="form-label" for="${id:password}">
 						${tr:Lms.password}
 					</label>
-					<div class="col-sm-5">
-						${password}
-					</div>
-					<div class="help-block col-sm-5">
+					${password}
+					<div class="invalid-feedback">
 						${password-info}
 					</div>
 				</div>
-
-				<div class="form-group">
-					<label class="control-label col-sm-2"  for="${id:remember-me}">
-						${tr:Lms.Auth.remember-me}
-					</label>
-					<div class="col-sm-5">
-						<div class="checkbox"><label>${remember-me}</label></div>
+				<div class="col-12">
+					<div class="form-check">
+						${remember-me class="form-check-input"}
+						<label class="form-check-label" for="${id:remember-me}">
+							${tr:Lms.Auth.remember-me}
+						</label>
 					</div>
 				</div>
-				<div class="form-group">
-					<div class="col-sm-offset-2 col-sm-10">
-						${login-btn class="btn-primary"}
-					</div>
+				<div class="col-12">
+					${login-btn class="btn-primary"}
 				</div>
 			</div>
 		</form>

approot/main.xml

@@ -19,7 +19,7 @@
 				<span class="navbar-toggler-icon"></span>
 			</button>
 			<div class="collapse navbar-collapse" id="navbarSupportedContent">
-				<ul class="navbar-nav me-auto mb-2 mb-lg-0">
+				<ul class="navbar-nav me-auto align-items-md-center mb-lg-0">
 					<li class="nav-item">
 						${releases class="nav-link"}
 					</li>
@@ -33,10 +33,10 @@
 						${playqueue class="nav-link"}
 					</li>
 					<li class="nav-item">
-						${filters class="nav-link Lms-clusters-control"}
+						${filters class="nav-link"}
 					</li>
 				</ul>
-				<div class="navbar-nav mb-2 mb-lg-0">
+				<div class="navbar-nav align-items-md-center mb-lg-0">
 				${<if-is-admin>}
 					<li class="nav-item dropdown">
 						<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="${tr:Lms.administration}">

approot/settings.xml

@@ -180,7 +180,7 @@
 		</div>
 		${</if-has-change-password>}
 		<div class="col-12">
-			${apply-btn class="btn-primary"} ${discard-btn}
+			${apply-btn class="btn-primary me-1"}${discard-btn}
 		</div>
 	</form>
 </message>