diff --git a/templates/ContentGenerator/LoginProctor.html.ep b/templates/ContentGenerator/LoginProctor.html.ep
index 02635f8309..fb3e8545fe 100644
--- a/templates/ContentGenerator/LoginProctor.html.ep
+++ b/templates/ContentGenerator/LoginProctor.html.ep
@@ -16,14 +16,14 @@
 % # Print a message about submission times if we're submitting an answer.
 % if (param('submitAnswers')) {
 	% my $dueTime = $userSet->due_date;
-	% my ($color, $msg) = ('#ddddff', '');
+	% my ($alertClass, $msg) = ('alert-primary', '');
 	% if ($dueTime + $ce->{gatewayGracePeriod} < $submitTime) {
-		% $color = '#ffffaa';
+		% $alertClass = ' alert-warning';
 		% $msg = maketext('The time limit on this assignment was exceeded. The assignment may be checked, '
 			% . 'but the result will not be counted.');
 	% }
 	%
-	<div class="card mb-2" style="background-color:<%= $color %>;">
+	<div class="alert mb-2<%= $alertClass %>" role="alert">
 		<div class="card-body p-2">
 			<div class="card-title"><strong><%= maketext('Grading Assignment') %></strong></div>
 			<div class="card-text">
@@ -52,7 +52,7 @@
 		% || ($userSet->restricted_login_proctor eq '' || $userSet->restricted_login_proctor eq 'No'))
 	% {
 		% # The user info and username field for the proctor.
-		<div class="card p-2 mb-2" style="background-color:#ddddff;">
+		<div class="alert alert-primary card p-2 mb-2" role="alert">
 			<div><%= maketext(q{User's username is:}) %> <strong><%= param('effectiveUser') // '' %></strong></div>
 			<div>
 				<%= maketext(q{User's name is:}) %>
@@ -68,7 +68,7 @@
 		</div>
 	% } else {
 		% # Restricted set login
-		<div class="card p-2 mb-2" style="background-color:#ddddff;">
+		<div class="alert alert-primary card p-2 mb-2" role="alert">
 			<em>
 				<%= maketext(
 					'This set has a set-level proctor password to authorize logins. Enter the password below.') =%>