Index: lams_monitoring/web/gate/openGateSingleUser.jsp
===================================================================
diff -u -r40de3afab4e8d589660daffb6efd6e568e87f8fa -r35dd47046a83ab2f9e80f76dc22d1521412219b5
--- lams_monitoring/web/gate/openGateSingleUser.jsp	(.../openGateSingleUser.jsp)	(revision 40de3afab4e8d589660daffb6efd6e568e87f8fa)
+++ lams_monitoring/web/gate/openGateSingleUser.jsp	(.../openGateSingleUser.jsp)	(revision 35dd47046a83ab2f9e80f76dc22d1521412219b5)
@@ -1,19 +1,10 @@
 			<style type="text/css">
 				.gateLearners {
-					padding: 5px 0 5px 5px;
 					height: 300px;
 					overflow: auto;
+					padding: 5px 0 5px 5px;
 				}
 				
-				.allowButton {
-					width: 100%;
-				}
-				
-				.column-heading {
-			    	margin-right: 10px;
-				    margin-left: 7px;
-				}
-				
 			</style>
 								
 			<script type="text/javascript">
@@ -38,47 +29,76 @@
 	<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
 	<input type="hidden" id="activityId" name="activityId" value="${gateForm.activityId}" />
 	<input type="hidden" id="userId" name="userId" />
+	<div class="container-fluid">
+		<div class="row">
+			<div class="col-4">		
+				<div class="form-check text-danger text-center mb-2">
+					<input id="all-select-forbidden" class="form-check-input" 
+						   type="checkbox" value="${learner.userId}" onClick="javascript:selectUnselectAll('forbidden')" />
+					<label for="all-select-forbidden" class="form-check-label">
+						<strong><fmt:message key="label.gate.list.all.learners"/></strong>
+					</label>
+				</div>		   
+				<div class="card">
+					<div class="card-body gateLearners"  id="forbidden">
+						<c:forEach var="learner" items="${gateForm.forbiddenLearnerList}">
+							<div class="form-check mb-1">
+								<input id="forbidden-${learner.userId}" class="form-check-input" 
+									   type="checkbox" value="${learner.userId}" onClick="javascript:updateSelectAll('forbidden')" />
+								<label for="forbidden-${learner.userId}" class="form-check-label">
+									<c:out value="${learner.firstName} ${learner.lastName}" escapeXml="true"/>
+								</label>
+							</div>
+						</c:forEach>
+					</div>
+				</div>
+				<input type="submit" class="btn btn-secondary w-100 mt-2" 
+					   value="<fmt:message key="label.gate.allow"/>"
+					   onclick="javascript:allowUsers('forbidden')"/>	
+			</div>
 			
-	<div class="row">
-		<div class="col-sm-4">				   
-			<p class="text-danger text-center column-heading"> <input id="all-select-forbidden" onClick="javascript:selectUnselectAll('forbidden');" type="checkbox"  class="pull-left" />
-			<strong><fmt:message key="label.gate.list.all.learners"/></strong></p>
-			<div class="panel panel-default gateLearners" id="forbidden">
-				<c:forEach var="learner" items="${gateForm.forbiddenLearnerList}">
-					<input id="forbidden-${learner.userId}" type="checkbox" value="${learner.userId}" onClick="javascript:updateSelectAll('forbidden')" />
-					<label for="forbidden-${learner.userId}"><c:out value="${learner.firstName} ${learner.lastName}" escapeXml="true"/></label>
-					<br />
-				</c:forEach>
+			<div class="col-4">
+				<div class="form-check text-center mb-2">
+					<input id="all-select-waiting" class="form-check-input" 
+						   type="checkbox" value="${learner.userId}" onClick="javascript:selectUnselectAll('waiting')" />
+					<label for="all-select-waiting" class="form-check-label">
+						<strong><fmt:message key="label.gate.list.waiting.learners"/></strong>
+					</label>
+				</div>	
+				<div class="card">
+					<div class="card-body gateLearners" id="waiting">
+						<c:forEach var="learner" items="${gateForm.waitingLearnerList}">
+							<div class="form-check mb-1">
+								<input id="waiting-${learner.userId}" class="form-check-input" 
+									   type="checkbox" value="${learner.userId}" onClick="javascript:updateSelectAll('waiting')" />
+								<label for="waiting-${learner.userId}" class="form-check-label">
+									<c:out value="${learner.firstName} ${learner.lastName}" escapeXml="true"/>
+								</label>
+							</div>
+						</c:forEach>
+					</div>
+				</div>
+				<input type="submit" class="btn btn-secondary w-100 mt-2" 
+					   value="<fmt:message key="label.gate.allow"/>"
+					   onclick="javascript:allowUsers('waiting')"/>
 			</div>
-			<input type="submit" class="btn btn-default btn-xs allowButton" 
-				   value="<fmt:message key="label.gate.allow"/>"
-				   onclick="javascript:allowUsers('forbidden')"/>	
-		</div>
-		
-		<div class="col-sm-4">
-			<p class="text-center column-heading"> <input id="all-select-waiting" onClick="javascript:selectUnselectAll('waiting');" type="checkbox"  class="pull-left" />
-			<strong><fmt:message key="label.gate.list.waiting.learners"/></strong></p>
-			<div class="panel panel-default gateLearners" id="waiting">
-				<c:forEach var="learner" items="${gateForm.waitingLearnerList}">
-					<input id="waiting-${learner.userId}" type="checkbox" value="${learner.userId}" onClick="javascript:updateSelectAll('waiting')"/>
-					<label for="waiting-${learner.userId}"><c:out value="${learner.firstName} ${learner.lastName}" escapeXml="true"/></label>
-					<br />
-				</c:forEach>
+					
+			<div class="col-4">
+					<div class="form-check text-center text-success mb-2">
+					<label for="all-select-waiting" class="form-check-label">
+						<strong><fmt:message key="label.gate.list.allowed.learners"/></strong>
+					</label>
+				</div>	
+				<div class="card">
+					<div class="card-body gateLearners">
+						<c:forEach var="learner" items="${gateForm.allowedToPassLearnerList}">
+							<label class="form-check-label"><c:out value="${learner.firstName} ${learner.lastName}" escapeXml="true"/></label>
+							<br />
+						</c:forEach>
+					</div>
+				</div>
 			</div>
-			<input type="submit" class="btn btn-default btn-xs allowButton" 
-				   value="<fmt:message key="label.gate.allow"/>"
-				   onclick="javascript:allowUsers('waiting')"/>
 		</div>
-				
-		<div class="col-sm-4">
-			<p class="text-success text-center"><strong><fmt:message key="label.gate.list.allowed.learners"/></strong></p>
-			<div class="panel panel-default gateLearners">
-				<c:forEach var="learner" items="${gateForm.allowedToPassLearnerList}">
-					<span><c:out value="${learner.firstName} ${learner.lastName}" escapeXml="true"/></span>
-					<br />
-				</c:forEach>
-			</div>
-		</div>
-	</div>
+	</div>	
 
 </form:form>