Index: lams_central/web/WEB-INF/tags/Alert5.tag
===================================================================
diff -u -r5f8dff0cc7d791c9cb34c850aaf235ca604055d7 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_central/web/WEB-INF/tags/Alert5.tag	(.../Alert5.tag)	(revision 5f8dff0cc7d791c9cb34c850aaf235ca604055d7)
+++ lams_central/web/WEB-INF/tags/Alert5.tag	(.../Alert5.tag)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -32,7 +32,7 @@
 	<div class="col-md-auto">
 		<div id="${idName}" class="alert alert-${alertType} shadow" role="alert">
 			<c:if test="${not empty title}">
-				<span class="fa fa-${iconType} "></span> <span class="alert-heading font-weight-bold">${title}</span>
+				<span class="fa fa-${iconType} "></span> <span class="alert-heading fw-bold">${title}</span>
 				<hr>
 			</c:if>
 			<p class="mb-0">
Index: lams_central/web/WEB-INF/tags/FileUpload5.tag
===================================================================
diff -u -ra13b927ed895f8e3eeaf559371262665e04ff07a -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_central/web/WEB-INF/tags/FileUpload5.tag	(.../FileUpload5.tag)	(revision a13b927ed895f8e3eeaf559371262665e04ff07a)
+++ lams_central/web/WEB-INF/tags/FileUpload5.tag	(.../FileUpload5.tag)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -61,10 +61,10 @@
 		<i class="fa fa-upload"></i> <fmt:message key="${fileInputMessageKey}"/>
 	</button>
 	<input type="file" id="${fileFieldId}" name="${fileFieldname}" class="fileUpload d-none"> 
-	<input type="text" id="${fileInputNameFieldname}" disabled="disabled" placeholder="File not selected" class="form-control d-none input-sm w-25 ms-1">
+	<input type="text" id="${fileInputNameFieldname}" disabled="disabled" placeholder="File not selected" class="form-control d-none form-control-sm w-25 ms-1">
 </div>
 <c:if test="${uploadInfoMessageKey ne '-'}">
-<p class="help-block"><fmt:message key="${uploadInfoMessageKey}"><fmt:param>${maxFileSize}</fmt:param></fmt:message></p>					
+<p class="form-text"><fmt:message key="${uploadInfoMessageKey}"><fmt:param>${maxFileSize}</fmt:param></fmt:message></p>					
 </c:if>
 <div id="${errorMsgDiv}" class="text-danger" style="display:none"></div>			
 
Index: lams_central/web/WEB-INF/tags/LeaderDisplay.tag
===================================================================
diff -u -r4eacb303da606b130ab95bc28185fb4f5d1becbd -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_central/web/WEB-INF/tags/LeaderDisplay.tag	(.../LeaderDisplay.tag)	(revision 4eacb303da606b130ab95bc28185fb4f5d1becbd)
+++ lams_central/web/WEB-INF/tags/LeaderDisplay.tag	(.../LeaderDisplay.tag)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -16,8 +16,8 @@
 	<c:set var="messageKey" value="label.group.leader" />
 </c:if>
 
-<div class="row no-gutter">
-	<div class="col-12 col-xs-12 offset-sm-2 col-sm-8">
+<div class="row g-0">
+	<div class="col-12 offset-sm-2 col-sm-8">
 		<div id="${idName}" class="alert alert-info leader-display">
 			<span class="fs-5 fw-bold">
 				<fmt:message key="${messageKey}">
Index: lams_central/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r5a58ebc3f2aaf6ea5183e1ed1204d2e94ea45d10 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_central/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 5a58ebc3f2aaf6ea5183e1ed1204d2e94ea45d10)
+++ lams_central/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -94,7 +94,7 @@
 	<c:if test="${isNbTool}">
 		<!-- Comments: the extra div counteracts the float -->
 		<c:if test="${allowComments}">
-			<div class="row no-gutter"><div class="col-xs-12"></div></div>
+			<div class="row g-0"><div class="col-12"></div></div>
 			<lams:Comments toolSessionId="${toolSessionID}"
 						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
 						   pageSize="10" sortBy="1" />
Index: lams_central/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -ra9eba90bfa617a1db2a0bee02e9904ce05413d9a -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_central/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision a9eba90bfa617a1db2a0bee02e9904ce05413d9a)
+++ lams_central/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -28,7 +28,7 @@
 	<c:when test='${type == "navbar"}'>
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
-		<div class="col-xs-12">
+		<div class="col-12">
 		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
@@ -405,7 +405,7 @@
 
 		<div id="navcontent" class="content">
 			<div class="row no-gutter no-margin">
-			<div class="col-xs-12">
+			<div class="col-12">
 			<div class="container">
 				<c:choose>
 				<c:when test="${usePanel}">
Index: lams_central/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -rd182bd3afaf9cdadbe01a5a91589efd765a50bc6 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_central/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision d182bd3afaf9cdadbe01a5a91589efd765a50bc6)
+++ lams_central/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -1,14 +1,14 @@
-<% 
- /**
-  * Rating.tag
-  *	Author: Andrey Balan
-  *	Description: Shows rating stars widget
-  */
- %>
+<%
+	/**
+	 * Rating.tag
+	 *	Author: Andrey Balan
+	 *	Description: Shows rating stars widget
+	 */
+%>
 <%@ tag body-content="scriptless" %>
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
-<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %> 
+<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
 <%@ taglib uri="tags-lams" prefix="lams"%>
 <%@ taglib uri="tags-function" prefix="fn" %>
 <c:set var="lams"><lams:LAMSURL/></c:set>
@@ -23,8 +23,6 @@
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
-<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
-<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -54,12 +52,6 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
-<c:if test="${empty starsRateLabel}">
-	<c:set var="starsRateLabel" value="label.starts.rate" scope="request"/>
-</c:if>
-<c:if test="${empty postCommentButtonLabel}">
-	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
-</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -90,87 +82,87 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-<div class="rating-stars-holder text-center center-block">
+	<div class="rating-stars-holder text-center center-block">
 
-	<c:set var="hasStartedRating" value="false"/>
-	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-	</c:forEach>
-	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-	
-	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-		<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-	
-		<c:choose>
-			<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-				<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
-			</c:when>
-			<c:otherwise>
-				<c:set var="ratingStarsClass" value="rating-stars"/>
-			</c:otherwise>
-		</c:choose>
-			
-		<c:if test="${not hideCriteriaTitle}">
-			<div class="text-muted fw-bold">
-				${criteriaDto.ratingCriteria.title}
+		<c:set var="hasStartedRating" value="false"/>
+		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+		</c:forEach>
+		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+
+		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
+
+			<c:choose>
+				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
+					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				</c:when>
+				<c:otherwise>
+					<c:set var="ratingStarsClass" value="rating-stars"/>
+				</c:otherwise>
+			</c:choose>
+
+			<c:if test="${not hideCriteriaTitle}">
+				<strong>
+						${criteriaDto.ratingCriteria.title}
+				</strong>
+			</c:if>
+
+			<c:choose>
+				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
+					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
+				</c:when>
+				<c:otherwise>
+					<c:set var="ratingDataAverage" value="0"/>
+				</c:otherwise>
+			</c:choose>
+
+			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
 			</div>
-		</c:if>
-			
-		<c:choose>
-			<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-				<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-			</c:when>
-			<c:otherwise>
-				<c:set var="ratingDataAverage" value="0"/>
-			</c:otherwise>
-		</c:choose>
-		
-		<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}" role="button" aria-label="<fmt:message key="${starsRateLabel}"/>">
-		</div>
-			
-		<c:choose>
-			<c:when test="${isItemAuthoredByUser}">
-				<div class="rating-stars-caption">
-					<fmt:message key="${averageRatingLabel}" >
-						<fmt:param>
-							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-						</fmt:param>
-						<fmt:param>
-							${criteriaDto.numberOfVotes}
-						</fmt:param>
-					</fmt:message>
-				</div>
-			</c:when>
-				
-			<c:otherwise>
-				<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-					<c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-				>
-					<fmt:message key="${yourRatingLabel}" >
-						<fmt:param>
+
+			<c:choose>
+				<c:when test="${isItemAuthoredByUser}">
+					<div class="rating-stars-caption">
+						<fmt:message key="${averageRatingLabel}" >
+							<fmt:param>
+								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+							</fmt:param>
+							<fmt:param>
+								${criteriaDto.numberOfVotes}
+							</fmt:param>
+						</fmt:message>
+					</div>
+				</c:when>
+
+				<c:otherwise>
+					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
+						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
+					>
+						<fmt:message key="${yourRatingLabel}" >
+							<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-						</fmt:param>			
-						<fmt:param>
+							</fmt:param>
+							<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-						</fmt:param>
-						<fmt:param>
-							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-						</fmt:param>
-					</fmt:message>
-				</div>
-				
-			</c:otherwise>
-		</c:choose>
-			
-	</c:forEach>
+							</fmt:param>
+							<fmt:param>
+								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+							</fmt:param>
+						</fmt:message>
+					</div>
 
-</div>
+				</c:otherwise>
+			</c:choose>
 
+		</c:forEach>
+
+	</div>
+
 </div>
 
 <%--Comments area---------------------------------------%>
@@ -184,47 +176,46 @@
 					</div>
 				</c:forEach>
 			</c:when>
-			
+
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-			
+
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-			
+
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-					
+
 						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
 						</lams:Alert>
 					</c:if>
-				
+
 					<div class="row">
-						<div class="col-xs-12 col-sm-11">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
-									placeholder="<fmt:message key="label.comment.textarea.tip"/>"
-									aria-label="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+						<div class="col-xs-12 col-sm-10">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
+									  class="form-control comment-textarea"
+									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-1 p-0">
-							<button class="btn btn-success btn-sm add-comment add-comment-new"
+						<div class="col-xs-12 col-sm-2">
+							<button class="btn btn-primary add-comment add-comment-new" style=""
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}"
-									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
-								<i class="fa fa-check fa-lg"></i>
+									data-refresh-on-submit="${refreshOnComment}">
+								<i class="fa fa-check"></i>
 							</button>
 						</div>
 					</div>
-						
-				</div>			
+
+				</div>
 			</c:when>
 		</c:choose>
-			
-	</div>	
+
+	</div>
 </c:if>
\ No newline at end of file
Index: lams_central/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u
--- lams_central/web/WEB-INF/tags/Rating5.tag	(revision 0)
+++ lams_central/web/WEB-INF/tags/Rating5.tag	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -0,0 +1,230 @@
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
+<%@ tag body-content="scriptless" %>
+<%@ taglib uri="tags-core" prefix="c" %>
+<%@ taglib uri="tags-fmt" prefix="fmt" %>
+<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %> 
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+<c:set var="lams"><lams:LAMSURL/></c:set>
+
+<%@ attribute name="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
+
+<%-- Optional attribute --%>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
+<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
+<%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
+<%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
+<%@ attribute name="showComments" required="false" rtexprvalue="true" %>
+<%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
+<%@ attribute name="allowRetries" required="false" rtexprvalue="true" %>
+<%-- ID of HTML element where to scroll after refresh after comment was submitted --%>
+<%@ attribute name="refreshOnComment" required="false" rtexprvalue="true" %>
+
+<%-- Default value for message key --%>
+<c:if test="${empty disabled}">
+	<c:set var="disabled" value="false" scope="request"/>
+</c:if>
+<c:if test="${empty isItemAuthoredByUser}">
+	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+</c:if>
+<c:if test="${empty maxRates}">
+	<c:set var="maxRates" value="0" scope="request"/>
+</c:if>
+<c:if test="${empty countRatedItems}">
+	<c:set var="countRatedItems" value="0" scope="request"/>
+</c:if>
+<c:if test="${empty yourRatingLabel}">
+	<c:set var="yourRatingLabel" value="label.your.rating" scope="request"/>
+</c:if>
+<c:if test="${empty averageRatingLabel}">
+	<c:set var="averageRatingLabel" value="label.average.rating" scope="request"/>
+</c:if>
+<c:if test="${empty minNumberWordsLabel}">
+	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
+</c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
+<c:if test="${empty hideCriteriaName}">
+	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
+</c:if>
+<c:if test="${empty showAllComments}">
+	<c:set var="showAllComments" value="false" scope="request"/>
+</c:if>
+<c:if test="${empty showComments}">
+	<c:set var="showComments" value="true" scope="request"/>
+</c:if>
+<c:set var="isCommentsEnabled" value="${itemRatingDto.commentsEnabled && showComments}"/>
+<c:if test="${empty refreshOnComment}">
+	<c:set var="refreshOnComment" value="" scope="request"/>
+</c:if>
+
+<c:if test="${isCommentsEnabled}">
+	<c:set var="userId"><lams:user property="userID" /></c:set>
+	<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
+		<c:if test="${comment.userId == userId}">
+			<c:set var="commentLeftByUser" value="${comment}"/>
+		</c:if>
+	</c:forEach>
+</c:if>
+
+<c:if test="${empty allowRetries}">
+	<c:set var="allowRetries" value="false" scope="request"/>
+</c:if>
+
+<%--Rating stars area---------------------------------------%>
+
+<div class="extra-controls-inner">
+<div class="rating-stars-holder text-center center-block">
+
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
+	
+		<c:choose>
+			<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
+				<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+			</c:when>
+			<c:otherwise>
+				<c:set var="ratingStarsClass" value="rating-stars"/>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:if test="${not hideCriteriaTitle}">
+			<div class="text-muted fw-bold">
+				${criteriaDto.ratingCriteria.title}
+			</div>
+		</c:if>
+			
+		<c:choose>
+			<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
+				<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
+			</c:when>
+			<c:otherwise>
+				<c:set var="ratingDataAverage" value="0"/>
+			</c:otherwise>
+		</c:choose>
+		
+		<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}" role="button" aria-label="<fmt:message key="${starsRateLabel}"/>">
+		</div>
+			
+		<c:choose>
+			<c:when test="${isItemAuthoredByUser}">
+				<div class="rating-stars-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
+					<c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
+							<span id="user-rating-${objectId}">
+								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
+							</span>
+						</fmt:param>			
+						<fmt:param>
+							<span id="average-rating-${objectId}">
+								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+							</span>
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+				
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
+
+</div>
+
+</div>
+
+<%--Comments area---------------------------------------%>
+<c:if test="${isCommentsEnabled}">
+	<div id="comments-area-${itemRatingDto.itemId}">
+		<c:choose>
+			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
+					<div class="rating-comment">
+						<c:out value="${comment.comment}" escapeXml="false" />
+					</div>
+				</c:forEach>
+			</c:when>
+			
+			<c:when test='${not empty commentLeftByUser}'>
+				<div class="rating-comment">
+					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
+				</div>
+			</c:when>
+			
+			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
+				<div id="add-comment-area-${itemRatingDto.itemId}">
+			
+					<!-- Comment min words limit -->
+					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
+					
+						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+							<fmt:message key="${minNumberWordsLabel}">
+								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
+							</fmt:message>
+						</lams:Alert>
+					</c:if>
+				
+					<div class="row">
+						<div class="col-12 col-sm-11">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.comment.textarea.tip"/>"
+									aria-label="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+						</div>
+						<div class="col-12 col-sm-1 p-0">
+							<button class="btn btn-success btn-sm add-comment add-comment-new"
+									data-item-id="${itemRatingDto.itemId}"
+									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
+									data-show-all-comments="${showAllComments}"
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa fa-check fa-lg"></i>
+							</button>
+						</div>
+					</div>
+						
+				</div>			
+			</c:when>
+		</c:choose>
+			
+	</div>	
+</c:if>
\ No newline at end of file
Index: lams_central/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rcb1121b8d7ebf920ed1a8b5b3d40c93de3d93bf8 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_central/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision cb1121b8d7ebf920ed1a8b5b3d40c93de3d93bf8)
+++ lams_central/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -287,7 +287,7 @@
 								</th>
 							</c:if>
 						</c:forEach>
-						<th class="col-xs-1 text-center"><fmt:message key="label.average" /></th>
+						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
 					</tr>
 					<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
 						<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
Index: lams_central/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u -r7194568932b229c045eb3e5c4c79e279eec66864 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_central/web/WEB-INF/tags/TSTable5.tag	(.../TSTable5.tag)	(revision 7194568932b229c045eb3e5c4c79e279eec66864)
+++ lams_central/web/WEB-INF/tags/TSTable5.tag	(.../TSTable5.tag)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -34,7 +34,7 @@
 	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
 	        <button type="button" class="btn btn-secondary btn-sm rounded next" title="Next"><i class="fa fa-forward"></i></button>
 	        <button type="button" class="btn btn-secondary btn-sm rounded last" title="Last"><i class="fa fa-step-forward"></i></button>
-	        <select class="pagesize" title="Select page size">
+	        <select class="pagesize form-select" title="Select page size">
 	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
 	      		<option selected="selected" value="10">10</option>
 	      		<option value="20">20</option>
Index: lams_central/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r52f7b0418f89acf6b26f507511e3815020ae432c -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_central/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 52f7b0418f89acf6b26f507511e3815020ae432c)
+++ lams_central/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -362,6 +362,10 @@
        <path>/WEB-INF/tags/Rating.tag</path>
    	</tag-file> 
    	<tag-file>
+       <name>Rating5</name>
+       <path>/WEB-INF/tags/Rating5.tag</path>
+   	</tag-file> 
+   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
Index: lams_tool_assessment/web/includes/css/assessment.scss
===================================================================
diff -u -r4262c80621f1eb846aa075a52f824091abbc218a -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_assessment/web/includes/css/assessment.scss	(.../assessment.scss)	(revision 4262c80621f1eb846aa075a52f824091abbc218a)
+++ lams_tool_assessment/web/includes/css/assessment.scss	(.../assessment.scss)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -54,7 +54,8 @@
 }
 
 .selected-by-groups {
-	margin-left: 55px;
+	margin-left: 45px;
+	opacity: 0.5;
 }
 
 [data-bs-toggle="collapse"].collapsed .if-not-collapsed,
Index: lams_tool_assessment/web/pages/learning/parts/markhedging.jsp
===================================================================
diff -u -r6866da235d682d74f883afdd01e00e92d16a13eb -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_assessment/web/pages/learning/parts/markhedging.jsp	(.../markhedging.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
+++ lams_tool_assessment/web/pages/learning/parts/markhedging.jsp	(.../markhedging.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -13,8 +13,8 @@
 				<c:out value="${option.name}" escapeXml="false" />
 			</div>
 				
-			<div style="width: 60px;">
-				<select name="question${questionIndex}_${option.uid}" class="mark-hedging-select" data-question-index="${questionIndex}"
+			<div style="width: 70px;">
+				<select name="question${questionIndex}_${option.uid}" class="mark-hedging-select form-select" data-question-index="${questionIndex}"
 					<c:if test="${!hasEditRight}">disabled="disabled"</c:if>
 					aria-labelledby="instructions-${questionIndex} option-name-${option.uid}"
 					${question.answerRequired? 'aria-required="true" required="true"' : ''}			
Index: lams_tool_assessment/web/pages/learning/parts/matchingpairs.jsp
===================================================================
diff -u -r6866da235d682d74f883afdd01e00e92d16a13eb -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_assessment/web/pages/learning/parts/matchingpairs.jsp	(.../matchingpairs.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
+++ lams_tool_assessment/web/pages/learning/parts/matchingpairs.jsp	(.../matchingpairs.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -21,7 +21,7 @@
 			</div>
 				
 			<div style="width: 250px;">
-				<select name="question${questionIndex}_${option.uid}" 
+				<select name="question${questionIndex}_${option.uid}" class="form-select"
 					<c:if test="${!hasEditRight}">disabled="disabled"</c:if>
 					${question.answerRequired? 'aria-required="true" required="true"' : ''}
 					aria-labelledby="option-name-${option.uid} instructions-${questionIndex}"
Index: lams_tool_assessment/web/pages/learning/parts/multiplechoice.jsp
===================================================================
diff -u -r6866da235d682d74f883afdd01e00e92d16a13eb -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_assessment/web/pages/learning/parts/multiplechoice.jsp	(.../multiplechoice.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
+++ lams_tool_assessment/web/pages/learning/parts/multiplechoice.jsp	(.../multiplechoice.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -19,43 +19,43 @@
 		${mcqInstructions}
 	</legend>
 		
-	<div class="table table-sm div-hover px-3">
+	<div class="table-sm div-hover px-3 mb-3">
 		<c:forEach var="option" items="${question.optionDtos}"  varStatus="answerStatus">
 			<div class="row">
 				<div class="col">
-					<c:choose>
-						<c:when test="${question.multipleAnswersAllowed}">
-							<c:set var="inputName">question${questionIndex}_${option.uid}</c:set>
-							<c:set var="inputId" value="${inputName}" />
-							<input type="checkbox" name="${inputName}" id="${inputId}" class="me-2"
-									value="${true}"
-								    onclick="javascript:logLearnerInteractionEvent($(this).is(':checked') ? 2 : 3, ${question.uid}, ${option.uid})" 
-		 						<c:if test="${option.answerBoolean}">checked="checked"</c:if>
-								<c:if test="${!hasEditRight}">disabled="disabled"</c:if>
-								aria-labelledby="option-name-${option.uid}"
-							/>
-						</c:when>
+					<div class="form-check ms-3">
+						<c:choose>
+							<c:when test="${question.multipleAnswersAllowed}">
+								<c:set var="inputName">question${questionIndex}_${option.uid}</c:set>
+								<c:set var="inputId" value="${inputName}" />
+								<input type="checkbox" name="${inputName}" id="${inputId}" class="form-check-input me-2"
+										value="${true}"
+									    onclick="javascript:logLearnerInteractionEvent($(this).is(':checked') ? 2 : 3, ${question.uid}, ${option.uid})" 
+			 						<c:if test="${option.answerBoolean}">checked="checked"</c:if>
+									<c:if test="${!hasEditRight}">disabled="disabled"</c:if>
+								/>
+							</c:when>
+							
+							<c:otherwise>
+								<c:set var="inputName">question${questionIndex}</c:set>
+								<c:set var="inputId">${inputName}_${option.uid}</c:set>
+								<input type="radio" name="${inputName}" id="${inputId}" class="form-check-input me-2"
+										value="${option.uid}"
+									    onclick="javascript:logLearnerInteractionEvent(1, ${question.uid}, ${option.uid})" 
+			 						<c:if test="${option.answerBoolean}">checked="checked"</c:if>
+			 						<c:if test="${!hasEditRight}">disabled="disabled"</c:if>
+								/>
+							</c:otherwise>
+						</c:choose>
 						
-						<c:otherwise>
-							<c:set var="inputName">question${questionIndex}</c:set>
-							<c:set var="inputId">${inputName}_${option.uid}</c:set>
-							<input type="radio" name="${inputName}" id="${inputId}" class="me-2"
-									value="${option.uid}"
-								    onclick="javascript:logLearnerInteractionEvent(1, ${question.uid}, ${option.uid})" 
-		 						<c:if test="${option.answerBoolean}">checked="checked"</c:if>
-		 						<c:if test="${!hasEditRight}">disabled="disabled"</c:if>
-		 						aria-labelledby="option-name-${option.uid}"
-							/>
-						</c:otherwise>
-					</c:choose>
-					
-			 		<c:if test="${question.prefixAnswersWithLetters}">
-			 			&nbsp;${option.formatPrefixLetter(answerStatus.index)}
-	 	              </c:if>
-					
-					<label for="${inputId}" id="option-name-${option.uid}">
-						<c:out value="${option.name}" escapeXml="false" />
-					</label>
+						<label for="${inputId}" class="form-check-label">
+					 		<c:if test="${question.prefixAnswersWithLetters}">
+					 			&nbsp;${option.formatPrefixLetter(answerStatus.index)}
+			 	            </c:if>
+						
+							<c:out value="${option.name}" escapeXml="false" />
+						</label>
+					</div>
 				</div>
 			</div>
 		</c:forEach>
Index: lams_tool_assessment/web/pages/learning/parts/truefalse.jsp
===================================================================
diff -u -r6866da235d682d74f883afdd01e00e92d16a13eb -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_assessment/web/pages/learning/parts/truefalse.jsp	(.../truefalse.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
+++ lams_tool_assessment/web/pages/learning/parts/truefalse.jsp	(.../truefalse.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -15,33 +15,37 @@
 	<div class="table-sm div-hover mx-3">	
 		<div class="row">
 			<div class="col">
-				<input type="radio" name="question${questionIndex}" id="question${questionIndex}-true" class="me-2"
-						value="${true}"
-					    onclick="javascript:logLearnerInteractionEvent(1, ${question.uid}, 1)"
-					<c:if test="${question.answerBoolean}">checked="checked"</c:if>
-					<c:if test="${!hasEditRight}">disabled="disabled"</c:if>	
-					aria-labelledby="instructions-${questionIndex} option-name-true"				 
-				/>
-					
-				<label for="question${questionIndex}-true" id="option-name-true">
-					<fmt:message key="label.learning.true.false.true" />
-				</label>
+				<div class="form-check ms-3">
+					<input type="radio" name="question${questionIndex}" id="option-${questionIndex}-true" class="form-check-input me-2"
+							value="${true}"
+						    onclick="javascript:logLearnerInteractionEvent(1, ${question.uid}, 1)"
+						<c:if test="${question.answerBoolean}">checked="checked"</c:if>
+						<c:if test="${!hasEditRight}">disabled="disabled"</c:if>	
+						aria-labelledby="instructions-${questionIndex} option-name-true"				 
+					/>
+						
+					<label for="option-${questionIndex}-true" id="option-name-true" class="form-check-label">
+						<fmt:message key="label.learning.true.false.true" />
+					</label>
+				</div>
 			</div>
 		</div>
 		
 		<div class="row">
 			<div class="col">
-				<input type="radio" name="question${questionIndex}" id="question${questionIndex}-false" class="me-2"
-						value="${false}"
-					    onclick="javascript:logLearnerInteractionEvent(1, ${question.uid}, 2)" 
-					<c:if test="${(!question.answerBoolean) and (question.answer != null)}">checked="checked"</c:if>
-					<c:if test="${!hasEditRight}">disabled="disabled"</c:if>
-					aria-labelledby="instructions-${questionIndex} option-name-false"
-				/>
-	
-				<label for="question${questionIndex}-false" id="option-name-false">
-					<fmt:message key="label.learning.true.false.false" />
-				</label>
+				<div class="form-check ms-3">
+					<input type="radio" name="question${questionIndex}" id="option-${questionIndex}-false" class="form-check-input me-2"
+							value="${false}"
+						    onclick="javascript:logLearnerInteractionEvent(1, ${question.uid}, 2)" 
+						<c:if test="${(!question.answerBoolean) and (question.answer != null)}">checked="checked"</c:if>
+						<c:if test="${!hasEditRight}">disabled="disabled"</c:if>
+						aria-labelledby="instructions-${questionIndex} option-name-false"
+					/>
+		
+					<label for="option-${questionIndex}-false" id="option-name-false" class="form-check-label">
+						<fmt:message key="label.learning.true.false.false" />
+					</label>
+				</div>
 			</div>
 		</div>
 	</div>
Index: lams_tool_assessment/web/pages/learning/results/essay.jsp
===================================================================
diff -u -r4262c80621f1eb846aa075a52f824091abbc218a -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_assessment/web/pages/learning/results/essay.jsp	(.../essay.jsp)	(revision 4262c80621f1eb846aa075a52f824091abbc218a)
+++ lams_tool_assessment/web/pages/learning/results/essay.jsp	(.../essay.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -30,7 +30,7 @@
 			</div>
 		</div>
 
-		<c:forEach var="session" items="${sessions}" varStatus="status">
+		<c:forEach var="session" items="${sessions}" varStatus="sessionStatus">
 			<%-- Default answer value, when answers are not disclosed yet --%>
 			<c:set var="answer"><i><fmt:message key="label.not.yet.disclosed"/></i></c:set>
 			
@@ -41,7 +41,7 @@
 			<c:if test="${question.groupsAnswersDisclosed}">
 				<%-- Get the needed piece of information from a complicated questionSummaries structure --%>
 				<c:set var="questionSummary" value="${questionSummaries[question.uid]}" />
-				<c:set var="sessionResults" value="${questionSummary.questionResultsPerSession[status.index]}" />
+				<c:set var="sessionResults" value="${questionSummary.questionResultsPerSession[sessionStatus.index]}" />
 				<c:set var="sessionResults" value="${sessionResults[fn:length(sessionResults)-1]}" />
 				<c:choose>
 					<%-- If uid is NULL then it is a dummy session result, for a group that has not provided answers
@@ -92,7 +92,7 @@
 				
 						<c:if test="${showRating}">
 							<%-- Do not allow voting for own answer, and for non-leaders if leader is enabled --%>
-							<lams:Rating itemRatingDto="${itemRatingDto}"
+							<lams:Rating5 itemRatingDto="${itemRatingDto}"
 										 isItemAuthoredByUser="${not canRate}"
 										 showAllComments="true"
 										 refreshOnComment="rating-table-${question.uid}" />
Index: lams_tool_assessment/web/pages/learning/results/historyresponses.jsp
===================================================================
diff -u -r4262c80621f1eb846aa075a52f824091abbc218a -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_assessment/web/pages/learning/results/historyresponses.jsp	(.../historyresponses.jsp)	(revision 4262c80621f1eb846aa075a52f824091abbc218a)
+++ lams_tool_assessment/web/pages/learning/results/historyresponses.jsp	(.../historyresponses.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -98,7 +98,7 @@
 				</div>
 				<c:if test="${assessment.allowGradesAfterAttempt}">
 					<div style="width: 70px; padding-left: 0px;" >
-						<div style="text-align: center;">
+						<div class="text-center">
 							<fmt:formatNumber value="${questionResult.mark}" maxFractionDigits="3"/>
 						</div>
 					</div>
Index: lams_tool_assessment/web/pages/learning/results/markhedging.jsp
===================================================================
diff -u -ra84ec757c6b5b37c202866c5ae1b10937142875f -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_assessment/web/pages/learning/results/markhedging.jsp	(.../markhedging.jsp)	(revision a84ec757c6b5b37c202866c5ae1b10937142875f)
+++ lams_tool_assessment/web/pages/learning/results/markhedging.jsp	(.../markhedging.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -32,9 +32,9 @@
 				</div>
 			</c:if>
 				
-			<div style="width:60px;">
+			<div style="width:70px;">
 				<c:if test="${not empty toolSessionID}">
-					<select name="question${questionIndex}_${option.displayOrder}" class="mark-hedging-select" data-question-index="${questionIndex}"
+					<select name="question${questionIndex}_${option.displayOrder}" class="mark-hedging-select form-select" data-question-index="${questionIndex}"
 							aria-labelledby="instructions-${questionIndex} option-name-${option.uid}"
 							disabled="disabled">
 							
Index: lams_tool_assessment/web/pages/learning/results/multiplechoice.jsp
===================================================================
diff -u -ra84ec757c6b5b37c202866c5ae1b10937142875f -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_assessment/web/pages/learning/results/multiplechoice.jsp	(.../multiplechoice.jsp)	(revision a84ec757c6b5b37c202866c5ae1b10937142875f)
+++ lams_tool_assessment/web/pages/learning/results/multiplechoice.jsp	(.../multiplechoice.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -41,35 +41,39 @@
 					    </c:if>			
 	                </div>
 	                
-					<div class="complete-item-gif">
-						<c:if test="${not empty toolSessionID}">
-							<c:choose>
-								<c:when test="${question.multipleAnswersAllowed}">
-									<input type="checkbox" name="question${status.index}_${option.displayOrder}" value="${true}"
-				 						<c:if test="${option.answerBoolean}">checked="checked"</c:if>
-										disabled="disabled"
-										aria-labelledby="option-name-${option.uid}"
-									/>
-								</c:when>
-								<c:otherwise>
-									<input type="radio" name="question${status.index}" value="${option.displayOrder}"
-				 						<c:if test="${option.answerBoolean}">checked="checked"</c:if>
-				 						disabled="disabled"
-				 						aria-labelledby="option-name-${option.uid}"
-									/>
-								</c:otherwise>
-							</c:choose>
-						</c:if>
-						
-						<c:if test="${question.prefixAnswersWithLetters}">
-				 			&nbsp;${option.formatPrefixLetter(answerStatus.index)}
-	 	                </c:if>	
+					<div class="col">
+						<div class="form-check ms-3">
+							<c:if test="${not empty toolSessionID}">
+								<c:choose>
+									<c:when test="${question.multipleAnswersAllowed}">
+										<input type="checkbox" name="question${questionIndex}_${option.displayOrder}" id="option-${questionIndex}-${option.uid}" 
+											class="form-check-input" 
+											value="${true}"
+					 						<c:if test="${option.answerBoolean}">checked="checked"</c:if>
+											disabled="disabled"
+										/>
+									</c:when>
+									<c:otherwise>
+										<input type="radio" name="question${questionIndex}" id="option-${questionIndex}-${option.uid}"
+											class="form-check-input" 
+											value="${option.displayOrder}"
+					 						<c:if test="${option.answerBoolean}">checked="checked"</c:if>
+					 						disabled="disabled"
+										/>
+									</c:otherwise>
+								</c:choose>
+							</c:if>
+							
+							<label class="form-check-label" for="option-${questionIndex}-${option.uid}">
+								<c:if test="${question.prefixAnswersWithLetters}">
+						 			&nbsp;${option.formatPrefixLetter(answerStatus.index)}
+			 	                </c:if>	
+			 	                
+			 	                <c:out value="${option.name}" escapeXml="false" />
+		 	                </label>
+	 	                </div>
 					</div>
 					
-					<div class="col" id="option-name-${option.uid}">
-						<c:out value="${option.name}" escapeXml="false" />
-					</div>
-					
 					<c:if test="${assessment.allowQuestionFeedback}">
 						<div style="width:30%;">
 							<c:if test="${option.answerBoolean}">
Index: lams_tool_assessment/web/pages/learning/results/truefalse.jsp
===================================================================
diff -u -ra84ec757c6b5b37c202866c5ae1b10937142875f -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_assessment/web/pages/learning/results/truefalse.jsp	(.../truefalse.jsp)	(revision a84ec757c6b5b37c202866c5ae1b10937142875f)
+++ lams_tool_assessment/web/pages/learning/results/truefalse.jsp	(.../truefalse.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -17,7 +17,7 @@
 	<div class="table-responsive">
 		<div class="table div-hover table-sm">
 			<div class="row">
-				<div class="complete-item-gif"><i class="fa fa-check text-success"></i>
+				<div class="complete-item-gif">
 					<c:if test="${(question.answer != null) 
 							&& (assessment.allowRightAnswersAfterQuestion && (question.answerBoolean == question.correctAnswer) 
 							|| assessment.allowWrongAnswersAfterQuestion && (question.answerBoolean != question.correctAnswer)) }">
@@ -29,23 +29,25 @@
 							<c:otherwise>
 								<i class="fa fa-times text-danger"></i>	
 							</c:otherwise>		
-						</c:choose>					
-						
+						</c:choose>
 					</c:if>	
 				</div>
-						
-				<div class="complete-item-gif">
-					<c:if test="${not empty toolSessionID}">
-						<input type="radio" name="question${status.index}" value="${true}"
-			 				<c:if test="${question.answerBoolean}">checked="checked"</c:if>
-							disabled="disabled"	
-							aria-labelledby="instructions-${questionIndex} option-name-true"
-						/>
-					</c:if>
-				</div>
 				
-				<div class="col" id="option-name-true">
-					<fmt:message key="label.learning.true.false.true" />
+				<div class="col">
+					<div class="form-check ms-3">
+						<c:if test="${not empty toolSessionID}">
+							<input type="radio" name="question${questionIndex}" id="option-${questionIndex}-true" class="form-check-input me-2"
+								value="${true}"
+				 				<c:if test="${question.answerBoolean}">checked="checked"</c:if>
+								disabled="disabled"	
+								aria-labelledby="instructions-${questionIndex} label-${questionIndex}-true"
+							/>
+						</c:if>
+					
+						<label for="option-${questionIndex}-true" id="label-${questionIndex}-true" class="form-check-label">
+							<fmt:message key="label.learning.true.false.true" />
+						</label>
+					</div>
 				</div>
 			</div>
 			
@@ -65,19 +67,22 @@
 						</c:choose>					
 					</c:if>		
 				</div>
-							
-				<div class="complete-item-gif">
-					<c:if test="${not empty toolSessionID}">
-						<input type="radio" name="question${status.index}" value="${false}"
-			 				<c:if test="${(!question.answerBoolean) and (question.answer != null)}">checked="checked"</c:if>
-							disabled="disabled"
-							aria-labelledby="instructions-${questionIndex} option-name-false"
-						/>
-					</c:if>
-				</div>
 				
-				<div class="col" id="option-name-false">
-					<fmt:message key="label.learning.true.false.false" />
+				<div class="col">
+					<div class="form-check ms-3">
+						<c:if test="${not empty toolSessionID}">
+							<input type="radio" name="question${questionIndex}" id="option-${questionIndex}-false" class="form-check-input me-2"
+								value="${false}"
+				 				<c:if test="${(!question.answerBoolean) and (question.answer != null)}">checked="checked"</c:if>
+								disabled="disabled"
+								aria-labelledby="instructions-${questionIndex} label-${questionIndex}-false"
+							/>
+						</c:if>
+						
+						<label for="option-${questionIndex}-false" id="label-${questionIndex}-false" class="form-check-label">
+							<fmt:message key="label.learning.true.false.false" />
+						</label>
+					</div>
 				</div>
 			</div>
 		</div>
Index: lams_tool_chat/web/pages/learning/learning.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_chat/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_chat/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -63,16 +63,16 @@
 		
 			<!-- chat UI -->
 			<div class="row">
-				<div class="col-xs-12 col-sm-9 col-md-9 col-lg-8">
+				<div class="col-12 col-sm-9 col-md-9 col-lg-8">
 					<div id="messages"></div>
 				</div>
-				<div class="col-xs-12 col-sm-3 col-md-3 col-lg-4">
+				<div class="col-12 col-sm-3 col-md-3 col-lg-4">
 					<div id="roster" class="d-none d-sm-block"></div>
 				</div>
 			</div>
 			<c:if test="${MODE == 'teacher'}">
 				<div class="row">
-					<div class="col-xs-12 voffset5">
+					<div class="col-12 mt-2">
 						<div id="sentTo">
 							<fmt:message key="label.sendMessageTo" />
 							&nbsp;<span id="sendToEveryone"><fmt:message key="label.everyone" /></span> <span id="sendToUser"
@@ -84,14 +84,14 @@
 		
 			<c:if test="${MODE != 'learner' || !chatDTO.lockOnFinish || !chatUserDTO.finishedActivity}">
 				<div class="row">
-					<div class="col-xs-12 col-sm-9 col-md-9 col-lg-8">
-						<div id="textArea" class="voffset5">
+					<div class="col-12 col-sm-9 col-md-9 col-lg-8">
+						<div id="textArea" class="mt-2">
 							<textarea id="sendMessageArea" rows="2" class="form-control" autofocus></textarea>
 						</div>
 					</div>
-					<div class="col-xs-12 col-sm-3 col-md-3 col-lg-4">
-						<div id="sendMessageButtonCell" class="voffset5">
-							<input id="sendMessageButton" class="btn btn-autoresize btn-default" type="button" onclick="javascript:sendChatToolMessage()"
+					<div class="col-12 col-sm-3 col-md-3 col-lg-4">
+						<div id="sendMessageButtonCell" class="mt-2">
+							<input id="sendMessageButton" class="btn btn-autoresize btn-secondary" type="button" onclick="javascript:sendChatToolMessage()"
 								value='<fmt:message key="button.send"/>' />
 						</div>
 					</div>
Index: lams_tool_chat/web/pages/learning/notebook.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_chat/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_chat/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -46,7 +46,7 @@
 					<form:textarea rows="5" path="entryText" cssClass="form-control" id="focused"></form:textarea>
 			
 					<form:hidden path="chatUserUID" />
-					<a href="#nogo" class="btn btn-primary float-end voffset10 na" id="finishButton">
+					<a href="#nogo" class="btn btn-primary float-end mt-2 na" id="finishButton">
 						<c:choose>
 							<c:when test="${isLastActivity}">
 								<fmt:message key="button.submit" />
Index: lams_tool_chat/web/pages/learning/parts/finishButton.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_chat/web/pages/learning/parts/finishButton.jsp	(.../finishButton.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_chat/web/pages/learning/parts/finishButton.jsp	(.../finishButton.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -52,7 +52,7 @@
 			<form:form action="openNotebook.do" method="post"
 			onsubmit="disableFinishButton();"  modelAttribute="learningForm" id="learningForm">
 			<form:hidden path="chatUserUID" value="${chatUserDTO.uid}" />
-			<input type="submit" value="<fmt:message key="button.continue" />" class="btn btn-responsive btn-primary float-end voffset10"/>
+			<input type="submit" value="<fmt:message key="button.continue" />" class="btn btn-responsive btn-primary float-end mt-2"/>
 			</form:form>
 		
 		</c:when>
@@ -61,7 +61,7 @@
 			<form:form action="finishActivity.do" method="post"
 			onsubmit="disableFinishButton();"  modelAttribute="learningForm" id="learningForm">
 			<form:hidden path="chatUserUID" value="${chatUserDTO.uid}" />
-			<a href="#nogo" type="button" class="btn btn-primary float-end voffset10 na btn-autoresize" id="finishButton">
+			<a href="#nogo" type="button" class="btn btn-primary float-end mt-2 na btn-autoresize" id="finishButton">
 						 <span class="nextActivity">
 							 <c:choose>
 							 	<c:when test="${isLastActivity}">
Index: lams_tool_daco/web/pages/learning/addRecord.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_daco/web/pages/learning/addRecord.jsp	(.../addRecord.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_daco/web/pages/learning/addRecord.jsp	(.../addRecord.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -13,7 +13,7 @@
 <c:set var="ordinal"><fmt:message key="label.authoring.basic.answeroption.ordinal"/></c:set>
 <c:set var="finishedLock" value="${sessionMap.finishedLock}" />
 
-<div class="voffset10">
+<div class="mt-2">
 <c:if test="${daco.lockOnFinished and mode != 'teacher'}">
 	<lams:Alert id="activityLocked" type="danger" close="false">
 		<c:choose>
@@ -103,6 +103,7 @@
 							</c:choose>
 							<c:set var="answerIndex" value="${answerIndex+1}" />
 						</c:when>
+						
 						<c:when test="${question.type==2}"><%-- Multi-line text --%>
 							<fmt:message key="label.learning.textarea.hint" var="textareaHint"/>
 							<c:if test="${horizontal}">
@@ -111,6 +112,7 @@
 							<form:textarea placeholder="${textareaHint}" path="answer[${answerIndex}]" cols="60" rows="3"  cssClass="form-control"/>
 							<c:set var="answerIndex" value="${answerIndex+1}" />
 						</c:when>
+						
 						<c:when test="${question.type==3}"><%-- Number --%>
 							<fmt:message key="label.learning.number.hint" var="numberHint"/>
 							<c:if test="${not empty question.digitsDecimal}">
@@ -129,118 +131,150 @@
 							<form:input placeholder="${numberHint}" path="answer[${answerIndex}]" size="10"  cssClass="form-control"/>
 							<c:set var="answerIndex" value="${answerIndex+1}" />
 						</c:when>
+						
 						<c:when test="${question.type==4}"><%-- Date can be entered in three textfields --%>
 							<div class="hint"><fmt:message key="label.learning.date.hint" /></div>
 							<c:if test="${horizontal}">
 								</td><td style="vertical-align: middle;">
 							</c:if>
-							<span class="form-inline">
-								<div class="form-group">
+							<span class="d-flex flex-row align-items-center flex-wrap">
+								<div class="mb-3">
 								<label><fmt:message key="label.learning.date.day" /></label>
-								<form:input path="answer[${answerIndex}]" size="3"  cssClass="form-control input-sm"/>&nbsp;
+								<form:input path="answer[${answerIndex}]" size="3"  cssClass="form-control form-control-sm"/>&nbsp;
 								</div>
 								
-								<div class="form-group">
+								<div class="mb-3">
 								<c:set var="answerIndex" value="${answerIndex+1}" />
 								<label><fmt:message key="label.learning.date.month" /></label>
-								<form:input path="answer[${answerIndex}]" size="3"  cssClass="form-control input-sm"/>&nbsp;
+								<form:input path="answer[${answerIndex}]" size="3"  cssClass="form-control form-control-sm"/>&nbsp;
 								</div>
 								
-								<div class="form-group">
+								<div class="mb-3">
 								<c:set var="answerIndex" value="${answerIndex+1}" />
 								<label><fmt:message key="label.learning.date.year" /></label>
-								<form:input path="answer[${answerIndex}]" size="5"  cssClass="form-control input-sm"/>
+								<form:input path="answer[${answerIndex}]" size="5"  cssClass="form-control form-control-sm"/>
 								</div>
 							</span>							
 							<c:set var="answerIndex" value="${answerIndex+1}" />
 						</c:when>
+						
 						<c:when test="${question.type==5}"><%-- File --%>
 							<div class="hint"><fmt:message key="label.learning.file.hint" /></div>
 							<c:if test="${horizontal}">
 								</td><td style="vertical-align: middle;">
 							</c:if>
-							<lams:FileUpload fileFieldId="file-${fileNumber+1}" fileFieldname="file[${fileNumber}]" 
+							<lams:FileUpload5 fileFieldId="file-${fileNumber+1}" fileFieldname="file[${fileNumber}]" 
 								fileInputMessageKey="label.authoring.basic.file" maxFileSize="${UPLOAD_FILE_MAX_SIZE_AS_USER_STRING}"
 								fileButtonBrowse="fileButtonBrowse-${fileNumber+1}" fileInputNameFieldname="fileInputName-${fileNumber+1}" errorMsgDiv="fileerror-${fileNumber+1}"/>
 							<c:set var="fileNumber" value="${fileNumber+1}" />
 						</c:when>
+						
 						<c:when test="${question.type==6}"><%-- Image --%>  
 							<div class="hint"><fmt:message key="label.learning.image.hint" /></div>
 							<c:if test="${horizontal}">
 								</td><td style="vertical-align: middle;">
 							</c:if>
-							<lams:FileUpload fileFieldId="file-${fileNumber+1}" fileFieldname="file[${fileNumber}]" 
+							<lams:FileUpload5 fileFieldId="file-${fileNumber+1}" fileFieldname="file[${fileNumber}]" 
 								fileInputMessageKey="label.authoring.basic.image" maxFileSize="${UPLOAD_FILE_MAX_SIZE_AS_USER_STRING}"
 								fileButtonBrowse="fileButtonBrowse-${fileNumber+1}" fileInputNameFieldname="fileInputName-${fileNumber+1}" errorMsgDiv="imageerror-${fileNumber+1}"/>
 							<c:set var="fileNumber" value="${fileNumber+1}" />
 						</c:when>
+						
 						<c:when test="${question.type==7}"><%-- Radio buttons  --%>
-							<div class="hint"><fmt:message key="label.learning.radio.hint" /></div>
+							<div class="hint">
+								<fmt:message key="label.learning.radio.hint" />
+							</div>
 							<c:if test="${horizontal}">
 								</td><td style="vertical-align: middle;">
 							</c:if>
+							
 							<c:forEach var="answerOption" items="${question.answerOptions}" varStatus="status">
-							<%-- It displays for example A) instead of 1) --%>
-							${fn:substring(ordinal,status.index,status.index+1)}) 
-							<form:radiobutton path="answer[${answerIndex}]" value="${status.index+1}" /><label>&nbsp;<c:out value="${answerOption.answerOption}" escapeXml="true"/></label><br />
+								<div class="form-check">
+									<%-- It displays for example A) instead of 1) --%>
+									${fn:substring(ordinal,status.index,status.index+1)}) 
+									<form:radiobutton path="answer[${answerIndex}]" value="${status.index+1}" cssClass="form-check-input"/>
+									<label for="answer[${answerIndex}]" class="form-check-label">
+										&nbsp;<c:out value="${answerOption.answerOption}" escapeXml="true"/>
+									</label>
+								</div>
+								<br />
 							</c:forEach>
+							
 							<c:set var="answerIndex" value="${answerIndex+1}" />
 						</c:when>
+						
 						<c:when test="${question.type==8}"><%-- Dropdown menu --%>
-							<div class="hint"><fmt:message key="label.learning.dropdown.hint" /></div>
+							<div class="hint">
+								<fmt:message key="label.learning.dropdown.hint" />
+							</div>
 							<c:if test="${horizontal}">
 								</td><td style="vertical-align: middle;">
 							</c:if>
-							<form:select path="answer[${answerIndex}]"  cssClass="form-control">
-							<form:option value="0"><fmt:message key="label.learning.dropdown.select"/></form:option>
-							<c:forEach var="answerOption" items="${question.answerOptions}" varStatus="status">
-								<form:option value="${status.index+1}"><c:out value="${answerOption.answerOption}" escapeXml="true"/></form:option>
-							</c:forEach>
+							
+							<form:select path="answer[${answerIndex}]"  cssClass="form-select">
+								<form:option value="0"><fmt:message key="label.learning.dropdown.select"/></form:option>
+								<c:forEach var="answerOption" items="${question.answerOptions}" varStatus="status">
+									<form:option value="${status.index+1}"><c:out value="${answerOption.answerOption}" escapeXml="true"/></form:option>
+								</c:forEach>
 							</form:select>
 							<c:set var="answerIndex" value="${answerIndex+1}" />
 						</c:when>
+						
 						<c:when test="${question.type==9}"><%-- Checkboxes --%>
-							<div class="hint"><fmt:message key="label.learning.checkbox.hint" /></div>
+							<div class="hint">
+								<fmt:message key="label.learning.checkbox.hint" />
+							</div>
 							<c:if test="${horizontal}">
 								</td><td style="vertical-align: middle;">
 							</c:if>
-							<form:hidden  id="checkbox-${questionStatus.index+1}" path="answer[${answerIndex}]" />
+							
+							<form:hidden id="checkbox-${questionStatus.index+1}" path="answer[${answerIndex}]" />
 							<c:forEach var="answerOption" items="${question.answerOptions}" varStatus="status">
-							${fn:substring(ordinal,status.index,status.index+1)}) 
-							<input type="checkbox" id="checkbox-${questionStatus.index+1}-${status.index+1}" value="${status.index+1}"/>
-							<label><c:out value="${answerOption.answerOption}" escapeXml="true"/>
-							</label><br/>
+								<div class="form-check">
+									${fn:substring(ordinal,status.index,status.index+1)}) 
+									<input type="checkbox" id="checkbox-${questionStatus.index+1}-${status.index+1}" value="${status.index+1}" class="form-check-input"/>
+									<label for="checkbox-${questionStatus.index+1}-${status.index+1}" class="form-check-label">
+										<c:out value="${answerOption.answerOption}" escapeXml="true"/>
+									</label>
+								</div>
+								<br/>
 							</c:forEach>
+							
 							<c:set var="answerIndex" value="${answerIndex+1}" />
 						</c:when>
+						
 						<c:when test="${question.type==10}"><%-- Longitude/latitude --%>
-							<div class="hint"><fmt:message key="label.learning.longlat.hint" /></div>
+							<div class="hint">
+								<fmt:message key="label.learning.longlat.hint" />
+							</div>
 							<c:if test="${horizontal}">
 								</td>
 								<td>
 							</c:if>
-								<div class="form-horizontal">
-									<div class="form-group  no-gutter">
-									<label class="col-sm-2 control-label"><fmt:message key="label.learning.longlat.longitude" /></label>
+							
+							<div class="form-horizontal">
+								<div class="mb-3  g-0">
+									<label class="col-sm-2 col-form-label"><fmt:message key="label.learning.longlat.longitude" /></label>
 									<div class="col-sm-2">
 									<form:input path="answer[${answerIndex}]" size="10"  cssClass="form-control "/>
 									</div>
 									<div class="col-sm-1">
-									<p class="form-control-static"><fmt:message key="label.learning.longlat.longitude.unit" /></p>
+									<p class="form-control-plaintext"><fmt:message key="label.learning.longlat.longitude.unit" /></p>
 									</div>								
-									</div>
-									<c:set var="answerIndex" value="${answerIndex+1}" />
+								</div>
+								<c:set var="answerIndex" value="${answerIndex+1}" />
 												
-									<div class="form-group  no-gutter">
-									<label class="col-sm-2 control-label"><fmt:message key="label.learning.longlat.latitude" /></label>
+								<div class="mb-3  g-0">
+									<label class="col-sm-2 col-form-label"><fmt:message key="label.learning.longlat.latitude" /></label>
 									<div class="col-sm-2">
 									<form:input path="answer[${answerIndex}]" size="10"  cssClass="form-control"/>
 									</div>
 									<div class="col-sm-1">
-									<p class="form-control-static"><fmt:message key="label.learning.longlat.latitude.unit" /></p>
+									<p class="form-control-plaintext"><fmt:message key="label.learning.longlat.latitude.unit" /></p>
 									</div>
-									</div>
 								</div>
+							</div>
+							
 							<c:set var="answerIndex" value="${answerIndex+1}" />
 						</c:when>
 					</c:choose>
@@ -250,7 +284,7 @@
 			<tr>
 				<td>
 					<c:if test="${mode != 'teacher'}">
-						<button type="submit" onclick="return saveOrUpdateRecord();" class="btn btn-sm btn-secondary btn-disable-on-submit voffset5 float-start"><i class="fa fa-plus"></i> <fmt:message key="label.learning.add" /></button>
+						<button type="submit" onclick="return saveOrUpdateRecord();" class="btn btn-sm btn-secondary btn-disable-on-submit mt-2 float-start"><i class="fa fa-plus"></i> <fmt:message key="label.learning.add" /></button>
 					</c:if>
 					<c:if test="${horizontal}">
 					</td><td style="vertical-align: middle;">
@@ -287,7 +321,7 @@
 			</div>
 
 			<c:if test="${mode != 'teacher'}">
-				<button name="FinishButton" onclick="javascript:continueReflect()" class="btn btn-default float-start">
+				<button name="FinishButton" onclick="javascript:continueReflect()" class="btn btn-secondary float-start">
 					<fmt:message key="label.common.edit" />
 				</button>
 			</c:if>
Index: lams_tool_daco/web/pages/learning/learning.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_daco/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_daco/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -72,12 +72,12 @@
 <c:set var="ellipsisControl">
 <c:choose>
 	<c:when test="${sessionMap.learningView=='horizontal'}">
-	<i class="fa fa-ellipsis-h loffset10" title="<fmt:message key="label.common.view.change" />"
-	 onclick="javascript:changeView('${sessionMapID}',${displayedRecordNumber})" id="ellipsis"></i>
+		<i class="fa-solid fa-ellipsis ms-2" title="<fmt:message key="label.common.view.change" />"
+	 		onclick="javascript:changeView('${sessionMapID}',${displayedRecordNumber})" id="ellipsis"></i>
 	</c:when>
 	<c:otherwise>
-	<i class="fa fa-ellipsis-v loffset10" title="<fmt:message key="label.common.view.change" />"
-	 onclick="javascript:changeView('${sessionMapID}',${displayedRecordNumber})" id="ellipsis"></i>
+		<i class="fa-solid fa-ellipsis-vertical ms-2" title="<fmt:message key="label.common.view.change" />"
+	 		onclick="javascript:changeView('${sessionMapID}',${displayedRecordNumber})" id="ellipsis"></i>
 	</c:otherwise>
 </c:choose>
 </c:set> 
@@ -102,12 +102,12 @@
 <c:if test="${mode != 'teacher'}">
 		<c:choose>
 			<c:when test="${daco.reflectOnActivity && (not sessionMap.userFinished)}">
-				<button name="FinishButton" onclick="javascript:continueReflect()" class="btn btn-default btn-disable-on-submit voffset5 float-end">
+				<button name="FinishButton" onclick="javascript:continueReflect()" class="btn btn-primary btn-disable-on-submit mt-2 float-end">
 					<fmt:message key="label.learning.continue" />
 				</button>
 			</c:when>
 			<c:otherwise>
-				<button type="submit" name="FinishButton" id="finishButton" class="btn btn-primary btn-disable-on-submit voffset5 float-end na">
+				<button type="submit" name="FinishButton" id="finishButton" class="btn btn-primary btn-disable-on-submit mt-2 float-end na">
 					<c:choose>
 		 					<c:when test="${sessionMap.isLastActivity}">
 		 						<fmt:message key="label.learning.submit" />
Index: lams_tool_daco/web/pages/learning/listRecords.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_daco/web/pages/learning/listRecords.jsp	(.../listRecords.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_daco/web/pages/learning/listRecords.jsp	(.../listRecords.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -47,7 +47,7 @@
 </c:if>
 
 <c:if test='${includeMode=="learning"}'>
-<div class="voffset10">
+<div class="mt-2">
 <div class="panel">
 	<c:out value="${daco.instructions}" escapeXml="false"/>
 </div>
@@ -67,20 +67,20 @@
 			<c:choose>
 			<c:when test="${horizontal}">
 
-				<div class="container-fluid no-gutter">
+				<div class="container-fluid g-0">
 					<div class="row">
-						<div class="col-xs-2" style="padding:0">
+						<div class="col-2" style="padding:0">
 							<strong><fmt:message key="label.learning.tableheader.questions" /></strong>
 						</div>
-						<div class="col-xs-9" style="padding-left:0">
+						<div class="col-9" style="padding-left:0">
 						<strong><fmt:message key="label.learning.tableheader.records" /></strong>
 						<c:if test="${fn:length(recordList) > 1}"></c:if>						
 						</div>
 					</div>
 
 					<div class="row">
-						<div class="col-xs-2" style="padding:0">
-							<table id="recordListTable" class="table table-striped table-bordered table-condensed">
+						<div class="col-2" style="padding:0">
+							<table id="recordListTable" class="table table-striped table-bordered table-sm">
 								<tr>
 								<td style="height:50px" style="padding-right:0"><fmt:message key="label.learning.tableheader.recordnumber" /></td>
 								</tr>
@@ -104,7 +104,7 @@
 							<c:param name="includeMode" value="${includeMode}" />
 						</c:url>
 
-						<div class="col-xs-10" style="padding-left:0;overflow: scroll" id="${elementIdPrefix}horizontalRecordListFrame"></div>
+						<div class="col-10" style="padding-left:0;overflow: scroll" id="${elementIdPrefix}horizontalRecordListFrame"></div>
 						<script type="text/javascript">
 							$("#${elementIdPrefix}horizontalRecordListFrame").load("${showRecordsUrl}");
 					    </script>
@@ -122,13 +122,13 @@
 						<fmt:message key="label.learning.heading.recordnumber" />&nbsp;${recordStatus.index+1}
 						<c:if test='${includeMode=="learning" and not finishedLock}'>
 						<%-- If the record can be edited, display these links. --%>
-							<i class="fa fa-pencil float-end roffset10" title="<fmt:message key="label.common.edit" />"
+							<i class="fa fa-pencil float-end me-2" title="<fmt:message key="label.common.edit" />"
 										onclick="javascript:editRecord('${sessionMapID}',${recordStatus.index+1})"></i>
-							<i class="fa fa-times  float-end roffset10" title="<fmt:message key="label.common.delete" />"
+							<i class="fa fa-times  float-end me-2" title="<fmt:message key="label.common.delete" />"
 										onclick="javascript:removeRecord('${sessionMapID}',${recordStatus.index+1})"></i>
 						</c:if>
 					</div>
-					<table class="table table-striped table-condensed">
+					<table class="table table-striped table-sm">
 						<c:forEach var="question" items="${daco.dacoQuestions}" varStatus="questionStatus">
 							<%-- "Generated" means that the table for a long/lat question was already generated
 								 and the current answer only needs to be filled in in the existing textfield.
@@ -191,6 +191,7 @@
 												<c:when test="${question.type==4}">
 													<input type="text" size="20" readonly="readonly" value="<c:out  value='${answer.answer}'/>">
 												</c:when>
+												
 												<c:when test="${question.type==5 || question.type==6}">
 													<c:choose>
 														<c:when test="${empty answer.fileName}">
@@ -202,16 +203,24 @@
 														</c:otherwise>
 													</c:choose>
 												</c:when>
+												
 												<c:when test="${question.type==7}">
 													<c:forEach var="answerOption" items="${question.answerOptions}" varStatus="status">
-														<input type="radio" readonly="readonly" 
-																<c:if test="${answer.answer==status.index+1}">
-																	checked="checked"
-																</c:if>>
-														&nbsp;<c:out value="${answerOption.answerOption}" escapeXml="true"/>
+														<div class="form-check">
+															<input type="radio" readonly="readonly" id="answerOption-${questionStatus.index}-${status.index}" class="form-check-input"
+																	<c:if test="${answer.answer==status.index+1}">
+																		checked="checked"
+																	</c:if>
+															>
+															&nbsp;
+															<label for="answerOption-${questionStatus.index}-${status.index}" class="form-check-label">
+																<c:out value="${answerOption.answerOption}" escapeXml="true"/>
+															</label>
+														</div>
 														<br />
 													</c:forEach>
 												</c:when>
+												
 												<c:when test="${question.type==8}">
 													<c:choose>
 														<c:when test="${empty answer.answer}">
@@ -226,15 +235,24 @@
 														</c:otherwise>
 													</c:choose>
 												</c:when>
+												
 												<c:when test="${question.type==9}">
 													<c:forEach var="answerOption" items="${question.answerOptions}" varStatus="status">
-														<input type="checkbox" disabled="disabled" id="${elementIdPrefix}checkbox-record${recordStatus.index+1}-question${questionStatus.index+1}-${status.index+1}">
-														&nbsp;<label for="${elementIdPrefix}checkbox-record${recordStatus.index+1}-question${questionStatus.index+1}-${status.index+1}"><c:out value="${answerOption.answerOption}" escapeXml="true"/></label>
+														<div class="form-check">
+															<input type="checkbox" disabled="disabled" class="form-check-input" 
+																id="${elementIdPrefix}checkbox-record${recordStatus.index+1}-question${questionStatus.index+1}-${status.index+1}"
+															>
+															&nbsp;
+															<label for="${elementIdPrefix}checkbox-record${recordStatus.index+1}-question${questionStatus.index+1}-${status.index+1}" class="form-check-label">
+																<c:out value="${answerOption.answerOption}" escapeXml="true"/>
+															</label>
+														</div>
 														<br />
 													</c:forEach>
 												</c:when>
+												
 												<c:when test="${question.type==10}">
-													<table class="table table-condensed table-no-border table-nonfluid">
+													<table class="table table-sm table-no-border table-nonfluid">
 														<tr>
 															<td width="80px">
 																<label><fmt:message key="label.learning.longlat.longitude" /></label>
Index: lams_tool_daco/web/pages/learning/listRecordsHorizontalPart.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_daco/web/pages/learning/listRecordsHorizontalPart.jsp	(.../listRecordsHorizontalPart.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_daco/web/pages/learning/listRecordsHorizontalPart.jsp	(.../listRecordsHorizontalPart.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -48,15 +48,15 @@
 		</c:otherwise>
 	</c:choose>
 
-	<table id="horizontalListTable" class="table table-striped table-bordered table-condensed">
+	<table id="horizontalListTable" class="table table-striped table-bordered table-sm">
 		<tr>
  			<c:forEach var="record" items="${recordList}" varStatus="recordStatus">
 				<td style="height:50px">
 					<span class="bigNumber">
 						${recordStatus.index+1}
 					</span>
 					<c:if test='${includeMode=="learning" and not finishedLock}'>
-						<span class="float-end roffset10">
+						<span class="float-end me-2">
 						<%-- If the record can be edited, display these links. --%>
 						<i class="fa fa-pencil" title="<fmt:message key="label.common.edit" />"
 									onclick="javascript:editRecord('${sessionMapID}',${recordStatus.index+1})"></i>
@@ -105,13 +105,15 @@
 									</script>
 								</c:if>
 							</c:when>
+							
 							<c:otherwise>
 								<c:set var="generated" value="true" />
-										<td class="fixedCellHeight ${questionStatus.first ? 'border-thick' : ''}">
+								<td class="fixedCellHeight ${questionStatus.first ? 'border-thick' : ''}">
 										<c:choose>
 											<c:when test="${question.type==1}">
 												<input type="text" size="45" readonly="readonly" value="<c:out  value='${answer.answer}'/>">
 											</c:when>
+											
 											<c:when test="${question.type==2}">
 												<textarea cols="35" 
 													<c:choose>
@@ -124,12 +126,15 @@
 													</c:choose>
 												 readonly="readonly">${answer.answer}</textarea>
 											</c:when>
+											
 											<c:when test="${question.type==3}">
 												<input type="text" size="10" readonly="readonly" value="<c:out  value='${answer.answer}'/>">
 											</c:when>
+											
  											<c:when test="${question.type==4}">
 												<input type="text" size="20" readonly="readonly" value="${answer.answer}">
 											</c:when>
+											
 											<c:when test="${question.type==5 || question.type==6}">
 												<c:choose>
 													<c:when test="${empty answer.fileName}">
@@ -141,26 +146,35 @@
 													</c:otherwise>
 												</c:choose>
 											</c:when>
+											
 											<c:when test="${question.type==7}">
-												<table class="table table-condensed table-no-border table-nonfluid">
+												<table class="table table-sm table-no-border table-nonfluid">
 													<tr>
 														<td>
 															<c:forEach var="answerOption" items="${question.answerOptions}" varStatus="status">
 																<c:if test="${status.index>0 && (status.index%3==0)}">
 																	</td>
 																	<td>
 																</c:if>
-																<input type="radio" readonly="readonly" 
-																	<c:if test="${answer.answer==status.index+1}">
-																		checked="checked"
-																	</c:if>>
-																&nbsp;<c:out value="${answerOption.answerOption}" escapeXml="true"/>
+																
+																<div class="form-check">
+																	<input type="radio" readonly="readonly" id="answerOption-${questionStatus.index}-${status.index}" class="form-check-input"
+																		<c:if test="${answer.answer==status.index+1}">
+																			checked="checked"
+																		</c:if>
+																	>
+																	&nbsp;
+																	<label for="answerOption-${questionStatus.index}-${status.index}" class="form-check-label">
+																		<c:out value="${answerOption.answerOption}" escapeXml="true"/>
+																	</label>
+																</div>
 																<br />
 															</c:forEach>
 														</td>
 													</tr>
 												</table>
 											</c:when>
+											
 											<c:when test="${question.type==8}">
 												<c:choose>
 													<c:when test="${empty answer.answer}">
@@ -175,25 +189,34 @@
 													</c:otherwise>
 												</c:choose>
 											</c:when>
+											
 											<c:when test="${question.type==9}">
-												<table class="table table-condensed table-no-border table-nonfluid">
+												<table class="table table-sm table-no-border table-nonfluid">
 													<tr>
 														<td>
 															<c:forEach var="answerOption" items="${question.answerOptions}" varStatus="status">
 																<c:if test="${status.index>0 && (status.index%3==0)}">
 																	</td>
 																	<td>
 																</c:if>
-																<input type="checkbox" disabled="disabled" id="checkbox-record${recordStatus.index+1}-question${questionStatus.index+1}-${status.index+1}">
-																&nbsp;<c:out value="${answerOption.answerOption}" escapeXml="true"/>
+																
+																<div class="form-check">
+																	<input type="checkbox" disabled="disabled" id="checkbox-record${recordStatus.index+1}-question${questionStatus.index+1}-${status.index+1}" class="form-check-input">
+																	&nbsp;
+																	
+																	<label for="checkbox-record${recordStatus.index+1}-question${questionStatus.index+1}-${status.index+1}" class="form-check-label">
+																		<c:out value="${answerOption.answerOption}" escapeXml="true"/>
+																	</label>
+																</div>
 																<br />
 															</c:forEach>
 														</td>
 													</tr>
 												</table>
 											</c:when>
+											
 											<c:when test="${question.type==10}">
-												<table class="table table-condensed table-no-border table-nonfluid">
+												<table class="table table-sm table-no-border table-nonfluid">
 													<tr>
 														<td width="80px">
 														<label><fmt:message key="label.learning.longlat.longitude" /></label>
@@ -219,7 +242,7 @@
 												</c:if>										
 											</c:when>
 										</c:choose>
-										</td>
+								</td>
 							</c:otherwise>
 						</c:choose>
 						
Index: lams_tool_daco/web/pages/learning/questionSummaries.jsp
===================================================================
diff -u -rdee1313f3a1d0a71354604278d1bfc6cb9d49a9d -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_daco/web/pages/learning/questionSummaries.jsp	(.../questionSummaries.jsp)	(revision dee1313f3a1d0a71354604278d1bfc6cb9d49a9d)
+++ lams_tool_daco/web/pages/learning/questionSummaries.jsp	(.../questionSummaries.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -23,7 +23,7 @@
 
 
 <c:if test='${includeMode=="learning"}'>
-<div class="voffset10">
+<div class="mt-2">
 <div class="panel">
 	<c:out value="${daco.instructions}" escapeXml="false"/>
 </div>
@@ -36,12 +36,12 @@
 	<fmt:message key="label.learning.tableheader.questions" />
 </div>
 
-<table class="table table-striped table-condensed" id="summaryTable">
-	<tr class="active">
+<table class="table table-striped table-sm" id="summaryTable">
+	<tr class="table-active">
 		<th></th>
 		<th colspan="2" class="singleSummaryCell"><fmt:message key="label.learning.tableheader.summary" /></th>
 	</tr>
-	<tr class="active">
+	<tr class="table-active">
 		<th></th>
 		<th class="singleSummaryCell">
 		<c:choose>
@@ -55,7 +55,7 @@
 		</th>
 		<th class="singleSummaryCell"><fmt:message key="label.learning.tableheader.summary.group" /></th>
 	</tr>
-	<tr class="active">
+	<tr class="table-active">
 		<td>
 			<fmt:message key="label.learning.heading.recordcount" />
 		</td>
@@ -227,6 +227,8 @@
 </div> <!--  end summary panel -->
 
 <c:if test='${includeMode=="learning"}'>
-	<button class="btn btn-default btn-disable-on-submit" onclick="javascript:refreshQuestionSummaries('${sessionMapID}')"><fmt:message key="label.common.summary.refresh" /></a>
+	<button class="btn btn-secondary btn-disable-on-submit" onclick="javascript:refreshQuestionSummaries('${sessionMapID}')">
+		<fmt:message key="label.common.summary.refresh" />
+	</button>
 </c:if>
 </div>
Index: lams_tool_doku/web/pages/learning/galleryWalk.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_doku/web/pages/learning/galleryWalk.jsp	(.../galleryWalk.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_doku/web/pages/learning/galleryWalk.jsp	(.../galleryWalk.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -76,7 +76,7 @@
 				}
 			});
 			
-			$('[data-toggle="tooltip"]').bootstrapTooltip();
+			$('[data-bs-toggle="tooltip"]').bootstrapTooltip();
 		});
 		
 		function finishSession(){
@@ -101,14 +101,18 @@
 	<p><c:out value="${dokumaran.description}" escapeXml="false" /></p>
 	
 	<c:if test="${not empty dokumaran.galleryWalkInstructions}">
-		<h4 class="voffset20" style="text-align: center"><fmt:message key="label.gallery.walk.instructions.header" /></h4>
+		<h4 class="text-center mt-4">
+			<fmt:message key="label.gallery.walk.instructions.header" />
+		</h4>
 		<p><c:out value="${dokumaran.galleryWalkInstructions}" escapeXml="false" /></p>
 	</c:if>
 		
 	<c:if test="${dokumaran.galleryWalkFinished and not dokumaran.galleryWalkReadOnly}">
-		<h4 class="voffset20" style="text-align: center"><fmt:message key="label.gallery.walk.ratings.header" /></h4>
-		<table id="gallery-walk-rating-table" class="table table-hover table-condensed">
-		  <thead class="thead-light">
+		<h4 class="text-center mt-4">
+			<fmt:message key="label.gallery.walk.ratings.header" />
+		</h4>
+		<table id="gallery-walk-rating-table" class="table table-hover table-sm">
+		  <thead class="table-light">
 		    <tr>
 		      <th scope="col"><fmt:message key="monitoring.label.group" /></th>
 		      <th scope="col"><fmt:message key="label.rating" /></th>
@@ -119,7 +123,7 @@
 				<tr>
 					<td>${groupSummary.sessionName}</td>
 					<td>
-						<lams:Rating itemRatingDto="${groupSummary.itemRatingDto}" 
+						<lams:Rating5 itemRatingDto="${groupSummary.itemRatingDto}" 
 									 isItemAuthoredByUser="true"
 									 hideCriteriaTitle="true" />
 					</td>
@@ -129,22 +133,23 @@
 		</table>
 	</c:if>
 	
-	<h4 class="voffset20" style="text-align: center"><fmt:message key="label.gallery.walk" /></h4>
+	<h4 class="text-center mt-4">
+		<fmt:message key="label.gallery.walk" />
+	</h4>
 	
 	<c:if test="${mode == 'author'}">
 		<lams:Alert5 type="info" id="gallery-walk-preview-info" close="false">
 			<fmt:message key="label.gallery.walk.preview" />
 		</lams:Alert5>
 	</c:if>
-	
 
 	<div id="doku-group-panels" class="panel-group" role="tablist" aria-multiselectable="true"> 
 		<c:forEach var="groupSummary" items="${summaryList}" varStatus="status">
 		
 		    <div class="panel panel-default doku-group-panel">
 		       <div class="panel-heading" role="tab" id="heading${groupSummary.sessionId}">
 		       	<span class="panel-title collapsable-icon-left">
-		       		<a class="collapsed" role="button" data-toggle="collapse" href="#collapse${groupSummary.sessionId}" 
+		       		<button type="button" class="btn btn-secondary collapsed" data-bs-toggle="collapse" data-bs-target="#collapse${groupSummary.sessionId}" 
 							aria-expanded="false" aria-controls="collapse${groupSummary.sessionId}" data-parent="#doku-group-panels">
 						<c:choose>
 							<c:when test="${toolSessionID == groupSummary.sessionId}">
@@ -154,14 +159,14 @@
 								<c:out value="${groupSummary.sessionName}" />
 							</c:otherwise>
 						</c:choose>
-					</a>
+					</button>
 				</span>
 		       </div>
 		       <div id="collapse${groupSummary.sessionId}" class="panel-collapse collapse etherpad-collapse" 
 		       	    role="tabpanel" aria-labelledby="heading${groupSummary.sessionId}">
 					<%-- Do not show rating to own group before Gallery Walk is finished --%>
 		       	    <c:if test="${not dokumaran.galleryWalkReadOnly and (dokumaran.galleryWalkFinished or mode == 'teacher' or toolSessionID != groupSummary.sessionId)}">
-		       	    	<lams:Rating itemRatingDto="${groupSummary.itemRatingDto}" showComments="true"
+		       	    	<lams:Rating5 itemRatingDto="${groupSummary.itemRatingDto}" showComments="true"
 								     isItemAuthoredByUser="${dokumaran.galleryWalkFinished or not hasEditRight or mode == 'teacher'}" />
 		       	    </c:if>
 		 
@@ -178,8 +183,8 @@
 		<div>
 			<c:choose>
 				<c:when test="${not dokumaran.galleryWalkFinished}">
-					<button data-toggle="tooltip" 
-							class="btn btn-default voffset5 float-end ${mode == 'author' ? '' : 'disabled'}"
+					<button data-bs-toggle="tooltip" 
+							class="btn btn-secondary mt-2 float-end ${mode == 'author' ? '' : 'disabled'}"
 							<c:choose>
 								<c:when test="${mode == 'author'}">
 									title="<fmt:message key='label.gallery.walk.wait.finish.preview' />"
@@ -195,12 +200,12 @@
 				</c:when>
 				<c:when test="${sessionMap.reflectOn and not sessionMap.userFinished}">
 					<button name="FinishButton" id="finish-button"
-							onclick="return continueReflect()" class="btn btn-default voffset5 float-end">
+							onclick="return continueReflect()" class="btn btn-primary mt-2 float-end">
 						<fmt:message key="label.continue" />
 					</button>
 				</c:when>
 				<c:otherwise>
-					<a href="#nogo" name="FinishButton" id="finish-button" class="btn btn-primary voffset5 float-end na">
+					<a href="#nogo" name="FinishButton" id="finish-button" class="btn btn-primary mt-2 float-end na">
 						<span class="nextActivity">
 							<c:choose>
 			 					<c:when test="${sessionMap.isLastActivity}">
Index: lams_tool_doku/web/pages/learning/learning.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_doku/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_doku/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -71,7 +71,7 @@
 				</c:if>
 			});
 			
-			$('[data-toggle="tooltip"]').bootstrapTooltip();
+			$('[data-bs-toggle="tooltip"]').bootstrapTooltip();
 		});
 		
 		if (${!hasEditRight && mode != "teacher" && !finishedLock}) {
@@ -279,7 +279,7 @@
 					</c:choose>
 
 					<c:if test="${mode != 'teacher'}">
-						<button name="ContinueButton" onclick="return continueReflect()" class="btn btn-sm btn-secondary voffset5">
+						<button name="ContinueButton" onclick="return continueReflect()" class="btn btn-sm btn-secondary mt-2">
 						<fmt:message key="label.edit" />
 						</button>
 					</c:if>
@@ -292,7 +292,7 @@
 			<div class="activity-bottom-buttons">
 				<c:choose>
 					<c:when test="${dokumaran.galleryWalkEnabled}">
-						<button data-toggle="tooltip" id="continue-button"
+						<button data-bs-toggle="tooltip" id="continue-button"
 								class="btn btn-primary ${mode == 'author' ? '' : 'disabled'}"
 								<c:choose>
 									<c:when test="${mode == 'author'}">
Index: lams_tool_forum/web/jsps/learning/message/bodyarea.jsp
===================================================================
diff -u -rb7aaf1918d51259a93067809b0d1627c2017be33 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_forum/web/jsps/learning/message/bodyarea.jsp	(.../bodyarea.jsp)	(revision b7aaf1918d51259a93067809b0d1627c2017be33)
+++ lams_tool_forum/web/jsps/learning/message/bodyarea.jsp	(.../bodyarea.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -17,9 +17,9 @@
 	</c:choose>
  
 	<c:if test="${sessionMap.allowAnonym || sessionMap.maxCharacters > 0 || sessionMap.minCharacters > 0}">
-	<div class="row voffset10">
+	<div class="row mt-2">
 
-	<div class="col-xs-12 col-sm-6">
+	<div class="col-12 col-sm-6">
 	
 	<%-- If limitChars == 0, then we don't want to limit the characters at all. --%>
 	<c:if test="${sessionMap.maxCharacters > 0}">
@@ -143,24 +143,31 @@
 	</c:if>
 	</div>
 	
-	<div class="col-xs-12 col-sm-6 text-right ">
-	<c:if test="${sessionMap.allowAnonym}">
-		<div class="checkbox form-control-inline">
-		<label for="isAnonymous"><form:checkbox
-				path="message.isAnonymous" id="isAnonymous" /> <fmt:message
-				key="label.post.anonomously" /></label>
-		</div>&nbsp;<a tabindex="0" role="button" data-toggle="popover"><i class="fa fa-info-circle"></i></a>
-	
-		<%-- Use c:out to escape any quotes in the I18N string. Then use html: true converts any escaped quotes back --%>
-		<%-- into real quotes. Should be safe from XSS attack as the string is coming from a translation file. --%>	
-		<fmt:message key="label.anonymous.tooltip" var="ANONYMOUS_TOOLTIP_VAR"></fmt:message>		
- 		<script type="text/javascript">
-		$(document).ready(function() {
-			var ANONYMOUS_TOOLTIP = '<c:out value="${ANONYMOUS_TOOLTIP_VAR}" />';
-	    		$('[data-toggle="popover"]').popover({title: "", content: ANONYMOUS_TOOLTIP, placement:"auto left", delay: 50, trigger:"hover focus", html: true});
-		});
-		</script>
- 	</c:if>
+	<div class="col-12 col-sm-6 text-end">
+		<c:if test="${sessionMap.allowAnonym}">
+			<div class="checkbox form-control-inline form-check">
+				<form:checkbox path="message.isAnonymous" id="isAnonymous" cssClass="form-check-input"/> 
+				
+				<label for="isAnonymous" class="form-check-label">	
+					<fmt:message key="label.post.anonomously" />
+				</label>
+			</div>
+			&nbsp;
+			<a tabindex="0" role="button" data-bs-toggle="popover">
+				<i class="fa fa-info-circle"></i>
+			</a>
+		
+			<%-- Use c:out to escape any quotes in the I18N string. Then use html: true converts any escaped quotes back --%>
+			<%-- into real quotes. Should be safe from XSS attack as the string is coming from a translation file. --%>	
+			<fmt:message key="label.anonymous.tooltip" var="ANONYMOUS_TOOLTIP_VAR"></fmt:message>
+					
+	 		<script type="text/javascript">
+			$(document).ready(function() {
+				var ANONYMOUS_TOOLTIP = '<c:out value="${ANONYMOUS_TOOLTIP_VAR}" />';
+		    		$('[data-bs-toggle="popover"]').popover({title: "", content: ANONYMOUS_TOOLTIP, placement:"auto left", delay: 50, trigger:"hover focus", html: true});
+			});
+			</script>
+	 	</c:if>
 	</div>
 
 	</div> <!-- end row -->
Index: lams_tool_forum/web/jsps/learning/message/msgattachment.jsp
===================================================================
diff -u -r2de8f805211b6433aff4efd6fa9275a1b9933033 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_forum/web/jsps/learning/message/msgattachment.jsp	(.../msgattachment.jsp)	(revision 2de8f805211b6433aff4efd6fa9275a1b9933033)
+++ lams_tool_forum/web/jsps/learning/message/msgattachment.jsp	(.../msgattachment.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -4,7 +4,7 @@
 <input type="hidden" name="hasAttachment" value="${topic.hasAttachment}"/>
 <c:if test="${topic.hasAttachment}">
 		<c:forEach var="file" items="${topic.message.attachments}">
-		    <a id="removeAttachmentButton" href="#" onclick="removeAtt('${sessionMapID}')" class="btn btn-default btn-xs"><i class="fa fa-trash-o"></i></a>
+		    <a id="removeAttachmentButton" href="#" onclick="removeAtt('${sessionMapID}')" class="btn btn-secondary btn-sm"><i class="fa fa-trash-o"></i></a>
 			<fmt:message key="message.label.attachment"/>: 
 			<c:set var="downloadURL">
 				<lams:WebAppURL />download/?uuid=${file.fileDisplayUuid}&versionID=${file.fileVersionId}&preferDownload=true
@@ -19,7 +19,7 @@
 		<input type="hidden" id="tmpFileUploadId" name="tmpFileUploadId"
 			   value="${empty messageForm.tmpFileUploadId ? tmpFileUploadId : messageForm.tmpFileUploadId}" />
 		<label for="image-upload-area"><fmt:message key="message.label.attachment" /></label>
-		<div id="image-upload-area" class="voffset20"></div>
+		<div id="image-upload-area" class="mt-4"></div>
 		<script>
 			initFileUpload('${empty messageForm.tmpFileUploadId ? tmpFileUploadId : messageForm.tmpFileUploadId}', true, '<lams:user property="localeLanguage"/>');
 		</script>
Index: lams_tool_forum/web/jsps/learning/message/msgview.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_forum/web/jsps/learning/message/msgview.jsp	(.../msgview.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_forum/web/jsps/learning/message/msgview.jsp	(.../msgview.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -18,11 +18,11 @@
 <%--  outermsg${msgDto.message.uid} is used to replace existing message areas when a message is edited. --%>
 <c:choose>
 	<c:when test='${(msgDto.level <= 1)}'>
-		<div class="row no-gutter voffset5">
-			<div class="col-xs-12" id="outermsg${msgDto.message.uid}">
+		<div class="row g-0 mt-2">
+			<div class="col-12" id="outermsg${msgDto.message.uid}">
 	</c:when>
 	<c:otherwise>
-		<div class="no-gutter voffset2">
+		<div class="g-0 mt-1">
 			<div style="margin-left:<c:out value="${(msgDto.level-1)*indent}"/>px;" id="outermsg${msgDto.message.uid}">
 	</c:otherwise>
 </c:choose>
@@ -107,7 +107,7 @@
 
 		<c:if test="${not empty msgDto.message.attachments}">
 			<div id="attachments${msgDto.message.uid}" class="attachments">
-				<i class="fa fa-paperclip loffset5" title="<fmt:message key='message.label.attachment'/>"></i>
+				<i class="fa fa-paperclip ms-1" title="<fmt:message key='message.label.attachment'/>"></i>
 				<c:if test='${(not hidden) || (hidden && sessionMap.mode == "teacher")}'>
 					<c:forEach var="file" items="${msgDto.message.attachments}">
 						<c:set var="downloadURL">
Index: lams_tool_forum/web/jsps/learning/message/topiceditform.jsp
===================================================================
diff -u -r24ebb6c91f49a10f1e5718036b3a3c1a80c3314f -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_forum/web/jsps/learning/message/topiceditform.jsp	(.../topiceditform.jsp)	(revision 24ebb6c91f49a10f1e5718036b3a3c1a80c3314f)
+++ lams_tool_forum/web/jsps/learning/message/topiceditform.jsp	(.../topiceditform.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -1,13 +1,13 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<div class="form-group">
+<div class="mb-3">
     <label><fmt:message key="message.label.subject" />&nbsp;</label>
     <form:input size="50" tabindex="1" value="${message.subject}" path="message.subject" maxlength="60"/> &nbsp;
 	<form:errors path="message.subject"/>
 	<lams:errors path="message.subject"/>
 </div>
 
-<div class="form-group">
+<div class="mb-3">
     <label><fmt:message key="message.label.body" />  *</label><BR/>
 	<%@include file="bodyarea.jsp"%>
 </div>
@@ -22,10 +22,10 @@
 	<lams:WaitingSpinner id="itemAttachmentArea_Busy"/>
 </c:if>
 
-<div class="btn-group-xs voffset5 pull-right">
-<button name="goback" id="cancelButton" onclick="javascript:cancelEdit();" class="btn btn-default">
-	<fmt:message key="button.cancel" />
-</button>
+<div class="btn-group-sm mt-2 float-end">
+	<button name="goback" id="cancelButton" onclick="javascript:cancelEdit();" class="btn btn-secondary">
+		<fmt:message key="button.cancel" />
+	</button>
 
-<input type="submit" class="btn btn-default" id="submitButton" value="<fmt:message key="button.submit" />"/>
+	<input type="submit" class="btn btn-secondary" id="submitButton" value="<fmt:message key="button.submit" />"/>
 </div>
Index: lams_tool_forum/web/jsps/learning/message/topicform.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_forum/web/jsps/learning/message/topicform.jsp	(.../topicform.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_forum/web/jsps/learning/message/topicform.jsp	(.../topicform.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -1,22 +1,22 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<div class="form-group">
+<div class="mb-3">
     <label><fmt:message key="message.label.subject" />&nbsp;</label>
     <form:input size="50" tabindex="1" value="${message.subject}" path="message.subject" maxlength="60"/> &nbsp;
     <lams:errors path="message.subject"/>
 </div>
 
-<div class="form-group">
+<div class="mb-3">
     <label><fmt:message key="message.label.body" />  *</label><BR/>
 	<%@include file="bodyarea.jsp"%>
 </div>
 
 <c:if test="${sessionMap.allowUpload}">
-	<div class="form-group">
+	<div class="mb-3">
 		<input type="hidden" id="tmpFileUploadId" name="tmpFileUploadId"
 	   		value="${messageForm.tmpFileUploadId}" />
 		<label for="image-upload-area"><fmt:message key="message.label.attachment" /></label>
-		<div id="image-upload-area" class="voffset20"></div>
+		<div id="image-upload-area" class="mt-4"></div>
 		<script>
 			initFileUpload('${messageForm.tmpFileUploadId}', true, '<lams:user property="localeLanguage"/>');
 		</script>
@@ -27,9 +27,9 @@
 <c:set var="backToForum">
 	<lams:WebAppURL />learning/viewForum.do?toolSessionID=${sessionMap.toolSessionID}&hideReflection=${sessionMap.hideReflection}
 </c:set>
-<input type="submit" value="<fmt:message key="button.submit" />" class="btn btn-primary voffset5 float-end" id="submitButton"/>
+<input type="submit" value="<fmt:message key="button.submit" />" class="btn btn-primary mt-2 float-end" id="submitButton"/>
 
-<button name="goback" onclick="javascript:location.href='${backToForum}';" class="btn btn-default voffset5 float-end" id="cancelButton">
+<button name="goback" onclick="javascript:location.href='${backToForum}';" class="btn btn-secondary mt-2 float-end" id="cancelButton">
 	<fmt:message key="button.cancel" />
 </button>&nbsp;
 
Index: lams_tool_forum/web/jsps/learning/message/topiclist.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_forum/web/jsps/learning/message/topiclist.jsp	(.../topiclist.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_forum/web/jsps/learning/message/topiclist.jsp	(.../topiclist.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -11,11 +11,11 @@
 		<fmt:message key="label.topics" />
 
 		<div class="btn-group float-end">
-			<a href="javascript:location.href='${refresh}';" type="button" class="btn btn-xs btn-default"><i class="fa fa-xm fa-refresh"></i>
+			<a href="javascript:location.href='${refresh}';" type="button" class="btn btn-sm btn-secondary"><i class="fa fa-xm fa-refresh"></i>
 				<fmt:message key="label.refresh" /></a>
 
 			<c:if test='${(not sessionMap.finishedLock) && (sessionMap.allowNewTopics)}'>
-				<a href="javascript:location.href='${newtopic}';" type="button" class="btn btn-xs btn-default"> <i
+				<a href="javascript:location.href='${newtopic}';" type="button" class="btn btn-sm btn-secondary"> <i
 					class="fa fa-xm fa-plus"></i> <fmt:message key="label.newtopic" /></a>
 			</c:if>
 		</div>
@@ -24,16 +24,16 @@
 	</div>
 	<div class="panel-body">
 		<div class="table-responsive">
-			<table id="topicTable" class="table table-hover table-condensed">
+			<table id="topicTable" class="table table-hover table-sm">
 				<thead>
 					<tr>
-						<th class="col-xs-6"><fmt:message key="lable.topic.title.subject" /></th>
-						<th class="col-xs-2"><fmt:message key="lable.topic.title.startedby" /></th>
-						<th class="col-xs-1 d-none d-sm-block"><fmt:message key="lable.topic.title.replies" /></th>
-						<th class="col-xs-1 d-none d-sm-block"><fmt:message key="lable.topic.title.repliesnew" /></th>
-						<th class="col-xs-2"><fmt:message key="lable.topic.title.update" /></th>
+						<th class="col-6"><fmt:message key="lable.topic.title.subject" /></th>
+						<th class="col-2"><fmt:message key="lable.topic.title.startedby" /></th>
+						<th class="col-1 d-none d-sm-block"><fmt:message key="lable.topic.title.replies" /></th>
+						<th class="col-1 d-none d-sm-block"><fmt:message key="lable.topic.title.repliesnew" /></th>
+						<th class="col-2"><fmt:message key="lable.topic.title.update" /></th>
 						<c:if test="${not sessionMap.allowNewTopics and sessionMap.minimumReply ne 0}">
-							<th class="col-xs-2">&nbsp;</th>
+							<th class="col-2">&nbsp;</th>
 						</c:if>
 					</tr>
 				</thead>
@@ -52,7 +52,7 @@
 										</c:otherwise>
 									</c:choose>
 								</a> <c:if test="${topic.hasAttachment}">
-									<i class="fa fa-paperclip loffset5" title="<fmt:message key='message.label.attachment'/>"></i>
+									<i class="fa fa-paperclip ms-1" title="<fmt:message key='message.label.attachment'/>"></i>
 								</c:if></td>
 							<td><%-- Author Name --%>
 							<c:set var="msgAuthor" value="${topic.author}" />
Index: lams_tool_forum/web/jsps/learning/message/topicreplyform.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_forum/web/jsps/learning/message/topicreplyform.jsp	(.../topicreplyform.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_forum/web/jsps/learning/message/topicreplyform.jsp	(.../topicreplyform.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -1,22 +1,22 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<div class="form-group">
+<div class="mb-3">
 	<label><fmt:message key="message.label.subject" />&nbsp;</label>&nbsp;
 	<form:input cssClass="form-control" tabindex="1" path="message.subject" value="${message.subject}" maxlength="60" />
 	&nbsp;
 	<lams:errors path="message.subject"/>
 </div>
-<div class="form-group">
+<div class="mb-3">
 	<label><fmt:message key="message.label.body" /> *</label><BR />
 	<%@include file="bodyarea.jsp"%>
 </div>
 <c:if test="${sessionMap.allowUpload}">
 
-	<div class="form-group">
+	<div class="mb-3">
 		<input type="hidden" id="tmpFileUploadId" name="tmpFileUploadId"
 	   		value="${messageForm.tmpFileUploadId}" />
 		<label for="image-upload-area"><fmt:message key="message.label.attachment" /></label>
-		<div id="image-upload-area" class="voffset20"></div>
+		<div id="image-upload-area" class="mt-4"></div>
 		<script>
 			initFileUpload('${messageForm.tmpFileUploadId}', true, '<lams:user property="localeLanguage"/>');
 		</script>
@@ -26,10 +26,10 @@
 	<lams:WaitingSpinner id="itemAttachmentArea_Busy"/>
 </c:if>
 
-<div class="btn-group-xs voffset5 float-end">
+<div class="btn-group-sm mt-2 float-end">
 	<button name="goback" id="cancelButton" onclick="javascript:cancelReply();"
-		class="btn btn-default roffset5">
+		class="btn btn-secondary me-2">
 		<fmt:message key="button.cancel" />
 	</button>
-	<input type="submit" class="btn btn-default" id="submitButton" value="<fmt:message key="button.submit" />"/>
+	<input type="submit" class="btn btn-secondary" id="submitButton" value="<fmt:message key="button.submit" />"/>
 </div>
Index: lams_tool_forum/web/jsps/learning/message/topicview.jsp
===================================================================
diff -u -rb71c9cb2f96eb891545d32aaca8904051d1e00d5 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_forum/web/jsps/learning/message/topicview.jsp	(.../topicview.jsp)	(revision b71c9cb2f96eb891545d32aaca8904051d1e00d5)
+++ lams_tool_forum/web/jsps/learning/message/topicview.jsp	(.../topicview.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -93,7 +93,7 @@
 			<c:set var="messageTablename" value="tree${msgDto.message.uid}" />
 				<!--  start thread  -->
 				<div id="thread${msgDto.message.uid}" class="clearfix">
-				<table id="${messageTablename}" class="col-xs-12">
+				<table id="${messageTablename}" class="col-12">
 					<tr data-tt-id="${msgDto.message.uid}"><td>
 			</c:when>
 			<c:otherwise>
@@ -134,6 +134,8 @@
 			<c:set var="more">
 				<lams:WebAppURL />learning/viewTopicNext.do?sessionMapID=${sessionMapID}&topicID=${sessionMap.rootUid}&create=${topic.message.created.time}&hideReflection=${sessionMap.hideReflection}&pageLastId=${maxThreadUid}&size=${pageSize}
 			</c:set>
-			<a href="<c:out value="${more}"/>" class="btn btn-xs btn-default"><fmt:message key="label.show.more.messages" /></a>
+			<a href="<c:out value="${more}"/>" class="btn btn-sm btn-secondary">
+				<fmt:message key="label.show.more.messages" />
+			</a>
 		</div>
 	</c:if>	
Index: lams_tool_forum/web/jsps/learning/viewforum.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_forum/web/jsps/learning/viewforum.jsp	(.../viewforum.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_forum/web/jsps/learning/viewforum.jsp	(.../viewforum.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -184,7 +184,7 @@
 						<c:if test='${sessionMap.mode != "teacher"}'>
 							<button name="continue"
 								onclick="javascript:location.href='${continue}';"
-								class="btn btn-default float-start" id="editReflection">
+								class="btn btn-secondary float-start" id="editReflection">
 								<fmt:message key="label.edit" />
 							</button>
 						</c:if>
@@ -198,13 +198,13 @@
 					<c:when	test="${sessionMap.reflectOn && (not sessionMap.userFinished)}">
 						<button name="continue"
 							onclick="javascript:location.href='${continue}';"
-							class="btn btn-primary voffset5 float-end">
+							class="btn btn-primary mt-2 float-end">
 							<fmt:message key="label.continue" />
 						</button>
 					</c:when>
 		
 					<c:otherwise>
-						<a href="#nogo" name="finish" id="finishButton" class="btn btn-primary voffset5 float-end na">
+						<a href="#nogo" name="finish" id="finishButton" class="btn btn-primary mt-2 float-end na">
 							<span class="nextActivity">
 								<c:choose>
 				 					<c:when test="${sessionMap.isLastActivity}">
Index: lams_tool_forum/web/jsps/learning/viewtopic.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_forum/web/jsps/learning/viewtopic.jsp	(.../viewtopic.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_forum/web/jsps/learning/viewtopic.jsp	(.../viewtopic.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -130,16 +130,16 @@
 		<c:set var="buttonPanel">
 			<c:set var="refreshTopicURL"></c:set>
 				<!--  Button Panel -->
-				<div class="row no-gutter">
-					<div class="col-xs-12">
-						<a href="javascript:refreshTopic();" class="btn btn-sm btn-secondary voffset5  float-start" role="button"> <fmt:message
+				<div class="row g-0">
+					<div class="col-12">
+						<a href="javascript:refreshTopic();" class="btn btn-sm btn-secondary mt-2  float-start" role="button"> <fmt:message
 								key="label.refresh" />
 						</a>
 						<c:set var="backToForum">
 							<lams:WebAppURL />learning/viewForum.do?mode=${sessionMap.mode}&sessionMapID=${sessionMapID}&toolSessionID=${sessionMap.toolSessionID}&hideReflection=${sessionMap.hideReflection}
 						</c:set>
 						<button name="backToForum" onclick="javascript:location.href='${backToForum}';"
-							class="btn btn-sm btn-primary voffset5 float-end">
+							class="btn btn-sm btn-primary mt-2 float-end">
 							<fmt:message key="label.back.to.forum" />
 						</button>
 					</div>
Index: lams_tool_images/web/pages/learning/learning.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_images/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_images/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -101,7 +101,7 @@
 						<c:forEach var="image" items="${sessionMap.imageGalleryList}" varStatus="status">
 							<c:set var="description"><div><span class="caption-description">${image.descriptionEscaped}</span></c:set>
 							<c:if test="${!image.createByAuthor && (image.createBy != null)}">
-								<c:set var="portrait"><div class="roffset5"><lams:Portrait userId="${image.createBy.userId}"/></div></c:set>
+								<c:set var="portrait"><div class="me-2"><lams:Portrait userId="${image.createBy.userId}"/></div></c:set>
 								<c:set var="portrait">${fn:replace(portrait, "'", "\\'")}</c:set> <%-- escape the url --%>
 								<c:set var="imageAddedBy"><div class="caption-description"><fmt:message key="label.learning.added.by" />&nbsp;<c:out value="${image.createBy.firstName} ${image.createBy.lastName}" escapeXml="true"/></div></c:set>
 								<c:set var="description"><table><tr><td>${portrait}</td><td>${description}${imageAddedBy}</td></tr></table></c:set>
@@ -230,7 +230,7 @@
 		<%--Reflection--------------------------------------------------%>
 
 		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn}">
-			<div class="panel panel-default voffset10">
+			<div class="panel panel-default mt-2">
 				<div class="panel-heading panel-title">
 					<fmt:message key="title.reflection" />
 				</div>
@@ -258,7 +258,7 @@
 					</div>
 
 					<c:if test="${mode != 'teacher'}">
-						<button name="FinishButton" onclick="return continueReflect()" class="btn btn-default float-start">
+						<button name="FinishButton" onclick="return continueReflect()" class="btn btn-secondary float-start">
 							<fmt:message key="label.edit" />
 						</button>
 					</c:if>
@@ -269,7 +269,7 @@
 		<%--Bottom buttons-------------------------------------------%>
 
 		<c:if test="${mode != 'teacher'}">
-			<div id="learner-submit" class="voffset10"
+			<div id="learner-submit" class="mt-2"
 				<c:if test="${imageGallery.minimumRates ne 0 && empty sessionMap.currentImage}">style="display:none;"</c:if>
 			>
 				<c:choose>
Index: lams_tool_images/web/pages/learning/notebook.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_images/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_images/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -37,7 +37,7 @@
 
 			<textarea id="focused" rows="5" name="entryText" class="form-control"></textarea>
 
-			<a href="#nogo" class="btn btn-primary voffset5 float-end" id="finishButton"">
+			<a href="#nogo" class="btn btn-primary mt-2 float-end" id="finishButton"">
 				<div class="na"> 
 					<c:choose>
 						<c:when test="${sessionMap.isLastActivity}">
Index: lams_tool_images/web/pages/learning/parts/commentsarea.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_images/web/pages/learning/parts/commentsarea.jsp	(.../commentsarea.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_images/web/pages/learning/parts/commentsarea.jsp	(.../commentsarea.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -63,7 +63,7 @@
 	
 	<c:if test="${imageGallery.allowRank && isImageSelected}">
 		
-		<lams:Rating itemRatingDto="${sessionMap.itemRatingDto}" disabled="${finishedLock}" isItemAuthoredByUser="${sessionMap.isAuthor}"
+		<lams:Rating5 itemRatingDto="${sessionMap.itemRatingDto}" disabled="${finishedLock}" isItemAuthoredByUser="${sessionMap.isAuthor}"
 				maxRates="${imageGallery.maximumRates}" countRatedItems="${sessionMap.countRatedItems}"
 				minNumberWordsLabel="label.minimum.number.words" />
 		<br><br>
@@ -77,13 +77,14 @@
 				<form:form action="vote.do" method="post" modelAttribute="imageRatingForm" id="voting-form">
 					<input type="hidden" name="sessionMapID" value="${sessionMapID}"/>
 					<input type="hidden" name="imageUid" value="${sessionMap.currentImage.uid}"/>
-								
-					<p class="voffset5" style="margin-right: 0px">
-						<input type="checkbox" name="vote" class="noBorder" id="voting-form-checkbox" 
+
+					<div class="form-check mt-2 me-0">
+						<input type="checkbox" name="vote" class="form-check-input" id="voting-form-checkbox" 
 								<c:if test="${finishedLock}">disabled="disabled"</c:if>	
 								<c:if test="${sessionMap.isVoted}">checked="checked"</c:if>	
 						/>
-						<label for="voting-form-checkbox" id="voting-form-label">
+						
+						<label for="voting-form-checkbox" id="voting-form-label" class="form-check-label">
 							<c:choose>
 								<c:when test="${sessionMap.isVoted}">
 									<fmt:message key='label.learning.unvote'/>
@@ -93,7 +94,7 @@
 								</c:otherwise>
 							</c:choose>
 						</label>
-					</p>
+					</div>
 				</form:form>							
 			</c:if>
 			
@@ -122,6 +123,6 @@
 	</div>
 							
 	<c:if test="${imageGallery.allowShareImages && !finishedLock}">
-		<div id="new-image-input-area" class="voffset20"></div>
+		<div id="new-image-input-area" class="mt-4"></div>
 	</c:if>	
 </c:if>
\ No newline at end of file
Index: lams_tool_imscc/web/pages/itemreview/instructionsnav.jsp
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_imscc/web/pages/itemreview/instructionsnav.jsp	(.../instructionsnav.jsp)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_imscc/web/pages/itemreview/instructionsnav.jsp	(.../instructionsnav.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -94,14 +94,14 @@
 
 		<div class="container-fluid" id="instructions">
 		  <div class="row">
-			<div class="col-xs-12 ">
+			<div class="col-12 ">
 				<c:choose>
 					<c:when test="${reflectOn && runAuto}">
 						<input type="button" id="FinishInstruction" name="FinishInstruction"
-							onClick="javascript:continueReflect()" class="btn btn-primary pull-right roffset5" value="<fmt:message key='label.continue' />" />
+							onClick="javascript:continueReflect()" class="btn btn-primary float-end me-2" value="<fmt:message key='label.continue' />" />
 					</c:when>
 					<c:otherwise>
-						<input type="button" id="FinishInstruction" name="FinishInstruction" class="btn btn-primary pull-right roffset5" value="<fmt:message key='label.finish' />" />
+						<input type="button" id="FinishInstruction" name="FinishInstruction" class="btn btn-primary float-end me-2" value="<fmt:message key='label.finish' />" />
 					</c:otherwise>
 				</c:choose>
 			</div>
Index: lams_tool_imscc/web/pages/itemreview/openurl.jsp
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_imscc/web/pages/itemreview/openurl.jsp	(.../openurl.jsp)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_imscc/web/pages/itemreview/openurl.jsp	(.../openurl.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -16,7 +16,7 @@
 				<div class="panel-heading panel-title ">
 					<div class="row">
 						<a href="javascript:;" onclick="javascipt:launchPopup('<c:url value='${popupUrl}'/>','popupUrl');"
-								class="btn btn-primary pull-right roffset5">
+								class="btn btn-primary float-end me-2">
 							<fmt:message key="open.in.new.window" />
 						</a>
 					</div>
Index: lams_tool_imscc/web/pages/learning/learning.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_imscc/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_imscc/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -56,7 +56,7 @@
 		<lams:errors/>
 
 		<div class="table-responsive">
-			<table class="table table-hover table-condensed">
+			<table class="table table-hover table-sm">
 				<thead>
 					<tr>
 						<th width="70%">
@@ -92,7 +92,7 @@
 		<%--Reflection--------------------------------------------------%>
 
 		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn}">
-			<div class="panel panel-default voffset10">
+			<div class="panel panel-default mt-2">
 				
 				<div class="panel-heading panel-title">
 					<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true"/>
@@ -109,7 +109,7 @@
 					</c:choose>
 	
 					<c:if test="${mode != 'teacher'}">
-						<button name="FinishButton" onclick="return continueReflect()" class="btn btn-default loffset10">
+						<button name="FinishButton" onclick="return continueReflect()" class="btn btn-secondary ms-2">
 							<fmt:message key="label.edit" />
 						</button>
 					</c:if>
@@ -120,7 +120,7 @@
 		<%--Finish buttons--------------------------------------------------%>
 
 		<c:if test="${mode != 'teacher'}">
-			<div class="voffset10 float-end">
+			<div class="mt-2 float-end">
 				<c:choose>
 					<c:when test="${sessionMap.reflectOn && (not sessionMap.userFinished)}">
 						<button name="FinishButton" onclick="return continueReflect()" class="btn btn-primary">
Index: lams_tool_imscc/web/pages/learning/notebook.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_imscc/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_imscc/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -43,7 +43,7 @@
 
 			<form:textarea id="focused" rows="5" path="entryText" cssClass="form-control" />
 
-			<div class="voffset10 float-end">
+			<div class="mt-2 float-end">
 				<a href="#nogo" class="btn btn-primary " id="finishButton">
 					<span class="na">
 						<c:choose>
Index: lams_tool_lamc/web/learning/AnswersContent.jsp
===================================================================
diff -u -r39898a6bc099395132ff585dae1a8848058b86bb -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_lamc/web/learning/AnswersContent.jsp	(.../AnswersContent.jsp)	(revision 39898a6bc099395132ff585dae1a8848058b86bb)
+++ lams_tool_lamc/web/learning/AnswersContent.jsp	(.../AnswersContent.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -152,7 +152,7 @@
 		</c:if>
 		<!-- End announcements and advanced settings -->
 
-		<div class="form-group">
+		<div class="mb-3">
 			<form:form id="mcLearningForm" modelAttribute="mcLearningForm" action="displayMc.do" enctype="multipart/form-data"
 				method="POST" target="_self">
 				<form:hidden path="toolContentID" />
Index: lams_tool_lamc/web/learning/CombinedAnswersContent.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_lamc/web/learning/CombinedAnswersContent.jsp	(.../CombinedAnswersContent.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_lamc/web/learning/CombinedAnswersContent.jsp	(.../CombinedAnswersContent.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -4,8 +4,8 @@
 
   <c:forEach var="answerDto" items="${requestScope.learnerAnswerDtos}">
 
-    <div class="row no-gutter">
-      <div class="col-xs-12">
+    <div class="row g-0">
+      <div class="col-12">
         <div class="panel panel-default">
           <div class="panel-heading">
             <table>
@@ -36,30 +36,30 @@
           <div class="panel-body">
             <!-- Answer options begin -->
             <div class="table-responsive">
-              <table class="table table-hover table-condensed">
+              <table class="table table-hover table-sm">
                 <tbody>
                 
                   <c:forEach var="option" items="${answerDto.options}" varStatus="status">
                     <tr>
                     
-                      <td class="text-nowrap" style="vertical-align: top;">
-                      	<input type="radio" id="${answerDto.questionUid}-${option.qbOption.uid}" name="checkedCa${answerDto.questionUid}" class="noBorder" 
-                         		value="${answerDto.questionUid}-${option.qbOption.uid}" 
-                           		<c:if test="${option.selected}">checked="checked"</c:if>
-                            		<c:if test="${!hasEditRight}">disabled="disabled"</c:if> 
-                      	>
-                              
-	                     <c:if test="${isPrefixAnswersWithLetters}">
-	                     	<c:set var="seqLetter" value="${status.index}"/>
-	                     	<%=Character.toChars(97 + (Integer)pageContext.getAttribute("seqLetter"))%>)
-	                     </c:if>
-                       </td>
-                       
-	                   <td width="100%">
-	                       <label for="${answerDto.questionUid}-${option.qbOption.uid}">
-	                           <c:out value="${option.qbOption.name}" escapeXml="false" />
-	                       </label>
-	                    </td>
+                      <td class="text-nowrap" width="100%">
+                      	<div class="form-check">
+	                      	<input type="radio" id="${answerDto.questionUid}-${option.qbOption.uid}" name="checkedCa${answerDto.questionUid}" class="form-check-input" 
+	                         		value="${answerDto.questionUid}-${option.qbOption.uid}" 
+	                           		<c:if test="${option.selected}">checked="checked"</c:if>
+	                            	<c:if test="${!hasEditRight}">disabled="disabled"</c:if> 
+	                      	>
+
+	                       	<label for="${answerDto.questionUid}-${option.qbOption.uid}" class="form-check-label">
+		                     	<c:if test="${isPrefixAnswersWithLetters}">
+		                     		<c:set var="seqLetter" value="${status.index}"/>
+		                     		<%=Character.toChars(97 + (Integer)pageContext.getAttribute("seqLetter"))%>)
+		                     	</c:if>
+	                     	
+	                           	<c:out value="${option.qbOption.name}" escapeXml="false" />
+	                       	</label>
+	                   </div>
+	                 </td>
                     </tr>
                   </c:forEach>
               </tbody>
Index: lams_tool_lamc/web/learning/SimpleLearnerError.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_lamc/web/learning/SimpleLearnerError.jsp	(.../SimpleLearnerError.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_lamc/web/learning/SimpleLearnerError.jsp	(.../SimpleLearnerError.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -13,7 +13,7 @@
 
 <body class="stripes">
 	<lams:Page type="learner" title="${title}">
-		<div class="voffset10 float-end">
+		<div class="mt-2 float-end">
 			<lams:errors/>
 		</div>
 		<div id="footer"></div>
Index: lams_tool_lamc/web/learning/SingleQuestionAnswersContent.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_lamc/web/learning/SingleQuestionAnswersContent.jsp	(.../SingleQuestionAnswersContent.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_lamc/web/learning/SingleQuestionAnswersContent.jsp	(.../SingleQuestionAnswersContent.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -9,8 +9,8 @@
 <c:forEach var="answerDto" varStatus="status" items="${requestScope.learnerAnswerDtos}">
 	<c:if test="${answerDto.displayOrder == mcGeneralLearnerFlowDTO.questionIndex}">
 
-		<div class="row no-gutter">
-			<div class="col-xs-12">
+		<div class="row g-0">
+			<div class="col-12">
 				<div class="panel panel-default">
 					<div class="panel-heading">
 						<table>
@@ -35,30 +35,31 @@
 							</c:if>
 						</table>
 					</div>
+					
 					<!-- Display answers -->
 					<div class="panel-body">
 						<div class="table-responsive">
-							<table class="table table-hover table-condensed">
+							<table class="table table-hover table-sm">
 								<tbody>
 									<c:forEach var="option" varStatus="status" items="${answerDto.options}">
 										<tr>
-											<td class="text-nowrap" style="vertical-align: top;">
-												<input type="radio"	id="${answerDto.questionUid}-${option.qbOption.uid}" name="checkedCa" class="noBorder"
-														value="${answerDto.questionUid}-${option.qbOption.uid}" 
-														<c:if test="${option.selected}">checked="checked"</c:if> 
-												/> 
-												<c:if test="${isPrefixAnswersWithLetters}">
-													<c:set var="seqLetter" value="${status.index}" />
-													<%=Character.toChars(97 + (Integer) pageContext.getAttribute("seqLetter"))%>)
-                              					</c:if>
-                              				</td>
-
-											<td width="100%">
-												<label for="${answerDto.questionUid}-${option.qbOption.uid}"> <c:out
-														value="${option.qbOption.name}" escapeXml="false" />
-												</label>
+											<td class="text-nowrap" width="100%">
+												<div class="form-check">
+													<input type="radio"	id="${answerDto.questionUid}-${option.qbOption.uid}" name="checkedCa" class="form-check-input"
+															value="${answerDto.questionUid}-${option.qbOption.uid}" 
+															<c:if test="${option.selected}">checked="checked"</c:if> 
+													/> 
+	
+													<label for="${answerDto.questionUid}-${option.qbOption.uid}" class="form-check-label">
+														<c:if test="${isPrefixAnswersWithLetters}">
+															<c:set var="seqLetter" value="${status.index}" />
+															<%=Character.toChars(97 + (Integer) pageContext.getAttribute("seqLetter"))%>)
+		                              					</c:if>
+	                              					 
+														<c:out value="${option.qbOption.name}" escapeXml="false" />
+													</label>
+												</div>
 											</td>
-
 										</tr>
 									</c:forEach>
 									
Index: lams_tool_lamc/web/learning/ViewAnswers.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_lamc/web/learning/ViewAnswers.jsp	(.../ViewAnswers.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_lamc/web/learning/ViewAnswers.jsp	(.../ViewAnswers.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -101,8 +101,8 @@
 		<c:forEach var="question" varStatus="status" items="${mcGeneralLearnerFlowDTO.questions}">
 			<c:set var="mainQueIndex" scope="request" value="${mainQueIndex +1}" />
 
-			<div class="row no-gutter">
-				<div class="col-xs-12">
+			<div class="row g-0">
+				<div class="col-12">
 					<div class="panel panel-default">
 						<div class="panel-heading">
 							<table>
@@ -132,7 +132,7 @@
 									<!-- list of candidate answers -->
 				                     <c:choose>
 				                     <c:when test="${isPrefixAnswersWithLetters}">
-										<table class="table table-hover table-condensed table-no-border table-top">
+										<table class="table table-hover table-sm table-no-border table-top">
 										<c:forEach var="subEntry" items="${mainEntry.value}">
 										<tr><td>${subEntry.key}
 										</td>
@@ -153,7 +153,7 @@
 
 									<!-- display students answers -->
 									<div class="table-responsive">
-										<table class="table table-condensed">
+										<table class="table table-sm">
 											<thead>
 												<tr>
 													<th colspan="2"><fmt:message key="label.yourAnswers" /></th>
@@ -201,7 +201,7 @@
 															<fmt:message key="label.what.is.your.confidence.level" />
 														</div>
 														
-														<div class="loffset10">
+														<div class="ms-2">
 															<c:forEach var="attemptEntry" items="${mcGeneralLearnerFlowDTO.attemptMap}">
 																<c:if test="${requestScope.mainQueIndex == attemptEntry.key}">
 																	<input class="bootstrap-slider" type="text" 
@@ -264,22 +264,22 @@
 				<fmt:message key="label.group.results" />
 			</h4>
 
-			<table class="table table-condensed">
+			<table class="table table-sm">
 				<tr>
-					<td class="active" width="30%"><fmt:message key="label.topMark" /></td>
+					<td class="table-active" width="30%"><fmt:message key="label.topMark" /></td>
 					<td><c:out value="${mcGeneralLearnerFlowDTO.topMark}" /></td>
 				</tr>
 
 				<tr>
-					<td class="active"><fmt:message key="label.avMark" /></td>
+					<td class="table-active"><fmt:message key="label.avMark" /></td>
 					<td><c:out value="${mcGeneralLearnerFlowDTO.averageMark}" /></td>
 				</tr>
 			</table>
 		</c:if>
 
 		<c:if test="${mcGeneralLearnerFlowDTO.reflection && (notebookEntry != null) && hasEditRight}">
-			<div class="row no-gutter">
-				<div class="col-xs-12">
+			<div class="row g-0">
+				<div class="col-12">
 					<h4>
 						<fmt:message key="label.reflection" />
 					</h4>
@@ -307,7 +307,7 @@
 		</c:if>
 
 		<!--  now really start the form -->
-		<div class="form-group">
+		<div class="mb-3">
 				<form:hidden path="toolContentID" />
 				<form:hidden path="toolSessionID" />
 				<form:hidden path="httpSessionID" />
@@ -321,7 +321,7 @@
 				
 				<c:if test="${(mcGeneralLearnerFlowDTO.retries != 'true') 
 						|| (mcGeneralLearnerFlowDTO.retries == 'true') && (mcGeneralLearnerFlowDTO.passMarkApplicable == 'true') && (mcGeneralLearnerFlowDTO.userOverPassMark == 'true')}">
-					<div class="voffset5">
+					<div class="mt-2">
 						<c:if test="${(mcGeneralLearnerFlowDTO.reflection != 'true') || !hasEditRight}">
 							<form:hidden path="learnerFinished" value="Finished" />
 
Index: lams_tool_laqa/web/learning/LearnerRep.jsp
===================================================================
diff -u -r5a58ebc3f2aaf6ea5183e1ed1204d2e94ea45d10 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_laqa/web/learning/LearnerRep.jsp	(.../LearnerRep.jsp)	(revision 5a58ebc3f2aaf6ea5183e1ed1204d2e94ea45d10)
+++ lams_tool_laqa/web/learning/LearnerRep.jsp	(.../LearnerRep.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -19,7 +19,6 @@
 	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager.css">
 	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap.css">
 	<link rel="stylesheet" href="<lams:WebAppURL/>includes/css/qalearning.css">
-	<lams:css />
 	<style>
 		#rating-comment-info {
 			margin: 10px 0;
@@ -130,16 +129,16 @@
 						<%--User own responses---------------------------------------%>
 					<c:set var="userResponse" value="${question.userResponse}"/>
 					<c:if test="${userResponse != null}">
-						<div class="row no-gutter">
+						<div class="row g-0">
 							<!-- split if ratings are on -->
-							<c:set var="splitRow" value="col-xs-12" />
+							<c:set var="splitRow" value="col-12" />
 							<c:if test="${generalLearnerFlowDTO.allowRateAnswers}">
-								<c:set var="splitRow" value="col-xs-12 col-sm-9 col-md-10 col-lg-10" />
+								<c:set var="splitRow" value="col-12 col-sm-9 col-md-10 col-lg-10" />
 							</c:if>
 							<div class="${splitRow}">
 								<div class="sbox">
 									<div class="sbox-heading bg-warning">
-										<div class="float-start roffset5"><lams:Portrait userId="${userResponse.qaQueUser.queUsrId}"/></div>
+										<div class="float-start me-2"><lams:Portrait userId="${userResponse.qaQueUser.queUsrId}"/></div>
 										<span><c:out value="${userResponse.qaQueUser.fullname}" /></span>
 										<br><span style="font-size: smaller"><lams:Date value="${userResponse.attemptTime}" timeago="true"/></span>
 									</div>
@@ -149,11 +148,11 @@
 								</div>
 							</div>
 							<c:if test="${generalLearnerFlowDTO.allowRateAnswers}">
-								<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2 rate-answers-area">
+								<div class="col-12 col-sm-3 col-md-2 col-lg-2 rate-answers-area">
 									<h4 class="text-center">
 										<fmt:message key="label.learning.rating" />
 									</h4>
-									<lams:Rating itemRatingDto="${userResponse.itemRatingDto}" disabled="true" isItemAuthoredByUser="true"
+									<lams:Rating5 itemRatingDto="${userResponse.itemRatingDto}" disabled="true" isItemAuthoredByUser="true"
 												 maxRates="${qaContent.maximumRates}" />
 								</div>
 							</c:if>
@@ -183,7 +182,7 @@
 						</c:choose>
 
 						<div class="other-users-responses">
-							<lams:TSTable numColumns="${numColumns}" dataId='data-question-uid="${question.uid}"' >
+							<lams:TSTable5 numColumns="${numColumns}" dataId='data-question-uid="${question.uid}"' >
 								<thead>
 								<tr>
 									<th title="<fmt:message key='label.sort.by.answer'/>"><fmt:message key="label.learning.answer" /></th>
@@ -203,7 +202,7 @@
 								<tbody>
 
 								</tbody>
-							</lams:TSTable>
+							</lams:TSTable5>
 						</div>
 					</c:if>
 
@@ -216,7 +215,7 @@
 		<!-- reflections -->
 		<c:if test="${generalLearnerFlowDTO.reflection == 'true' && generalLearnerFlowDTO.isLearnerFinished}">
 
-			<div class="panel panel-default voffset10">
+			<div class="panel panel-default mt-2">
 				<div class="panel-heading panel-title">
 					<fmt:message key="label.reflection" />
 				</div>
@@ -229,7 +228,7 @@
 					</div>
 
 					<c:if test="${hasEditRight && mode != 'teacher'}">
-						<button name="forwardtoReflection" type="button" class="btn btn-default float-start"
+						<button name="forwardtoReflection" type="button" class="btn btn-secondary float-start"
 								onclick="submitMethod('forwardtoReflection');">
 							<fmt:message key="label.edit" />
 						</button>
Index: lams_tool_larsrc/web/includes/javascript/rsrcembed.js
===================================================================
diff -u -rb9b05df2a560abfd0f93353515e277abc52764ba -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_larsrc/web/includes/javascript/rsrcembed.js	(.../rsrcembed.js)	(revision b9b05df2a560abfd0f93353515e277abc52764ba)
+++ lams_tool_larsrc/web/includes/javascript/rsrcembed.js	(.../rsrcembed.js)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -1,7 +1,7 @@
 function iframelyCallback(itemUid, response) {
 	let panel = $('#item-content-' + itemUid);
 	if (!response) {
-		 $('.embedded-open-button', panel).removeClass('btn-default btn-sm pull-right').addClass('btn-primary');
+		 $('.embedded-open-button', panel).removeClass('btn-secondary btn-sm float-end').addClass('btn-primary');
 		return;
 	}
 	
Index: lams_tool_larsrc/web/pages/itemreview/itemContent.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_larsrc/web/pages/itemreview/itemContent.jsp	(.../itemContent.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_larsrc/web/pages/itemreview/itemContent.jsp	(.../itemContent.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -55,7 +55,7 @@
 		    jsonpCallback: 'iframelyCallback${itemUid}',
 		    contentType: "application/json; charset=utf-8",
 		    error: function (xhr, status, error) {
-			    $('.embedded-open-button', panel).removeClass('btn-default hidden btn-sm float-end').addClass('btn-primary');
+			    $('.embedded-open-button', panel).removeClass('btn-secondary hidden btn-sm float-end').addClass('btn-primary');
 		        console.log("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
 		    }
 		});
@@ -79,11 +79,11 @@
 			<a href="<c:url value='${resourceItemReviewUrl}' />&preferDownload=true" class="download-button hidden btn btn-primary">
 				<fmt:message key="label.download" />
 			</a>
-			<a href="${resourceItemReviewUrl}" target="_blank" class="embedded-open-button hidden btn btn-default btn-sm float-end">
+			<a href="${resourceItemReviewUrl}" target="_blank" class="embedded-open-button hidden btn btn-secondary btn-sm float-end">
 				<i class="fa fa-external-link" aria-hidden="true"></i>
 				<fmt:message key="open.in.new.window" />
 			</a>
-			<a href="<c:url value='${resourceItemReviewUrl}'/>" target="_blank" class="iframe-open-button hidden btn btn-default btn-sm float-end">
+			<a href="<c:url value='${resourceItemReviewUrl}'/>" target="_blank" class="iframe-open-button hidden btn btn-secondary btn-sm float-end">
 				<i class="fa fa-external-link" aria-hidden="true"></i>
 				<fmt:message key="open.in.new.window" />
 			</a>
@@ -118,7 +118,7 @@
 	<hr>
 	<c:if test="${mode eq 'learner' or mode eq 'author'}">
 		<c:if test="${sessionMap.rateItems && allowRating}">
-			<lams:Rating itemRatingDto="${ratingDTO}" 
+			<lams:Rating5 itemRatingDto="${ratingDTO}" 
 						 disabled="${mode == 'teacher' || finishedLock}" allowRetries="true" />
 		</c:if>
 
Index: lams_tool_larsrc/web/pages/learning/addfile.jsp
===================================================================
diff -u -r78d4b7fda7982f0f9957d6ab206ce9c741f2eea1 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_larsrc/web/pages/learning/addfile.jsp	(.../addfile.jsp)	(revision 78d4b7fda7982f0f9957d6ab206ce9c741f2eea1)
+++ lams_tool_larsrc/web/pages/learning/addfile.jsp	(.../addfile.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -21,24 +21,24 @@
 		<form:hidden path="mode" id="mode"/>
 		<form:hidden path="sessionMapID"/>
 	
-		<div class="form-group">
+		<div class="mb-3">
 	    	<label for="title"><fmt:message key="label.authoring.basic.resource.title.input" /></label>:
 			<form:input path="title" class="form-control" tabindex="1" id="resourcetitle"/>
 	  	</div>	
-		<div class="form-group">
+		<div class="mb-3">
 	    	<label for="instructions"><fmt:message key="label.authoring.basic.instruction" /></label>
 			<lams:CKEditor id="instructions" value="" contentFolderID="${learnerContentFolder}"></lams:CKEditor>
 	  	</div>	
 	  	
 		<input type="hidden" id="tmpFileUploadId" name="tmpFileUploadId" value="${resourceItemForm.tmpFileUploadId}" />
-		<div id="image-upload-area" class="voffset20"></div>
+		<div id="image-upload-area" class="mt-4"></div>
 		
 		<lams:WaitingSpinner id="itemAttachmentArea_Busy"/>	
-		<div id="buttons" class="float-end voffset10">
-	 		<button name="goback" onclick="javascript:cancel()" class="btn btn-sm btn-default" id="cancelButton">
+		<div id="buttons" class="float-end mt-2">
+	 		<button name="goback" onclick="javascript:cancel()" class="btn btn-sm btn-secondary" id="cancelButton">
 				<fmt:message key="button.cancel" />
 			</button>&nbsp;
-			<button type="submit" class="btn btn-sm btn-default btn-disable-on-submit" id="submitButton">
+			<button type="submit" class="btn btn-sm btn-secondary btn-disable-on-submit" id="submitButton">
 			 	<fmt:message key="button.add" />
 			</button>
 		</div>
Index: lams_tool_larsrc/web/pages/learning/addurl.jsp
===================================================================
diff -u -r78d4b7fda7982f0f9957d6ab206ce9c741f2eea1 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_larsrc/web/pages/learning/addurl.jsp	(.../addurl.jsp)	(revision 78d4b7fda7982f0f9957d6ab206ce9c741f2eea1)
+++ lams_tool_larsrc/web/pages/learning/addurl.jsp	(.../addurl.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -15,7 +15,7 @@
 			<form:hidden path="mode" id="mode"/>
 			<form:hidden path="sessionMapID"/>
 
-			<div class="form-group" id="addurl">
+			<div class="mb-3" id="addurl">
 				<label for="url"><fmt:message key="label.authoring.basic.resource.url.input" /></label>
 				<form:input path="url" cssClass="form-control" tabindex="2" id="url"/>
 			</div>
@@ -33,21 +33,21 @@
 				</div>
 			</div>
 
-			<div class="form-group">
+			<div class="mb-3">
 				<label for="title"><fmt:message key="label.authoring.basic.resource.title.input" /></label>:
 				<form:input path="title" tabindex="1" cssClass="form-control"/>
 			</div>
 
-			<div class="form-group">
+			<div class="mb-3">
 				<label for="instructions"><fmt:message key="label.authoring.basic.instruction" /></label>
 				<lams:CKEditor id="instructions" value="" contentFolderID="${learnerContentFolder}"></lams:CKEditor>
 			</div>
 
 			<div id="buttons" class="float-end" >
-				<button name="goback" onclick="javascript:cancel()" class="btn btn-sm btn-default" id="cancelButton">
+				<button name="goback" onclick="javascript:cancel()" class="btn btn-sm btn-secondary" id="cancelButton">
 					<fmt:message key="button.cancel" />
 				</button>&nbsp;
-				<button type="submit" class="btn btn-sm btn-default btn-disable-on-submit" id="submitButton">
+				<button type="submit" class="btn btn-sm btn-secondary btn-disable-on-submit" id="submitButton">
 					<fmt:message key="button.add" />
 				</button>
 			</div>
Index: lams_tool_larsrc/web/pages/learning/learning.jsp
===================================================================
diff -u -r78d4b7fda7982f0f9957d6ab206ce9c741f2eea1 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_larsrc/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 78d4b7fda7982f0f9957d6ab206ce9c741f2eea1)
+++ lams_tool_larsrc/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -305,25 +305,25 @@
 				<!--  Panel button bar controlling refresh and adding items -->
 				<div class="btn-group float-end">
 					<c:if test="${mode != 'teacher'}">
-						<a href="#" onclick="javascript:return checkNew()" type="button" class="btn btn-xs btn-default">
+						<a href="#" onclick="javascript:return checkNew()" type="button" class="btn btn-sm btn-secondary">
 							<i class="fa fa-xm fa-refresh"></i> <fmt:message key="label.check.for.new" /></a>
 					</c:if>
 					<c:if test="${not finishedLock}">
 						<c:choose>
 							<c:when test="${resource.allowAddFiles && resource.allowAddUrls}">
-								<a href="#" onclick="javascript:gotoURL()" type="button" class="btn btn-xs btn-default">
+								<a href="#" onclick="javascript:gotoURL()" type="button" class="btn btn-sm btn-secondary">
 									<i class="fa fa-xm fa-plus"></i> <fmt:message key="label.authoring.basic.resource.url.input" /></a>
-								<a href="#" onclick="javascript:gotoFile()" type="button" class="btn btn-xs btn-default">
+								<a href="#" onclick="javascript:gotoFile()" type="button" class="btn btn-sm btn-secondary">
 									<i class="fa fa-xm fa-plus"></i> <fmt:message key="label.authoring.basic.resource.file.input" /></a>
 							</c:when>
 
 							<c:when test="${resource.allowAddFiles && !resource.allowAddUrls}">
-								<a href="#" onclick="javascript:gotoFile()" type="button" class="btn btn-xs btn-default">
+								<a href="#" onclick="javascript:gotoFile()" type="button" class="btn btn-sm btn-secondary">
 									<i class="fa fa-xm fa-plus"></i> <fmt:message key="label.authoring.basic.resource.file.input" /></a>
 							</c:when>
 
 							<c:when test="${!resource.allowAddFiles && resource.allowAddUrls}">
-								<a href="#" onclick="javascript:gotoURL()" type="button" class="btn btn-xs btn-default">
+								<a href="#" onclick="javascript:gotoURL()" type="button" class="btn btn-sm btn-secondary">
 									<i class="fa fa-xm fa-plus"></i> <fmt:message key="label.authoring.basic.resource.url.input" /></a>
 							</c:when>
 						</c:choose>
@@ -336,14 +336,16 @@
 				<div class="item-panel panel panel-default" >
 					<div class="panel-heading" id="heading${item.uid}">
 			        	<span class="panel-title collapsable-icon-left">
-				        	<a class="collapsed" role="button" data-toggle="collapse" href="#collapse${item.uid}"
-							   aria-expanded="false" aria-controls="collapse${item.uid}" >
+				        	<button type="button" class="btn btn-secondary collapsed" data-bs-toggle="collapse" data-bs-target="#collapse${item.uid}"
+							   aria-expanded="false" aria-controls="collapse${item.uid}" 
+							>
 								<c:out value="${item.title}" escapeXml="true"/>
 								<c:if test="${!item.createByAuthor && item.createBy != null}">
 									(<c:out value="${item.createBy.firstName} ${item.createBy.lastName}" escapeXml="true"/>)
 								</c:if>
-							</a>
+							</button>
 						</span>
+						
 						<div class="float-end">
 							<c:choose>
 								<c:when test="${item.complete}">
@@ -352,7 +354,7 @@
 								<c:when test="${not finishedLock}">
 									<i class="fa fa-check-circle icon-complete hidden" style="font-size: 1.5em;color: green;" title='<fmt:message key="label.completed" />'></i>
 									<button type="button" onClick="javascript:completeItem(${item.uid})"
-											class="complete-item-button btn btn-xs btn-default">
+											class="complete-item-button btn btn-sm btn-secondary">
 										<fmt:message key='label.finish' />
 									</button>
 								</c:when>
@@ -405,7 +407,7 @@
 					</c:choose>
 
 					<c:if test="${mode != 'teacher'}">
-						<button onclick="return continueReflect()" class="btn btn-sm btn-default voffset5 btn-disable-on-submit">
+						<button onclick="return continueReflect()" class="btn btn-sm btn-secondary mt-2 btn-disable-on-submit">
 							<fmt:message key="label.edit" />
 						</button>
 					</c:if>
@@ -418,7 +420,7 @@
 			<div class="activity-bottom-buttons">
 				<c:choose>
 					<c:when test="${sessionMap.reflectOn && (not sessionMap.userFinished)}">
-						<button name="FinishButton" onclick="return continueReflect()" class="btn btn-default btn-disable-on-submit">
+						<button name="FinishButton" onclick="return continueReflect()" class="btn btn-primary btn-disable-on-submit">
 							<fmt:message key="label.continue" />
 						</button>
 					</c:when>
Index: lams_tool_mindmap/web/common/mapjs.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_mindmap/web/common/mapjs.jsp	(.../mapjs.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_mindmap/web/common/mapjs.jsp	(.../mapjs.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -441,32 +441,32 @@
 	
 		<!-- Color picker & expand buttons must be outside the next div or it can't float on top of the mindmap. The float is done in javascript. -->
 		<div style="display:inline" role="group">
-        <a href="#" class="btn btn-default btn-sm full-screen-launch-button pull-right loffset5" id="expand" onclick="javascript:launchIntoFullscreen(this)"><i class="fa fa-arrows-alt" aria-hidden="true"></i></a> 
-        <a href="#" class="btn btn-default btn-sm full-screen-exit-button pull-right loffset5" id="shrink" onclick="javascript:exitFullscreen()" style="display: none;"><i class="fa fa-compress" aria-hidden="true"></i></a> 
+        <a href="#" class="btn btn-secondary btn-sm full-screen-launch-button float-end ms-1" id="expand" onclick="javascript:launchIntoFullscreen(this)"><i class="fa fa-arrows-alt" aria-hidden="true"></i></a> 
+        <a href="#" class="btn btn-secondary btn-sm full-screen-exit-button float-end ms-1" id="shrink" onclick="javascript:exitFullscreen()" style="display: none;"><i class="fa fa-compress" aria-hidden="true"></i></a> 
 		
 		<c:if test="${param.allowPrinting}">
-			<a href="#" class="btn btn-default btn-sm pull-right loffset5" id="print" onclick="javascript:showPrintView()"
+			<a href="#" class="btn btn-secondary btn-sm float-end ms-1" id="print" onclick="javascript:showPrintView()"
 			   title="<fmt:message key='button.print'/>"><i class="fa fa-print" aria-hidden="true"></i></a> 
 		</c:if>
 		
-		<input type="text" id="background-color" class='updateStyle form-control input-sm' data-mm-target-property='background' size="7" width="180px">
+		<input type="text" id="background-color" class='updateStyle form-control form-control-sm' data-mm-target-property='background' size="7" width="180px">
 
 		</div>
 		 
 		<div>
 			<div class="btn-group btn-group-sm" role="group">
-			<a href="#" class="resetView btn btn-default btn-sm"><fmt:message key='label.zoom'/>:</a>
-			<a href="#" class="resetView btn btn-default btn-sm"><fmt:message key='label.zoom.reset'/></a>
-			<a href="#" class="scaleUp btn btn-default btn-sm" title="<fmt:message key='label.zoom.increase'/>"><i class="fa fa-lg fa-search-plus"></i></a>
-			<a href="#" class="scaleDown btn btn-default btn-sm" title="<fmt:message key='label.zoom.decrease'/>"><i class="fa fa-lg fa-search-minus"></i></a>
+			<a href="#" class="resetView btn btn-secondary btn-sm"><fmt:message key='label.zoom'/>:</a>
+			<a href="#" class="resetView btn btn-secondary btn-sm"><fmt:message key='label.zoom.reset'/></a>
+			<a href="#" class="scaleUp btn btn-secondary btn-sm" title="<fmt:message key='label.zoom.increase'/>"><i class="fa fa-lg fa-search-plus"></i></a>
+			<a href="#" class="scaleDown btn btn-secondary btn-sm" title="<fmt:message key='label.zoom.decrease'/>"><i class="fa fa-lg fa-search-minus"></i></a>
 			</div>
 			
 			<div style="display:inline-block" role="group">
-		 	<a href="#" class="toggleCollapse btn btn-default btn-sm" title="<fmt:message key='label.expand.collapse.idea'/>"><i class="fa fa-lg fa-navicon"></i><span class="d-none d-sm-block">&nbsp;<fmt:message key='label.expand.collapse.idea'/></span></a>
+		 	<a href="#" class="toggleCollapse btn btn-secondary btn-sm" title="<fmt:message key='label.expand.collapse.idea'/>"><i class="fa fa-lg fa-navicon"></i><span class="d-none d-sm-block">&nbsp;<fmt:message key='label.expand.collapse.idea'/></span></a>
 		<c:if test="${contentEditable}">
-			<a href="#" class="addSubIdea btn btn-default btn-sm" title="<fmt:message key='label.add.idea'/>"><i class="fa fa-lg fa-plus-square-o"></i><span class="d-none d-sm-block">&nbsp;<fmt:message key='label.add.idea'/></span></a>
-			<a href="#" class="editNode btn btn-default btn-sm" title="<fmt:message key='label.edit.idea.text'/>"><i class="fa fa-lg fa-pencil-square-o"></i><span class="d-none d-sm-block">&nbsp;<fmt:message key='label.edit.idea.text'/></span></a>		
-			<a href="#" class="removeSubIdea btn btn-default btn-sm" title="<fmt:message key='label.delete.idea'/>"><i class="fa fa-lg fa-trash-o"></i><span class="d-none d-sm-block">&nbsp;<fmt:message key='label.delete.idea'/></span></a>
+			<a href="#" class="addSubIdea btn btn-secondary btn-sm" title="<fmt:message key='label.add.idea'/>"><i class="fa fa-lg fa-plus-square-o"></i><span class="d-none d-sm-block">&nbsp;<fmt:message key='label.add.idea'/></span></a>
+			<a href="#" class="editNode btn btn-secondary btn-sm" title="<fmt:message key='label.edit.idea.text'/>"><i class="fa fa-lg fa-pencil-square-o"></i><span class="d-none d-sm-block">&nbsp;<fmt:message key='label.edit.idea.text'/></span></a>		
+			<a href="#" class="removeSubIdea btn btn-secondary btn-sm" title="<fmt:message key='label.delete.idea'/>"><i class="fa fa-lg fa-trash-o"></i><span class="d-none d-sm-block">&nbsp;<fmt:message key='label.delete.idea'/></span></a>
 	<%-- Not yet implemented in back end  --%> 
 	<%-- 		<input type="button" data-mm-action="export-image" value="Export To Image"/>  --%> 
 	<%--  		<input type="button" class="insertRoot" value="add root node">  --%> 
Index: lams_tool_mindmap/web/pages/learning/galleryWalk.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_mindmap/web/pages/learning/galleryWalk.jsp	(.../galleryWalk.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_mindmap/web/pages/learning/galleryWalk.jsp	(.../galleryWalk.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -74,7 +74,7 @@
 		checkNextGateActivity('finish-button', '${toolSessionID}', '', finishSession);
 			
 	    $(document).ready(function(){
-			$('[data-toggle="tooltip"]').bootstrapTooltip();
+			$('[data-bs-toggle="tooltip"]').bootstrapTooltip();
 			
 			// show mindmaps only on Group expand
 			$('.mindmap-collapse').on('show.bs.collapse', function(){
@@ -113,9 +113,11 @@
 	</c:if>
 		
 	<c:if test="${mindmapDTO.galleryWalkFinished and not mindmapDTO.galleryWalkReadOnly}">
-		<h4 class="voffset20" style="text-align: center"><fmt:message key="label.gallery.walk.ratings.header" /></h4>
-		<table id="gallery-walk-rating-table" class="table table-hover table-condensed">
-		  <thead class="thead-light">
+		<h4 class="text-center mt-4">
+			<fmt:message key="label.gallery.walk.ratings.header" />
+		</h4>
+		<table id="gallery-walk-rating-table" class="table table-hover table-sm">
+		  <thead class="table-light">
 		    <tr>
 		      <th scope="col"><fmt:message key="monitoring.label.group" /></th>
 		      <th scope="col"><fmt:message key="label.rating" /></th>
@@ -126,7 +128,7 @@
 				<tr>
 					<td>${mindmapSession.sessionName}</td>
 					<td>
-						<lams:Rating itemRatingDto="${mindmapSession.itemRatingDto}" 
+						<lams:Rating5 itemRatingDto="${mindmapSession.itemRatingDto}" 
 									 isItemAuthoredByUser="true"
 									 hideCriteriaTitle="true" />
 					</td>
@@ -136,21 +138,23 @@
 		</table>
 	</c:if>
 	
-	<h4 class="voffset20" style="text-align: center"><fmt:message key="label.gallery.walk" /></h4>
+	<h4 class="text-center mt-4">
+		<fmt:message key="label.gallery.walk" />
+	</h4>
 	
 	<c:if test="${mode == 'author'}">
 		<lams:Alert5 type="info" id="gallery-walk-preview-info" close="false">
 			<fmt:message key="label.gallery.walk.preview" />
 		</lams:Alert5>
 	</c:if>
-	
 
 	<c:forEach var="mindmapSession" items="${mindmapDTO.sessionDTOs}" varStatus="status">
 	    <div class="panel panel-default">
 	       <div class="panel-heading" role="tab" id="heading${mindmapSession.sessionID}">
 	       	<span class="panel-title collapsable-icon-left">
-	       		<a class="collapsed" role="button" data-toggle="collapse" href="#collapse${mindmapSession.sessionID}" 
-						aria-expanded="false" aria-controls="collapse${mindmapSession.sessionID}">
+	       		<button type="button" class="btn btn-secondary collapsed" data-bs-toggle="collapse" data-bs-target="#collapse${mindmapSession.sessionID}" 
+						aria-expanded="false" aria-controls="collapse${mindmapSession.sessionID}"
+				>
 					<c:choose>
 						<c:when test="${toolSessionID == mindmapSession.sessionID}">
 							<b><c:out value="${mindmapSession.sessionName}" />&nbsp;<fmt:message key="label.gallery.walk.your.group" /></b>
@@ -159,23 +163,23 @@
 							<c:out value="${mindmapSession.sessionName}" />
 						</c:otherwise>
 					</c:choose>
-				</a>
+				</button>
 			</span>
 	       </div>
+	       
 	       <div id="collapse${mindmapSession.sessionID}" class="panel-collapse collapse mindmap-collapse" 
 	       	    role="tabpanel" aria-labelledby="heading${mindmapSession.sessionID}">
 				<%-- Do not show rating to own group before Gallery Walk is finished --%>
 	       	    <c:if test="${not mindmapDTO.galleryWalkReadOnly and (mindmapDTO.galleryWalkFinished or mode == 'teacher' or toolSessionID != mindmapSession.sessionID)}">
 	       	    	<div class="gallery-walk-rating-comment-container">
-	       	    		<lams:Rating itemRatingDto="${mindmapSession.itemRatingDto}"
+	       	    		<lams:Rating5 itemRatingDto="${mindmapSession.itemRatingDto}"
 								     isItemAuthoredByUser="${mindmapDTO.galleryWalkFinished or mode == 'teacher'}" />
 					 </div>
 	       	    </c:if>
 	 			
 				<iframe class="mindmap-frame"
 						data-src='<c:url value="/learning/getGalleryWalkMindmap.do?toolSessionID=${mindmapSession.sessionID}"/>'>
 				</iframe>
-
 			</div>
 		</div>
 	</c:forEach>
@@ -184,8 +188,8 @@
 		<div class="activity-bottom-buttons">
 			<c:choose>
 				<c:when test="${not mindmapDTO.galleryWalkFinished}">
-					<button data-toggle="tooltip" 
-							class="btn btn-default ${mode == 'author' ? '' : 'disabled'}"
+					<button data-bs-toggle="tooltip" 
+							class="btn btn-primary ${mode == 'author' ? '' : 'disabled'}"
 							<c:choose>
 								<c:when test="${mode == 'author'}">
 									title="<fmt:message key='label.gallery.walk.wait.finish.preview' />"
@@ -201,7 +205,7 @@
 				</c:when>
 				<c:when test="${reflectOnActivity and not finishedActivity}">
 					<button name="FinishButton" id="finish-button"
-							onclick="return continueReflect()" class="btn btn-default">
+							onclick="return continueReflect()" class="btn btn-primary">
 						<fmt:message key="button.continue" />
 					</button>
 				</c:when>
Index: lams_tool_mindmap/web/pages/learning/mindmap.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_mindmap/web/pages/learning/mindmap.jsp	(.../mindmap.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_mindmap/web/pages/learning/mindmap.jsp	(.../mindmap.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -50,7 +50,7 @@
 			}
 
 			$(document).ready(function(){
-				$('[data-toggle="tooltip"]').bootstrapTooltip();
+				$('[data-bs-toggle="tooltip"]').bootstrapTooltip();
 			});
 		</script>
 		
@@ -111,8 +111,8 @@
 						<c:otherwise>
 							<c:choose>
 								<c:when test="${mindmapDTO.galleryWalkEnabled}">
-									<button data-toggle="tooltip" 
-											class="btn btn-default ${mode == 'author' ? '' : 'disabled'}"
+									<button data-bs-toggle="tooltip" 
+											class="btn btn-primary ${mode == 'author' ? '' : 'disabled'}"
 											<c:choose>
 												<c:when test="${mode == 'author'}">
 													title="<fmt:message key='label.gallery.walk.wait.start.preview' />"
Index: lams_tool_notebook/web/pages/learning/notebook.jsp
===================================================================
diff -u -r78d4b7fda7982f0f9957d6ab206ce9c741f2eea1 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_notebook/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision 78d4b7fda7982f0f9957d6ab206ce9c741f2eea1)
+++ lams_tool_notebook/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -121,7 +121,7 @@
 		<!-- End Notifications and warnings -->
 
 		<!-- Form -->
-		<div class="form-group">
+		<div class="mb-3">
 			<c:choose>
 				<c:when test="${contentEditable}">
 					<c:choose>
@@ -138,14 +138,14 @@
 				</c:when>
 
 				<c:otherwise>
-					<div class="sbox sbox-body voffset10 bg-warning">
+					<div class="sbox sbox-body mt-2 bg-warning">
 						<lams:out value="${messageForm.entryText}" />
 					</div>
 				</c:otherwise>
 			</c:choose>
 
 			<c:if test="${not empty teachersComment}">
-				<div class="panel panel-default voffset5 roffset10">
+				<div class="panel panel-default mt-2 me-2">
 					<div class="panel-heading">
 						<fmt:message key="label.reply.comment" />
 					</div>
Index: lams_tool_pixlr/web/pages/learning/pixlr.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_pixlr/web/pages/learning/pixlr.jsp	(.../pixlr.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_pixlr/web/pages/learning/pixlr.jsp	(.../pixlr.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -83,7 +83,7 @@
 				<br />
 				<c:choose>
 					<c:when test="${contentEditable}">
-						<a class="btn btn-default" href="javascript:openPixlr('${pixlrURL}');">
+						<a class="btn btn-secondary" href="javascript:openPixlr('${pixlrURL}');">
 							<fmt:message key="learner.edit.image" />
 						</a>
 					</c:when>
@@ -98,7 +98,7 @@
 						<form:hidden path="mode" value="${mode}" />	
 						<form:hidden path="toolSessionID" id="toolSessionID"/>
 						
-						<div class="panel panel-default voffset10">
+						<div class="panel panel-default mt-2">
 							<div class="panel-heading panel-title">
 								${pixlrDTO.reflectInstructions}
 							</div>
@@ -114,7 +114,7 @@
 									</c:otherwise>
 								</c:choose>
 											
-								<button	type="button" class="btn btn-default float-start" >
+								<button	type="button" class="btn btn-secondary float-start" >
 									<fmt:message key="button.edit" />
 								</button>
 							</div>
Index: lams_tool_pixlr/web/pages/learning/viewAll.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_pixlr/web/pages/learning/viewAll.jsp	(.../viewAll.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_pixlr/web/pages/learning/viewAll.jsp	(.../viewAll.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -83,7 +83,7 @@
 				</button>
 					
 				<c:if test="${!pixlrDTO.lockOnFinish}">
-					<button  class="btn btn-secondary btn-sm loffset5" onclick="javascript:document.getElementById('learningForm').action = '<lams:WebAppURL />learning.do';">
+					<button  class="btn btn-secondary btn-sm ms-1" onclick="javascript:document.getElementById('learningForm').action = '<lams:WebAppURL />learning.do';">
 						<fmt:message key="button.redo" />
 					</button>
 				</c:if>
Index: lams_tool_preview/web/pages/learning/comment.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_preview/web/pages/learning/comment.jsp	(.../comment.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_preview/web/pages/learning/comment.jsp	(.../comment.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -103,7 +103,7 @@
 							
 							rows += '<tr>';
 
-							rows += '<td class="username" width="20%"><div class="float-start roffset5">';
+							rows += '<td class="username" width="20%"><div class="float-start me-2">';
 							rows += definePortrait( userData["itemDescription2"], itemId, 'small', true, '${lams}' );
 							rows += '</div><span class="portrait-sm-lineheight">';
 							rows += userData["itemDescription"];
@@ -121,9 +121,9 @@
 										
 							} else {
 								rows += '<div id="add-comment-area-' + itemId + '">';	
-								rows += '<div class="no-gutter">';
+								rows += '<div class="g-0">';
 								rows += '';
-								rows += '<div class="col-xs-12 col-sm-11 ">';										
+								rows += '<div class="col-12 col-sm-11 ">';										
 								rows +=		'<textarea name="comment-textarea-'+itemId+'" rows="4" id="comment-textarea-'+ itemId + '" class="form-control"';
 								<c:if test="${minRates ne 0 || maxRates ne 0}">
 									rows += ' onkeyup="return updatedComment(this);"';
@@ -337,14 +337,14 @@
 		<input type="hidden" name="criteriaId" value="${criteriaRatings.ratingCriteria.ratingCriteriaId}"/>
 		<input type="hidden" name="next" id="next" value=""/>		
 
-		<lams:TSTable numColumns="2" test="1">
+		<lams:TSTable5 numColumns="2" test="1">
 			<th class="username" title="<fmt:message key='label.sort.by.user.name'/>" style="width:25%" > 
 				<fmt:message key="label.user.name" />
 			</th>
 			<th class="comment"> 
 				<fmt:message key="label.comment" />
 			</th>
-		</lams:TSTable>
+		</lams:TSTable5>
 
 	</form>
 								
Index: lams_tool_preview/web/pages/learning/hedging.jsp
===================================================================
diff -u -r1a95fab3ccfb6157bf176c530eb7ae5c0900bdd7 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_preview/web/pages/learning/hedging.jsp	(.../hedging.jsp)	(revision 1a95fab3ccfb6157bf176c530eb7ae5c0900bdd7)
+++ lams_tool_preview/web/pages/learning/hedging.jsp	(.../hedging.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -86,7 +86,7 @@
 		<input type="hidden" name="next" id="next" value=""/>
 
 		<div class="table-responsive">
-			<table class="table table-hover table-condensed">
+			<table class="table table-hover table-sm">
 				<c:forEach var="ratingDto" items="${criteriaRatings.ratingDtos}">
 				<tr>
 					<td>
@@ -99,7 +99,7 @@
 							${ratingDto.userRating}
 						</c:when>
 						<c:otherwise>
-							<select name="mark${ratingDto.itemId}" class="mark-hedging-select">
+							<select name="mark${ratingDto.itemId}" class="mark-hedging-select form-select">
 								<c:if test="${isEditingDisabled || question.responseSubmitted}">disabled="disabled"</c:if>				
 								<c:forEach var="i" begin="0" end="${criteriaRatings.ratingCriteria.maxRating}">
 									<option
@@ -116,8 +116,8 @@
 		</div>
 
 		<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled}">
-			<div class="form-group">
-			<h4><label for="justify" class="voffset10"><fmt:message key="label.justify.hedging.marks" /></label></h4>
+			<div class="mb-3">
+			<h4><label for="justify" class="mt-2"><fmt:message key="label.justify.hedging.marks" /></label></h4>
 			<c:choose>
 			<c:when test="${finishedLock}">
 				<span>${criteriaRatings.justificationComment}</span>
Index: lams_tool_preview/web/pages/learning/learning.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_preview/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_preview/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -141,22 +141,31 @@
 			</c:otherwise>
 		</c:choose>
 
-		<div class="voffset5" id="buttondiv">
+		<div class="mt-2" id="buttondiv">
 		
 		<div class="float-start">		
-		<span id="refreshButton" class="btn btn-default" onclick="javascript:refresh();"><fmt:message key="label.refresh"/></span>
+			<button type="button" id="refreshButton" class="btn btn-secondary" onclick="javascript:refresh();">
+				<fmt:message key="label.refresh"/>
+			</button>
 		</div>
 		
 		<div class="activity-bottom-buttons" id="buttonNextPrevDiv">		
 			<c:if test="${stepNumber > 1}">
-				<button type="button" id="prevButton" class="btn btn-default" onclick="javascript:${method}(false);"><fmt:message key="label.previous"/></button>
+				<button type="button" id="prevButton" class="btn btn-secondary" onclick="javascript:${method}(false);">
+					<fmt:message key="label.previous"/>
+				</button>
 			</c:if>
+			
 			<c:choose>
 				<c:when test="${stepNumber == numCriteria}">
-					<button type="button" id="finishButton" class="btn btn-primary" onclick="javascript:${method}(true);">${finishButtonLabel}</button>
+					<button type="button" id="finishButton" class="btn btn-primary" onclick="javascript:${method}(true);">
+						${finishButtonLabel}
+					</button>
 				</c:when>
 				<c:otherwise>
-					<button type="button" id="finishButton" class="btn btn-default" onclick="javascript:${method}(true);"><fmt:message key="label.next"/></button>
+					<button type="button" id="finishButton" class="btn btn-primary" onclick="javascript:${method}(true);">
+						<fmt:message key="label.next"/>
+					</button>
 				</c:otherwise>
 			</c:choose>
 		</div>
Index: lams_tool_preview/web/pages/learning/learningHiddenUser.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_preview/web/pages/learning/learningHiddenUser.jsp	(.../learningHiddenUser.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_preview/web/pages/learning/learningHiddenUser.jsp	(.../learningHiddenUser.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -29,7 +29,7 @@
 		</lams:Alert5>
 		
 		<div class="activity-bottom-buttons">
-			<a href="javascript:location.reload(true);"	class="btn btn-default">
+			<a href="javascript:location.reload(true);"	class="btn btn-secondary">
 				<fmt:message key="button.try.again" />
 			</a>
 		
Index: lams_tool_preview/web/pages/learning/notebookdisplay.jsp
===================================================================
diff -u -r4a6c446731f09a496394db2f52e60431d8160d53 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_preview/web/pages/learning/notebookdisplay.jsp	(.../notebookdisplay.jsp)	(revision 4a6c446731f09a496394db2f52e60431d8160d53)
+++ lams_tool_preview/web/pages/learning/notebookdisplay.jsp	(.../notebookdisplay.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -23,7 +23,7 @@
 					</c:choose>
 
 					<c:if test="${mode != 'teacher'}">
-						<a href="#nogo" id="finishButton" onclick="return continueReflect()" cssClass="btn btn-sm btn-default voffset5">
+						<a href="#nogo" id="finishButton" onclick="return continueReflect()" cssClass="btn btn-sm btn-secondary mt-2">
 							<fmt:message key="label.edit" />
 						</a>
 					</c:if>
Index: lams_tool_preview/web/pages/learning/rankall.jsp
===================================================================
diff -u -r1a95fab3ccfb6157bf176c530eb7ae5c0900bdd7 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_preview/web/pages/learning/rankall.jsp	(.../rankall.jsp)	(revision 1a95fab3ccfb6157bf176c530eb7ae5c0900bdd7)
+++ lams_tool_preview/web/pages/learning/rankall.jsp	(.../rankall.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -138,7 +138,7 @@
 		<input type="hidden" name="criteriaId" value="${criteriaRatings.ratingCriteria.ratingCriteriaId}"/>
 		<input type="hidden" name="next" id="next" value=""/>
 
-		<div class="row voffset10">
+		<div class="row mt-2">
 			<div class="col-sm-6">
 				<strong><fmt:message key="label.ranked"></fmt:message></strong>
 				<div id="ranked"><div id="lastEntry" class="${rowdrop}" style="padding-top:10px;padding-bottom:10px"><fmt:message key="label.addlearnerhere"></fmt:message></div></div>
Index: lams_tool_preview/web/pages/learning/ranking.jsp
===================================================================
diff -u -r1a95fab3ccfb6157bf176c530eb7ae5c0900bdd7 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_preview/web/pages/learning/ranking.jsp	(.../ranking.jsp)	(revision 1a95fab3ccfb6157bf176c530eb7ae5c0900bdd7)
+++ lams_tool_preview/web/pages/learning/ranking.jsp	(.../ranking.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -152,7 +152,7 @@
 		<input type="hidden" name="criteriaId" value="${criteriaRatings.ratingCriteria.ratingCriteriaId}"/>
 		<input type="hidden" name="next" id="next" value=""/>
 
-		<div class="row voffset10" id="drag-area">
+		<div class="row mt-2" id="drag-area">
 			<div class="col-sm-6">
 				<strong><fmt:message key="label.ranked"></fmt:message></strong>
 				<c:forEach begin="1" end="${criteriaRatings.ratingCriteria.maxRating}" var="index">
Index: lams_tool_preview/web/pages/learning/results.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_preview/web/pages/learning/results.jsp	(.../results.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_preview/web/pages/learning/results.jsp	(.../results.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -155,7 +155,7 @@
 	<!-- End Reflection -->
 
 	<c:if test="${!peerreview.lockWhenFinished}">
-		<a href="#nogo" class="btn btn-default voffset5 float-start voffset20" onclick="redoRatings();">
+		<a href="#nogo" class="btn btn-secondary mt-2 float-start mt-4" onclick="redoRatings();">
 			<fmt:message key="label.redo" />
 		</a>
 	</c:if>	
@@ -164,7 +164,7 @@
 		<div class="activity-bottom-buttons">
 			<c:choose>			
 				<c:when test="${sessionMap.reflectOn and empty sessionMap.reflectEntry}">
-					<a href="#nogo" id="continueButton" onclick="return continueReflect()" class="btn btn-default">
+					<a href="#nogo" id="continueButton" onclick="return continueReflect()" class="btn btn-primary">
 						<fmt:message key="label.continue" />
 					</a>
 				</c:when>
Index: lams_tool_preview/web/pages/learning/rubrics.jsp
===================================================================
diff -u -r1a95fab3ccfb6157bf176c530eb7ae5c0900bdd7 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_preview/web/pages/learning/rubrics.jsp	(.../rubrics.jsp)	(revision 1a95fab3ccfb6157bf176c530eb7ae5c0900bdd7)
+++ lams_tool_preview/web/pages/learning/rubrics.jsp	(.../rubrics.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -90,7 +90,7 @@
 			- criterionTables.length;
 	}
 </script>
-<button class="btn btn-default expand-all-button" onClick="javascript:expandAllRubricsUserPanels()">
+<button class="btn btn-secondary expand-all-button" onClick="javascript:expandAllRubricsUserPanels()">
 	<fmt:message key="label.rating.rubrics.expand.all" />
 </button>
 <div class="clearfix"></div>
@@ -104,10 +104,15 @@
 	    <div class="panel panel-default rubrics-user-panel">
 	       <div class="panel-heading" role="tab" id="heading${ratingDto.itemId}">
 	       	<span class="panel-title collapsable-icon-left">
-	       		<a class="collapsed" role="button" data-toggle="collapse" href="#collapse${ratingDto.itemId}" 
-						aria-expanded="false" aria-controls="collapse${ratingDto.itemId}" data-parent="#rubrics-users-panels">
-					<lams:Portrait userId="${ratingDto.itemId}" hover="false" />&nbsp;<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-				</a>
+	       		<button type="button" class="btn btn-secondary collapsed" data-bs-toggle="collapse" data-bs-target="#collapse${ratingDto.itemId}" 
+						aria-expanded="false" aria-controls="collapse${ratingDto.itemId}" data-parent="#rubrics-users-panels"
+				>
+					<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+					&nbsp;
+					<strong>
+						<c:out value="${ratingDto.itemDescription}" escapeXml="false"/>
+					</strong>
+				</button>
 			</span>
 	       </div>
 	       
Index: lams_tool_preview/web/pages/learning/rubricsPivot.jsp
===================================================================
diff -u -r1a95fab3ccfb6157bf176c530eb7ae5c0900bdd7 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_preview/web/pages/learning/rubricsPivot.jsp	(.../rubricsPivot.jsp)	(revision 1a95fab3ccfb6157bf176c530eb7ae5c0900bdd7)
+++ lams_tool_preview/web/pages/learning/rubricsPivot.jsp	(.../rubricsPivot.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -89,7 +89,7 @@
 			- criterionTables.length;
 	}
 </script>
-<button class="btn btn-default expand-all-button" onClick="javascript:expandAllRubricsPanels()">
+<button class="btn btn-secondary expand-all-button" onClick="javascript:expandAllRubricsPanels()">
 	<fmt:message key="label.rating.rubrics.expand.all" />
 </button>
 <div class="clearfix"></div>
@@ -106,11 +106,12 @@
 	    <div class="panel panel-default rubrics-row-panel">
 	       <div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
 	       	<span class="panel-title collapsable-icon-left" style="font-size:larger">
-	       		<a class="collapsed" role="button" data-toggle="collapse" href="#collapse${criteria.ratingCriteriaId}" 
-						aria-expanded="false" aria-controls="collapse${criteria.ratingCriteriaId}" data-parent="#rubrics-rows-panels">
+	       		<button type="button" class="btn btn-secondary collapsed" data-bs-toggle="collapse" data-bs-target="#collapse${criteria.ratingCriteriaId}" 
+						aria-expanded="false" aria-controls="collapse${criteria.ratingCriteriaId}" data-parent="#rubrics-rows-panels"
+				>
 					<%-- Criterion "row" --%>
 					<c:out value="${criteria.title}" escapeXml="false" />
-				</a>
+				</button>
 			</span>
 	       </div>
 	       
Index: lams_tool_preview/web/pages/learning/star.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_preview/web/pages/learning/star.jsp	(.../star.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_preview/web/pages/learning/star.jsp	(.../star.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -101,7 +101,7 @@
 							
 							rows += '<tr>';
 
-							rows += '<td class="username"><div class="float-start roffset5">';
+							rows += '<td class="username"><div class="float-start me-2">';
 							rows += definePortrait( userData["itemDescription2"], itemId, 'small', true, '${lams}' );
 							rows += '</div><span class="portrait-sm-lineheight">';
 							rows += userData["itemDescription"];
@@ -307,7 +307,7 @@
 			<c:set var="numColumns" value="3"/>
 		</c:if>
 	
-		<lams:TSTable numColumns="${numColumns}">
+		<lams:TSTable5 numColumns="${numColumns}">
 			<th class="username" title="<fmt:message key='label.sort.by.user.name'/>"> 
 				<fmt:message key="label.user.name" />
 			</th>
@@ -319,7 +319,7 @@
 				<fmt:message key="label.comment" />
 			</th>
 			</c:if>
-		</lams:TSTable>
+		</lams:TSTable5>
 
 		<div id="no-users-info">
 			<fmt:message key="label.no.users" />
Index: lams_tool_sbmt/web/learner/sbmtlearner.jsp
===================================================================
diff -u -r2d222c70de889ebe48b8ffd4feed1a03e5db3972 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_sbmt/web/learner/sbmtlearner.jsp	(.../sbmtlearner.jsp)	(revision 2d222c70de889ebe48b8ffd4feed1a03e5db3972)
+++ lams_tool_sbmt/web/learner/sbmtlearner.jsp	(.../sbmtlearner.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -141,9 +141,9 @@
 							</div>
 
 							<c:if test="${hasEditRight}">
-								<div class="form-group text-center">
+								<div class="mb-3 text-center">
 									<button id="uploadButton" type="submit" <c:if test="${sessionMap.finishLock || sessionMap.maxLimitReached}">disabled="disabled"</c:if>
-											class="btn btn-default btn-success btn-disable-on-submit"
+											class="btn btn-secondary btn-success btn-disable-on-submit"
 											title='<fmt:message key="label.add.tip" />' >
 										<i class="fa-solid fa-paper-plane" aria-hidden="true"></i> <fmt:message key="label.add" />
 									</button>
Index: lams_tool_scratchie/web/pages/learning/learning.jsp
===================================================================
diff -u -rbefcbcc85e9673de8236395435f2232a4e962f96 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_scratchie/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision befcbcc85e9673de8236395435f2232a4e962f96)
+++ lams_tool_scratchie/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -113,7 +113,7 @@
 			</c:if>
 
 			//initialize tooltips showing user names next to confidence levels
-			$('[data-toggle="tooltip"]').tooltip();
+			$('[data-bs-toggle="tooltip"]').tooltip();
 		});
 
 		//scratch image (used by both scratchMcq() and scratchVsa())
Index: lams_tool_scratchie/web/pages/learning/scratchies.jsp
===================================================================
diff -u -r5a58ebc3f2aaf6ea5183e1ed1204d2e94ea45d10 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_scratchie/web/pages/learning/scratchies.jsp	(.../scratchies.jsp)	(revision 5a58ebc3f2aaf6ea5183e1ed1204d2e94ea45d10)
+++ lams_tool_scratchie/web/pages/learning/scratchies.jsp	(.../scratchies.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -79,7 +79,7 @@
 								</c:choose> 
 								
 								<c:if test="${(showResults || mode == 'teacher') && (optionDto.attemptOrder != -1)}">
-									<div style="text-align: center; margin-top: 2px;">
+									<div class="text-center mt-1">
 										<fmt:message key="label.choice.number">
 											<fmt:param>${optionDto.attemptOrder}</fmt:param>
 										</fmt:message>
@@ -135,7 +135,7 @@
 								</c:choose>
 								
 								<c:if test="${(showResults || mode == 'teacher') && (optionDto.attemptOrder != -1)}">
-									<div style="text-align: center; margin-top: 2px;">
+									<div class="text-center mt-1">
 										<fmt:message key="label.choice.number">
 											<fmt:param>${optionDto.attemptOrder}</fmt:param>
 										</fmt:message>
@@ -169,7 +169,7 @@
 						</div>
 									
 						<div>
-							<input type="text" id="input-${item.uid}" size="70" class="form-control input-sm submit-user-answer-input
+							<input type="text" id="input-${item.uid}" size="70" class="form-control form-control-sm submit-user-answer-input
 								<c:if test="${item.qbQuestion.autocompleteEnabled}">ui-autocomplete-input</c:if>"
 								style="display: inline-block; width: 70%;" data-item-uid="${item.uid}" aria-labelledby="type-your-answer-descr-${item.uid}"/>
 									
Index: lams_tool_scribe/web/pages/learning/learning.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_scribe/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_scribe/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -139,12 +139,12 @@
 					class="fa fa-question-circle text-info"></i></abbr>
 				<fmt:message key="heading.report" />
 			</h4>
-			<p class="help-block" style="font-size: 12px"><fmt:message key="activity.title"/>: ${appointedScribe}</p>
+			<p class="form-text" style="font-size: 12px"><fmt:message key="activity.title"/>: ${appointedScribe}</p>
 		
 				<c:forEach var="reportDTO" items="${scribeSessionDTO.reportDTOs}">
 		
 					<div class="row">
-						<div class="col-xs-12">
+						<div class="col-12">
 							<div class="panel panel-default">
 								<div class="panel-heading panel-title">
 									<c:out value="${reportDTO.headingDTO.headingText}" escapeXml="false" />
@@ -165,7 +165,7 @@
 				</c:forEach>
 		
 				<div class="row">
-					<div class="col-xs-12" id="agreeButton">
+					<div class="col-12" id="agreeButton">
 						<button class="btn btn-success float-start" onClick="javascript:submitApproval()">
 							<fmt:message key="button.agree" />
 						</button>
Index: lams_tool_scribe/web/pages/learning/parts/reportBody.jsp
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_scribe/web/pages/learning/parts/reportBody.jsp	(.../reportBody.jsp)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_scribe/web/pages/learning/parts/reportBody.jsp	(.../reportBody.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -14,7 +14,7 @@
 <c:forEach var="reportDTO" items="${scribeSessionDTO.reportDTOs}">
 
 	<div class="row">
-		<div class="col-xs-12">
+		<div class="col-12">
 			<div class="panel panel-default">
 				<div class="panel-heading panel-title">
 					<c:out value="${reportDTO.headingDTO.headingText}" escapeXml="false" />
@@ -34,7 +34,7 @@
 
 <c:if test="${scribeUserDTO.finishedActivity and scribeDTO.reflectOnActivity}">
 	<div class="row">
-		<div class="col-xs-12">
+		<div class="col-12">
 			<div class="panel panel-default">
 				<div class="panel-heading panel-title">
 					<fmt:message key="heading.reflection" />
@@ -44,7 +44,7 @@
 						<lams:out value="${scribeDTO.reflectInstructions}" escapeHtml="true" />
 					</div>
 
-					<div class="panel-body bg-warning voffset10">
+					<div class="panel-body bg-warning mt-2">
 						<lams:out value="${scribeUserDTO.notebookEntry}" escapeHtml="true" />
 					</div>
 				</div>
@@ -63,11 +63,16 @@
 	<c:forEach var="scribeSessionDTO" items="${otherScribeSessions}">
 		<c:set var="sessNumber" value="${sessNumber +1 }"/>
 		<div class="row">
-			<div class="col-xs-12">
+			<div class="col-12">
 				<div class="panel panel-default">
 					<div class="panel-heading panel-title">
-					<a data-toggle="collapse" data-target="#panel-${sessNumber}" href="#panel-${sessNumber}">${scribeSessionDTO.sessionName}</a>
+						<button type="button" class="btn btn-secondary collapsed" data-bs-toggle="collapse"
+							 data-bs-target="#panel-${sessNumber}"
+						>
+							${scribeSessionDTO.sessionName}
+						</button>
 					</div>
+					
 					<div id="panel-${sessNumber}" class="panel-body panel-collapse collapse in">
 
 						<c:forEach var="reportDTO" items="${scribeSessionDTO.reportDTOs}">
Index: lams_tool_scribe/web/pages/learning/scribe.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_scribe/web/pages/learning/scribe.jsp	(.../scribe.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_scribe/web/pages/learning/scribe.jsp	(.../scribe.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -144,7 +144,7 @@
 			</h4>
 			<c:forEach var="reportDTO" items="${scribeSessionDTO.reportDTOs}">
 				<div class="row">
-					<div class="col-xs-12">
+					<div class="col-12">
 						<div class="panel panel-default">
 							<div class="panel-heading panel-title">
 								<c:out value="${reportDTO.headingDTO.headingText}" escapeXml="false" />
@@ -163,7 +163,7 @@
 		
 								<c:if test="${not scribeUserDTO.finishedActivity}">
 									<textarea id="report-${reportDTO.uid}" rows="6"
-										class="form-control voffset5">${reportDTO.entryText}</textarea>
+										class="form-control mt-2">${reportDTO.entryText}</textarea>
 								</c:if>
 							</div>
 						</div>
@@ -173,8 +173,8 @@
 		
 			<c:if test="${not scribeUserDTO.finishedActivity}">
 				<div class="row">
-					<div class="col-xs-12" id="submitReportBtn">
-						<button class="btn btn-sm btn-default pull-right" onClick="javascript:submitReport()">
+					<div class="col-12" id="submitReportBtn">
+						<button class="btn btn-sm btn-secondary float-end" onClick="javascript:submitReport()">
 							<fmt:message key="button.submitReport" />
 						</button>
 					</div>
@@ -187,7 +187,7 @@
 				<form:hidden path="mode" />
 		
 				<div id="forceCompleteBtn">
-					<button class="btn btn-primary pull-right">
+					<button class="btn btn-primary float-end">
 						<fmt:message key="button.forceComplete" />
 					</button>
 				</div>
Index: lams_tool_spreadsheet/web/pages/learning/learning.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_spreadsheet/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_spreadsheet/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -69,11 +69,11 @@
 		<br>
 		
 		<c:if test="${spreadsheet.markingEnabled}">
-		<div class="row no-gutter">
-			<div class="col-xs-12">
+		<div class="row g-0">
+			<div class="col-12">
 			<div class="panel panel-default">
 				<div class="panel-body">
-				<div class="row no-gutter">
+				<div class="row g-0">
 					<div class="col-sm-2"><fmt:message key="label.learning.comments" /></div>
 					<div class="col-sm-10">
 						<c:choose>
@@ -86,7 +86,7 @@
 						</c:choose>
 					</div>
 				</div>
-				<div class="row no-gutter">
+				<div class="row g-0">
 				<div class="col-sm-2"><fmt:message key="label.learning.marks" /></div>
 					<div class="col-sm-10">
 						<c:choose>
@@ -106,8 +106,8 @@
 		</c:if>		
 
 		
-		<div class="row no-gutter">
-			<div class="col-xs-12">
+		<div class="row g-0">
+			<div class="col-12">
 				<div class="panel panel-default">
 					<div class="panel-body">
 					<iframe
@@ -130,8 +130,8 @@
 
 
 		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn}">
-			<div class="row no-gutter">
-				<div class="col-xs-12">
+			<div class="row g-0">
+				<div class="col-12">
 					<div class="panel panel-default">
 						<div class="panel-heading panel-title">
 							<fmt:message key="title.reflection" />
@@ -145,7 +145,7 @@
 							</div>
 
 							<c:if test="${hasEditRight}">
-								<button name="forwardtoReflection" class="btn btn-default float-start"
+								<button name="forwardtoReflection" class="btn btn-secondary float-start"
 									onclick="submitMethod('forwardtoReflection');">
 									<fmt:message key="label.edit" />
 								</button>
@@ -161,8 +161,8 @@
 							</c:choose>
 
 							<c:if test="${mode != 'teacher'}">
-								<button name="FinishButton" onclick="return continueReflect()" class="btn btn-default voffset10 float-start">
-								<fmt:message key="label.edit" />
+								<button name="FinishButton" onclick="return continueReflect()" class="btn btn-secondary mt-2 float-start">
+									<fmt:message key="label.edit" />
 								</button>
 							</c:if>
 							
Index: lams_tool_spreadsheet/web/pages/reviewitem/reviewitem.jsp
===================================================================
diff -u -r977c1d91def623ad1c8d5adffb4b32c810ef1dc6 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_spreadsheet/web/pages/reviewitem/reviewitem.jsp	(.../reviewitem.jsp)	(revision 977c1d91def623ad1c8d5adffb4b32c810ef1dc6)
+++ lams_tool_spreadsheet/web/pages/reviewitem/reviewitem.jsp	(.../reviewitem.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -29,7 +29,7 @@
 						scrolling="no">
 					</iframe> 
 
-					<a href="javascript:window.close();" class="btn btn-default"><fmt:message key="button.close"/></a>
+					<a href="javascript:window.close();" class="btn btn-secondary"><fmt:message key="button.close"/></a>
 					
 				</c:otherwise>
 			</c:choose>	
Index: lams_tool_survey/web/pages/learning/question.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_survey/web/pages/learning/question.jsp	(.../question.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_survey/web/pages/learning/question.jsp	(.../question.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -1,17 +1,16 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<div class="sbox voffset5">
+<div class="sbox mt-2">
 	<div class="sbox-heading clearfix">
 		<c:if test="${not question.optional}">
-			<abbr class="float-end" title="<fmt:message key='label.answer.required'/>"><i class="fa fa-xs fa-asterisk text-danger pull-right"></i></abbr>
+			<abbr class="float-end" title="<fmt:message key='label.answer.required'/>"><i class="fa fa-xs fa-asterisk text-danger float-end"></i></abbr>
 		</c:if>
 
 		<c:out value="${question.description}" escapeXml="false" />
 		<lams:errors path="questionError${question.uid}"/>
-
 	</div>
+	
 	<div class="sbox-body">
-
 		<c:set var="answerText" value="" />
 		<c:if test="${not empty question.answer}">
 			<c:set var="answerText" value="${question.answer.answerText}" />
@@ -26,31 +25,34 @@
 					</c:if>
 				</c:forEach>
 			</c:if>
-			<div class="form-group">
-				<c:choose>
-					<c:when test="${question.type == 1}">
-
-						<input type="radio" id="optionChoice${question.uid}${option.uid}" name="optionChoice${question.uid}" value="${option.uid}"
-							${checked} />
-						<label for="optionChoice${question.uid}${option.uid}"><c:out value="${option.description}" escapeXml="true" /></label>
-
-					</c:when>
-					<c:when test="${question.type == 2}">
-
-						<input type="checkbox" id="optionChoice${question.uid}${option.uid}" name="optionChoice${question.uid}" value="${option.uid}"
-							${checked} />
-						<label for="optionChoice${question.uid}${option.uid}"><c:out value="${option.description}" escapeXml="true" /></label>
-
-					</c:when>
-				</c:choose>
+			
+			<div class="mb-3">
+			<div class="form-check">
+				<input id="optionChoice${question.uid}${option.uid}" name="optionChoice${question.uid}" value="${option.uid}" class="form-check-input"
+						${checked} 
+						<c:choose>
+							<c:when test="${question.type == 1}">
+								type="radio"
+							</c:when>
+							<c:when test="${question.type == 2}">
+								type="checkbox"
+							</c:when>
+						</c:choose>						
+				/>
+				
+				<label for="optionChoice${question.uid}${option.uid}" class="form-check-label">
+					<c:out value="${option.description}" escapeXml="true" />
+				</label>
 			</div>
+			</div>
 		</c:forEach>
 
 		<c:if test="${question.type == 3}">
 			<p>
 				<lams:textarea name="optionText${question.uid}" rows="7" class="form-control">${answerText}</lams:textarea>
 			</p>
 		</c:if>
+		
 		<c:if test="${question.appendText}">
 			<c:set var="jsfunc" value="" />
 			<%-- for single choice question, use javascript to ensure only one option or openText can be chosen --%>
@@ -65,9 +67,5 @@
 				<textarea name="optionText${question.uid}" rows="7" cols="50" type="_moz" ${jsfunc}>${answerText}</textarea>
 			</p>
 		</c:if>
-
 	</div>
-
 </div>
-
-
Index: lams_tool_survey/web/pages/learning/result.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_survey/web/pages/learning/result.jsp	(.../result.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_survey/web/pages/learning/result.jsp	(.../result.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -48,7 +48,7 @@
 		</div>
 
 		<c:if test="${sessionMap.lockOnFinish and sessionMap.mode != 'teacher'}">
-			<div class="voffset5">
+			<div class="mt-2">
 				<c:choose>
 					<c:when test="${sessionMap.showOtherUsersAnswers}">
 						<c:set var="buttonLabel">
@@ -90,7 +90,7 @@
 		</c:if>
 
 		<c:forEach var="element" items="${sessionMap.questionList}">
-			<div class="sbox voffset5">
+			<div class="sbox mt-2">
 				<div class="sbox-heading clearfix">
 					<c:if test="${not question.optional}">
 						<abbr class="float-end" title="<fmt:message key='label.answer.required'/>"><i
@@ -147,17 +147,17 @@
 		</c:forEach>
 
 		<c:if test="${not sessionMap.finishedLock}">
-			<div class="voffset5">
-				<button property="RetakeButton" onclick="return retakeSurvey(-1)" class="btn btn-sm btn-default float-start">
+			<div class="mt-2">
+				<button property="RetakeButton" onclick="return retakeSurvey(-1)" class="btn btn-sm btn-secondary float-start">
 					<fmt:message key="label.retake.survey" />
 				</button>
 			</div>
 		</c:if>
 
-		<div class="voffset10">&nbsp;</div>
+		<div class="mt-2">&nbsp;</div>
 
 		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn and !sessionMap.showOtherUsersAnswers}">
-			<div class="panel panel-default voffset10">
+			<div class="panel panel-default mt-2">
 				<div class="panel-heading panel-title">
 					<fmt:message key="title.reflection" />
 				</div>
@@ -173,14 +173,14 @@
 							</p>
 						</c:when>
 						<c:otherwise>
-							<div class="panel-body bg-warning voffset5">
+							<div class="panel-body bg-warning mt-2">
 								<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
 							</div>
 						</c:otherwise>
 					</c:choose>
 
 					<button property="ContinueButton" onclick="return continueReflect()"
-						class="btn voffset5 btn-sm btn-default float-start">
+						class="btn mt-2 btn-sm btn-secondary float-start">
 						<fmt:message key="label.edit" />
 					</button>
 				</div>
@@ -192,7 +192,7 @@
 				<c:choose>
 					<c:when test="${sessionMap.showOtherUsersAnswers}">
 						<button property="otherUsersAnswersButton" onclick="return showOtherUsersAnswers()"
-							class="btn btn-default">
+							class="btn btn-primary">
 							<fmt:message key="label.view.all.responses" />
 						</button>
 					</c:when>
@@ -205,8 +205,7 @@
 					</c:when>
 
 					<c:otherwise>
-						<button type="submit" id="finishButton"
-							class="btn btn-primary na">
+						<button type="submit" id="finishButton" class="btn btn-primary na">
 							<c:choose>
 								<c:when test="${sessionMap.isLastActivity}">
 									<fmt:message key="label.submit" />
Index: lams_tool_survey/web/pages/learning/resultOtherUsers.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_survey/web/pages/learning/resultOtherUsers.jsp	(.../resultOtherUsers.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_survey/web/pages/learning/resultOtherUsers.jsp	(.../resultOtherUsers.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -120,7 +120,7 @@
 		<%-- user personal results--%>
 		<div class="panel">
 		<c:forEach var="element" items="${sessionMap.questionList}">
-			<div class="sbox voffset10">
+			<div class="sbox mt-2">
 				<div class="sbox-heading clearfix">
 					<c:if test="${not question.optional}">
 						<abbr class="float-end" title="<fmt:message key='label.answer.required'/>"><i
@@ -170,15 +170,16 @@
 		</c:forEach>
 
 		<c:if test="${not sessionMap.lockOnFinish}">
-			<div class="voffset5">
-			<button property="RetakeButton" onclick="return retakeSurvey()" class="btn btn-default">
-				<fmt:message key="label.retake.survey" />
-			</button></div>
+			<div class="mt-2">
+				<button property="RetakeButton" onclick="return retakeSurvey()" class="btn btn-secondary">
+					<fmt:message key="label.retake.survey" />
+				</button>
+			</div>
 		</c:if>
 		</div>
 
 		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn}">
-			<div class="voffset10 panel panel-default">
+			<div class="mt-2 panel panel-default">
 				<div class="panel-heading panel-title">
 					<fmt:message key="title.reflection" />
 				</div>
@@ -209,7 +210,7 @@
 
 		<%-- other users personal results--%>
 		<c:if test="${sessionMap.showOtherUsersAnswers}">
-		<div class="voffset10 panel panel-default">
+		<div class="mt-2 panel panel-default">
 			<div class="panel-heading panel-title" id="other-users-answers-title">
 				<fmt:message key="label.other.answers" />
 			</div>
@@ -223,7 +224,7 @@
 
 			<c:forEach var="question" items="${answerDtos}" varStatus="queStatus">
 				<div class="table-responsive">
-					<table class="table table-hover table-condensed">
+					<table class="table table-hover table-sm">
 						<tr>
 							<th class="first" colspan="2"><c:out value="${question.shortTitle}" /> <%-- Only show pie/bar chart when question is single/multiple choics type --%>
 								<c:if test="${question.type != 3}">
@@ -266,9 +267,9 @@
 						<c:if test="${question.type == 3}">
 							<tr>
 								<td colspan="2">
-									<lams:TSTable numColumns="1" dataId='data-question-uid="${question.uid}"' test="2"> 
+									<lams:TSTable5 numColumns="1" dataId='data-question-uid="${question.uid}"' test="2"> 
 										<th title="<fmt:message key='label.sort.by.answer'/>"><fmt:message key="label.answer" /></th>
-									</lams:TSTable>
+									</lams:TSTable5>
 									
 								</td>
 							</tr>
Index: lams_tool_task/web/pages/learning/learning.jsp
===================================================================
diff -u -r78d4b7fda7982f0f9957d6ab206ce9c741f2eea1 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_task/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 78d4b7fda7982f0f9957d6ab206ce9c741f2eea1)
+++ lams_tool_task/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -295,15 +295,15 @@
 
 		<!--"Check for new" button-->
 
-		<p class="help-block">
+		<p class="form-text">
 			* -
 			<fmt:message key="label.learning.required.tasks" />
 		</p>
 
 		<c:if test="${mode != 'teacher'}">
 			<p>
-				<button onclick="return checkNew()" class="btn btn-sm btn-default btn-disable-on-submit"> 
-				<fmt:message key="label.learning.check.for.new" />
+				<button onclick="return checkNew()" class="btn btn-sm btn-secondary btn-disable-on-submit"> 
+					<fmt:message key="label.learning.check.for.new" />
 				</button>
 			</p>
 		</c:if>
@@ -315,7 +315,7 @@
 
 				<p>
 					<button onclick="javascript:showMessage('<lams:WebAppURL/>learning/addtask.do?sessionMapID=${sessionMapID}&mode=${mode}');"
-						class="btn btn-sm btn-default btn-disable-on-submit"><i class="fa fa-sm fa-plus-circle"></i>&nbsp;<fmt:message
+						class="btn btn-sm btn-secondary btn-disable-on-submit"><i class="fa fa-sm fa-plus-circle"></i>&nbsp;<fmt:message
 							key="label.authoring.basic.add.task" /> </button>
 				<p>
 
@@ -337,7 +337,7 @@
 									<lams:out escapeHtml="true" value="${sessionMap.reflectInstructions}" />
 								</div>
 
-								<div class="form-group">
+								<div class="mb-3">
 
 									<c:choose>
 										<c:when test="${empty sessionMap.reflectEntry}">
@@ -355,7 +355,7 @@
 
 									<c:if test="${mode != 'teacher'}">
 										<button type="submit" id="finishButton" onclick="return continueReflect()"
-											class="btn btn-sm btn-default float-start voffset10 btn-disable-on-submit">
+											class="btn btn-sm btn-secondary float-start mt-2 btn-disable-on-submit">
 											<fmt:message key="label.edit" />
 										</button>
 									</c:if>
Index: lams_tool_task/web/pages/learning/parts/addtask.jsp
===================================================================
diff -u -raff1ef425c76fe6a2051694c0fdf833265459710 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_task/web/pages/learning/parts/addtask.jsp	(.../addtask.jsp)	(revision aff1ef425c76fe6a2051694c0fdf833265459710)
+++ lams_tool_task/web/pages/learning/parts/addtask.jsp	(.../addtask.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -34,24 +34,24 @@
 		</h5>
 		<lams:errors/>
 
-		<div class="form-group">
+		<div class="mb-3">
 			<label for="taskTitle">
 			<fmt:message key="label.authoring.basic.resource.title.input" />
 			</label>
 			<form:input id="taskTitle" path="title" cssClass="form-control" tabindex="1" />
 		</div>
-		<div class="form-group">
+		<div class="mb-3">
 			<label for="description"><fmt:message key="label.learning.comment.or.instruction" /></label>
 			<lams:textarea irows="5" tabindex="2" id="description" class="form-control" name="description"></lams:textarea>
 		</div>
 	</form:form>
 
-	<div class="form-group">
+	<div class="mb-3">
 		<lams:ImgButtonWrapper>
-			<button onclick="cancel();" class="btn btn-sm btn-default btn-disable-on-submit"> 
+			<button onclick="cancel();" class="btn btn-sm btn-secondary btn-disable-on-submit"> 
 				<fmt:message key="label.cancel" />
 			</button>
-			<button onclick="saveTask()" class="btn btn-sm btn-default btn-disable-on-submit"> 
+			<button onclick="saveTask()" class="btn btn-sm btn-secondary btn-disable-on-submit"> 
 				<fmt:message key="button.add" />
 			</button>
 		</lams:ImgButtonWrapper>
Index: lams_tool_task/web/pages/learning/parts/commentlist.jsp
===================================================================
diff -u -r7c46c69de0269005bc00c1e5fd5347f6fe306790 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_task/web/pages/learning/parts/commentlist.jsp	(.../commentlist.jsp)	(revision 7c46c69de0269005bc00c1e5fd5347f6fe306790)
+++ lams_tool_task/web/pages/learning/parts/commentlist.jsp	(.../commentlist.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -14,8 +14,8 @@
 
 <c:forEach var="comment" items="${itemDTO.comments}">
 	<c:if test="${(sessionMap.userLogin == comment.createBy.loginName) || (sessionMap.mode == 'teacher') || (sessionMap.mode == 'author')}">
-		<div class="row voffset5">
-			<div class="col-xs-12">
+		<div class="row mt-2">
+			<div class="col-12">
 				<div class="panel panel-default">
 					<div class="panel-heading-sm panel-title bg-warning">
 						<c:if test="${not empty comment.createBy.userId}">
@@ -57,14 +57,14 @@
 		</lams:Alert>
 	</c:if>
 
-	<div class="form-group voffset5">
+	<div class="mb-3 mt-2">
 		<label for="comment-${itemUid}">
 			<fmt:message key="label.preview.add.comment" />
 		</label>
 		<textarea name="comment-${itemUid}" id="comment-${itemUid}" class="form-control" rows="2"></textarea>
 
 		<input type="submit" value='<fmt:message key="label.preview.post" />'
-				class="btn btn-default btn-disable-on-submit voffset5" onclick="addNewComment(${itemUid})"/>
+				class="btn btn-secondary btn-disable-on-submit mt-2" onclick="addNewComment(${itemUid})"/>
 	</div>
 	
 </c:if>
Index: lams_tool_task/web/pages/learning/parts/itemdetails.jsp
===================================================================
diff -u -re28fe624a0c9761166375a90de55c7869a77670e -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_task/web/pages/learning/parts/itemdetails.jsp	(.../itemdetails.jsp)	(revision e28fe624a0c9761166375a90de55c7869a77670e)
+++ lams_tool_task/web/pages/learning/parts/itemdetails.jsp	(.../itemdetails.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -1,7 +1,7 @@
 <%@ include file="/common/taglibs.jsp"%>
 
 <div class="row">
-	<div class="col-xs-12">
+	<div class="col-12">
 		<div class="panel-body">${item.description}</div>
 		
 		<!-- Comments Part -->
@@ -32,13 +32,13 @@
 				<c:if test="${sessionMap.mode != 'teacher'}">
 					<input type="hidden" id="tmpFileUploadId" name="tmpFileUploadId"
 						   value="${taskListItemForm.tmpFileUploadId}_${item.uid}" />
-					<div id="file-upload-area-${item.uid}" class="voffset20"></div>
+					<div id="file-upload-area-${item.uid}" class="mt-4"></div>
 					<script>
 						initFileUpload('#file-upload-area-${item.uid}', '${taskListItemForm.tmpFileUploadId}_${item.uid}', '<lams:user property="localeLanguage"/>');
 					</script>
 					
 					<input type="submit" name="uploadedFileButton" value='<fmt:message key="label.preview.upload.button" />'
-						class="btn btn-default btn-disable-on-submit voffset5" />
+						class="btn btn-secondary btn-disable-on-submit mt-2" />
 				</c:if>
 			</form:form>
 				
Index: lams_tool_task/web/pages/learning/parts/itemlist.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_task/web/pages/learning/parts/itemlist.jsp	(.../itemlist.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_task/web/pages/learning/parts/itemlist.jsp	(.../itemlist.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -12,7 +12,7 @@
 
 			<div class="panel panel-default">
 				<div class="panel-heading clearfix">
-					<div class="panel-title float-start" data-toggle="collapse" data-target="#collapse${item.uid}">
+					<div class="panel-title float-start" data-bs-toggle="collapse" data-bs-target="#collapse${item.uid}">
 						<c:out value="${item.title}" escapeXml="true" /> 
 						<c:if test="${!item.createByAuthor && item.createBy != null}">
 							[<c:out value="${item.createBy.firstName} ${item.createBy.lastName}" escapeXml="true" />]
@@ -22,6 +22,7 @@
 						</c:if>
 						</a>
 					</div>
+					
 					<div class="float-end">
 						<c:choose>
 							<c:when test="${item.complete}">
@@ -55,7 +56,7 @@
 	</c:forEach>
 
 	<c:if test="${fn:length(taskList.minimumNumberTasksErrorStr) > 0}">
-		<p class="help-block">
+		<p class="form-text">
 			<c:out value="${taskList.minimumNumberTasksErrorStr}" />
 		</p>
 	</c:if>
Index: lams_tool_vote/web/learning/AllNominations.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_vote/web/learning/AllNominations.jsp	(.../AllNominations.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_vote/web/learning/AllNominations.jsp	(.../AllNominations.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -71,7 +71,7 @@
 
 			<!--present  a mini summary table here -->
 
-			<table class="table table-condensed table-hover">
+			<table class="table table-sm table-hover">
 				<tr>
 					<th><fmt:message key="label.nomination" /></th>
 					<th class="text-center"><fmt:message key="label.total.votes" /></th>
@@ -145,19 +145,19 @@
 
 					<c:forEach var="vote" items="${requestScope.listUserEntriesContent}">
 						<c:if test="${vote.userEntry != ''}">
-							<div class="media">
-								<div class="media-left">
+							<div class="d-flex">
+								<div class="flex-shrink-0">
 									<i class="fa fa-xs fa-check text-success"></i>
 								</div>
-								<div class="media-body">
-						<c:choose>
-						<c:when test="${vote.visible}">
-							<c:out value="${vote.userEntry}" escapeXml="true" />
-						</c:when>
-						<c:otherwise>
-							<em>(<fmt:message key="label.hidden"/>)</em>
-						</c:otherwise>
-						</c:choose>
+								<div class="flex-grow-1 ms-3">
+									<c:choose>
+										<c:when test="${vote.visible}">
+											<c:out value="${vote.userEntry}" escapeXml="true" />
+										</c:when>
+										<c:otherwise>
+											<em>(<fmt:message key="label.hidden"/>)</em>
+										</c:otherwise>
+									</c:choose>
 								</div>
 							</div>
 						</c:if>
@@ -174,22 +174,22 @@
 					</c:otherwise>
 				</c:choose>
 				<c:forEach var="entry" items="${requestScope.listGeneralCheckedOptionsContent}">
-					<div class="media">
-						<div class="media-left">
+					<div class="d-flex">
+						<div class="flex-shrink-0">
 							<i class="fa fa-xs fa-check text-success"></i>
 						</div>
-						<div class="media-body">
+						<div class="flex-grow-1 ms-3">
 							<c:out value="${entry}" escapeXml="false" />
 						</div>
 					</div>
 				</c:forEach>
 
 				<c:if test="${not empty voteLearningForm.userEntry}">
-					<div class="media">
-						<div class="media-left">
+					<div class="d-flex">
+						<div class="flex-shrink-0">
 							<i class="fa fa-xs fa-check text-success"></i>
 						</div>
-						<div class="media-body">
+						<div class="flex-grow-1 ms-3">
 							<c:out value="${voteLearningForm.userEntry}" escapeXml="true" />
 						</div>
 					</div>
Index: lams_tool_vote/web/learning/AnswersContent.jsp
===================================================================
diff -u -r78d4b7fda7982f0f9957d6ab206ce9c741f2eea1 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_vote/web/learning/AnswersContent.jsp	(.../AnswersContent.jsp)	(revision 78d4b7fda7982f0f9957d6ab206ce9c741f2eea1)
+++ lams_tool_vote/web/learning/AnswersContent.jsp	(.../AnswersContent.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -184,16 +184,23 @@
 
 			<!-- options  -->
 			<div class="table-responsive">
-				<table class="table table-hover table-condensed">
+				<table class="table table-hover table-sm">
 					<tbody>
 						<c:set var="count" value="0" scope="page" />
 						<c:forEach var="subEntry" varStatus="status" items="${requestScope.mapQuestionContentLearner}">
 							<c:set var="count" value="${count + 1}" scope="page" />
 
 							<tr>
-								<td width="20px"><input type="checkbox" id="vote${count}" name="checkedVotes" value="${subEntry.key}"
-									onClick="updateCount(this);"></td>
-								<td width="100%"><label for="vote${count}"><c:out value="${subEntry.value}" escapeXml="false" /></label></td>
+								<td width="100%">
+									<div class="form-check">
+										<input type="checkbox" id="vote${count}" name="checkedVotes" value="${subEntry.key}" class="form-check-input"
+											onClick="updateCount(this);">
+	
+										<label for="vote${count}" class="form-check-label">
+											<c:out value="${subEntry.value}" escapeXml="false" />
+										</label>
+									</div>
+								</td>
 							</tr>
 						</c:forEach>
 					</tbody>
Index: lams_tool_vote/web/learning/ExitLearning.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_vote/web/learning/ExitLearning.jsp	(.../ExitLearning.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_vote/web/learning/ExitLearning.jsp	(.../ExitLearning.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -83,13 +83,13 @@
 
 						<lams:out value="${voteGeneralLearnerFlowDTO.reflectionSubject}" escapeHtml="true" />
 
-						<div class="panel-body voffset5 bg-warning">
+						<div class="panel-body mt-2 bg-warning">
 							<lams:out value="${voteGeneralLearnerFlowDTO.notebookEntry}" escapeHtml="true" />
 						</div>
 
 						<c:if
 							test="${voteGeneralLearnerFlowDTO.lockOnFinish == 'false' && hasEditRight && voteGeneralLearnerFlowDTO.learningMode != 'teacher'}">
-							<form:button path="forwardtoReflection" cssClass="btn btn-sm btn-default voffset10 float-start"
+							<form:button path="forwardtoReflection" cssClass="btn btn-sm btn-secondary mt-2 float-start"
 								onclick="submitMethod('forwardtoReflection');">
 								<fmt:message key="label.edit" />
 							</form:button>
Index: lams_tool_vote/web/learning/IndividualLearnerResults.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_vote/web/learning/IndividualLearnerResults.jsp	(.../IndividualLearnerResults.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_vote/web/learning/IndividualLearnerResults.jsp	(.../IndividualLearnerResults.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -66,37 +66,37 @@
 			</c:if>
 
 			<div class="row">
-				<div class="col-xs-12">
+				<div class="col-12">
 					<div class="panel panel-default">
 						<div class="panel-heading panel-title">
 							<fmt:message key="label.learning.reportMessage" />
 						</div>
 						<div class="panel-body">
 
 							<c:forEach var="entry" items="${requestScope.mapGeneralCheckedOptionsContent}">
-								<div class="media">
-									<div class="media-left">
+								<div class="d-flex">
+									<div class="flex-shrink-0">
 										<i class="fa fa-xs fa-check text-success"></i>
 									</div>
-									<div class="media-body">
+									<div class="flex-grow-1 ms-3">
 										<c:out value="${entry.value}" escapeXml="false" />
 									</div>
 								</div>
 							</c:forEach>
 
 							<c:if test="${not empty voteLearningForm.userEntry}">
-								<div class="media">
-									<div class="media-left">
+								<div class="d-flex">
+									<div class="flex-shrink-0">
 										<i class="fa fa-xs fa-check text-success"></i>
 									</div>
-									<div class="media-body">
+									<div class="flex-grow-1 ms-3">
 										<c:out value="${voteLearningForm.userEntry}" escapeXml="true" />
 									</div>
 								</div>
 							</c:if>
 
 							<c:if test="${hasEditRight}">
-								<input type="submit" name="redoQuestions" class="btn btn-sm btn-default float-start voffset10"
+								<input type="submit" name="redoQuestions" class="btn btn-sm btn-secondary float-start mt-2"
 									onclick="submitMethod('redoQuestions');"
 									value='<fmt:message key="label.retake" />?' />
 							</c:if>
Index: lams_tool_vote/web/learning/RevisitedAllNominations.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_vote/web/learning/RevisitedAllNominations.jsp	(.../RevisitedAllNominations.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_vote/web/learning/RevisitedAllNominations.jsp	(.../RevisitedAllNominations.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -78,7 +78,7 @@
 						</c:if>
 
 						<c:if test="${hasEditRight}">
-							<input type="submit" name="redoQuestionsOk" class="btn btn-sm btn-default voffset10 float-start"
+							<input type="submit" name="redoQuestionsOk" class="btn btn-sm btn-secondary mt-2 float-start"
 								onclick="submitMethod('redoQuestionsOk');"
 								value='<fmt:message key="label.retake" />' />
 						</c:if>
@@ -96,12 +96,12 @@
 
 						<lams:out value="${voteGeneralLearnerFlowDTO.reflectionSubject}" escapeHtml="true" />
 
-						<div class="panel-body voffset5 bg-warning">
+						<div class="panel-body mt-2 bg-warning">
 							<lams:out value="${voteGeneralLearnerFlowDTO.notebookEntry}" escapeHtml="true" />
 						</div>
 
 						<c:if test="${voteGeneralLearnerFlowDTO.lockOnFinish == 'false' && hasEditRight}">
-							<form:button path="forwardtoReflection" cssClass="btn btn-sm btn-default voffset10 float-start"
+							<form:button path="forwardtoReflection" cssClass="btn btn-sm btn-secondary mt-2 float-start"
 								onclick="submitMethod('forwardtoReflection');">
 								<fmt:message key="label.edit" />
 							</form:button>
Index: lams_tool_vote/web/learning/RevisitedDisplay.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_vote/web/learning/RevisitedDisplay.jsp	(.../RevisitedDisplay.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_vote/web/learning/RevisitedDisplay.jsp	(.../RevisitedDisplay.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -77,11 +77,11 @@
 		</strong>
 		<c:forEach var="vote" items="${requestScope.listUserEntriesContent}">
 			<c:if test="${vote.userEntry != ''}">
-				<div class="media">
-					<div class="media-left">
+				<div class="d-flex">
+					<div class="flex-shrink-0">
 						<i class="fa fa-xs fa-check text-success"></i>
 					</div>
-					<div class="media-body">
+					<div class="flex-grow-1 ms-3">
 						<c:choose>
 							<c:when test="${vote.visible}">
 								<c:out value="${vote.userEntry}" escapeXml="true" />
@@ -97,7 +97,7 @@
 		</c:forEach>
 	</c:if>
 </div>
-<div id="nominations" class="voffset10">
+<div id="nominations" class="mt-2">
 	<c:choose>
 		<c:when test="${fn:length(requestScope.listGeneralCheckedOptionsContent) > 1}">
 			<strong><fmt:message key="label.learner.nominations" /> </strong>
@@ -108,22 +108,22 @@
 	</c:choose>
 
 	<c:forEach var="entry" items="${requestScope.listGeneralCheckedOptionsContent}">
-		<div class="media">
-			<div class="media-left">
+		<div class="d-flex">
+			<div class="flex-shrink-0">
 				<i class="fa fa-xs fa-check text-success"></i>
 			</div>
-			<div class="media-body">
+			<div class="flex-grow-1 ms-3">
 				<c:out value="${entry}" escapeXml="true" />
 			</div>
 		</div>
 	</c:forEach>
 
 	<c:if test="${not empty VoteLearningForm.userEntry}">
-		<div class="media">
-			<div class="media-left">
+		<div class="d-flex">
+			<div class="flex-shrink-0">
 				<i class="fa fa-xs fa-check text-success"></i>
 			</div>
-			<div class="media-body">
+			<div class="flex-grow-1 ms-3">
 				<c:out value="${VoteLearningForm.userEntry}" escapeXml="false" />
 			</div>
 		</div>
Index: lams_tool_vote/web/learning/RevisitedNoDisplay.jsp
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_vote/web/learning/RevisitedNoDisplay.jsp	(.../RevisitedNoDisplay.jsp)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_vote/web/learning/RevisitedNoDisplay.jsp	(.../RevisitedNoDisplay.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -15,22 +15,22 @@
 </c:choose>
 
 <c:forEach var="entry" items="${requestScope.listGeneralCheckedOptionsContent}">
-	<div class="media">
-		<div class="media-left">
+	<div class="d-flex">
+		<div class="flex-shrink-0">
 			<i class="fa fa-xs fa-check text-success"></i>
 		</div>
-		<div class="media-body">
+		<div class="flex-grow-1 ms-3">
 			<c:out value="${entry}" escapeXml="false" />
 		</div>
 	</div>
 </c:forEach>
 
 <c:if test="${not empty VoteLearningForm.userEntry}">
-	<div class="media">
-		<div class="media-left">
+	<div class="d-flex">
+		<div class="flex-shrink-0">
 			<i class="fa fa-xs fa-check text-success"></i>
 		</div>
-		<div class="media-body">
+		<div class="flex-grow-1 ms-3">
 			<c:out value="${VoteLearningForm.userEntry}" escapeXml="true" />
 		</div>
 	</div>
Index: lams_tool_wiki/web/pages/learning/notebook.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_wiki/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_wiki/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -45,7 +45,7 @@
 				<div class="panel">
 					<lams:out value="${wikiDTO.reflectInstructions}" escapeHtml="true" />
 				</div>
-				<div class="form-group">
+				<div class="mb-3">
 					<textarea id="focused" rows="4" name="entryText" class="form-control">${learningForm.entryText}</textarea>
 		
 					<div class="activity-bottom-buttons">
Index: lams_tool_wiki/web/pages/learning/parts/finishButton.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_wiki/web/pages/learning/parts/finishButton.jsp	(.../finishButton.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_wiki/web/pages/learning/parts/finishButton.jsp	(.../finishButton.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -24,7 +24,7 @@
     <form:form action="openNotebook.do" method="get" id="learningForm" modelAttribute="learningForm">
       <form:hidden path="mode" value="${mode}" />	
       <form:hidden path="toolSessionID" id="toolSessionID"/>
-      <div class="panel panel-default voffset10">
+      <div class="panel panel-default mt-2">
         <div class="panel-heading">
           <h4 class="panel-title">
             <lams:out value="${wikiDTO.reflectInstructions}" escapeHtml="true"/>
Index: lams_tool_wiki/web/pages/learning/wiki.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_wiki/web/pages/learning/wiki.jsp	(.../wiki.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_wiki/web/pages/learning/wiki.jsp	(.../wiki.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -96,39 +96,39 @@
                 <div class="btn-group float-end">
                   <c:if test="${contentEditable}">
 
-                    <a href="javascript:refreshPage();" title="<fmt:message key='label.wiki.refresh.toolTip'/>" type="button" class="btn btn-xs btn-default"><i class="fa fa-xm fa-refresh"></i> <fmt:message key="label.wiki.refresh"/></a>
+                    <a href="javascript:refreshPage();" title="<fmt:message key='label.wiki.refresh.toolTip'/>" type="button" class="btn btn-sm btn-secondary"><i class="fa fa-xm fa-refresh"></i> <fmt:message key="label.wiki.refresh"/></a>
 
                     <c:if test="${editableFlag or addFlag}">
-                      <a href="javascript:changeDiv('view');" title="<fmt:message key='label.wiki.view.toolTip'/>" type="button" class="btn btn-xs btn-default"><i class="fa fa-xm fa-play"></i> <fmt:message key="label.wiki.view"/></a>
+                      <a href="javascript:changeDiv('view');" title="<fmt:message key='label.wiki.view.toolTip'/>" type="button" class="btn btn-sm btn-secondary"><i class="fa fa-xm fa-play"></i> <fmt:message key="label.wiki.view"/></a>
                     </c:if>
 
                     <c:if test="${editableFlag and not currentWikiPage.deleted}">
-                      <a href="javascript:changeDiv('edit');" title="<fmt:message key='label.wiki.edit.toolTip'/>" type="button" class="btn btn-xs btn-default"><i class="fa fa-xm fa-pencil"></i> <fmt:message key="label.wiki.edit"/></a>
+                      <a href="javascript:changeDiv('edit');" title="<fmt:message key='label.wiki.edit.toolTip'/>" type="button" class="btn btn-sm btn-secondary"><i class="fa fa-xm fa-pencil"></i> <fmt:message key="label.wiki.edit"/></a>
                     </c:if>
 
                     <c:if test="${addFlag}">
-                      <a href="javascript:cancelAdd();changeDiv('add');" title="<fmt:message key='label.wiki.add.toolTip'/>" type="button" class="btn btn-xs btn-default"><i class="fa fa-xm fa-plus"></i> 
+                      <a href="javascript:cancelAdd();changeDiv('add');" title="<fmt:message key='label.wiki.add.toolTip'/>" type="button" class="btn btn-sm btn-secondary"><i class="fa fa-xm fa-plus"></i> 
                         <fmt:message key="label.wiki.add"/></a>
                     </c:if>
 
                     <c:if test="${editableFlag}">
                       <a href="javascript:changeDiv('history');" title="<fmt:message key='label.wiki.history.toolTip'/>" 
-                         type="button" class="btn btn-xs btn-default"><i class="fa fa-xm fa-history"></i> 
+                         type="button" class="btn btn-sm btn-secondary"><i class="fa fa-xm fa-history"></i> 
                         <fmt:message key="label.wiki.history"/>
                       </a>
                     </c:if>
 
                     <c:if test="${currentWikiPage.title != mainWikiPage.title and not currentWikiPage.deleted}">
 
-                      <a type="button" class="btn btn-xs btn-default" href="javascript:doRemove('<fmt:message key="label.wiki.remove.mark.confirm"/>')"
+                      <a type="button" class="btn btn-sm btn-secondary" href="javascript:doRemove('<fmt:message key="label.wiki.remove.mark.confirm"/>')"
                          title="<fmt:message key="label.wiki.remove.mark.toolTip"/>"
                          ><i class="fa fa-xm fa-trash"></i> 
                         <fmt:message key="label.wiki.remove"></fmt:message>
                       </a>
                     </c:if>
                     <c:if test="${currentWikiPage.deleted and editableFlag}">
 
-                      <a type="button" class="btn btn-xs btn-default" href="javascript:submitWiki('restorePage')"
+                      <a type="button" class="btn btn-sm btn-secondary" href="javascript:submitWiki('restorePage')"
                          title="<fmt:message key="label.wiki.restore.toolTip"/>"
                          ><i class="fa fa-xm fa-backward"></i> 
                         <fmt:message key="label.wiki.restore"/>
@@ -222,8 +222,8 @@
                 <!-- end annoucements -->
 
                 <!-- Wiki main -->
-                <div class="row no-gutter">
-                  <div class="col-xs-12">
+                <div class="row g-0">
+                  <div class="col-12">
 
                     <div class="panel panel-default" id="view">
                       <div class="panel-heading">
@@ -239,7 +239,7 @@
                         </c:choose>
                         ${lastEditPortrait}
                         <h4 class="panel-title">${fn:escapeXml(currentWikiPage.title)}</h4> 
-                        <div class="voffset5" style="font-size: 12px">
+                        <div class="mt-2" style="font-size: 12px">
                           <fmt:message key="label.wiki.last.edit">
                             <fmt:param>${lastEditName}</fmt:param>
                             <fmt:param>
@@ -389,7 +389,7 @@
                       </tr>
                       <tr>
                         <td>
-                          <div class="voffset5 float-end">
+                          <div class="mt-2 float-end">
                             <a href="javascript:changeDiv('view');" class="btn btn-primary"><fmt:message key="button.cancel"/></a> 
                             <a href="javascript:doEditOrAdd('editPage');" class="btn btn-primary"><fmt:message key="label.wiki.savechanges"></fmt:message></a>
                           </div>
@@ -400,8 +400,8 @@
                 </div>
 
                 <div id="add" style="display: none;">
-                  <div class="row no-gutter">
-                    <div class="col-xs-12">
+                  <div class="row g-0">
+                    <div class="col-12">
 
                       <div class="panel panel-default" id="view">
                         <div class="panel-heading">
@@ -425,8 +425,8 @@
                                          contentFolderID="${contentFolderID}" toolbarSet="CustomWikiLearner">
                           </lams:CKEditor>
 
-                          <a href="javascript:doEditOrAdd('addPage');" class="btn btn-primary float-end voffset5"><fmt:message key="label.wiki.savechanges"></fmt:message></a> 
-                          <a href="javascript:cancelAdd();changeDiv('view');" class="btn btn-primary float-end voffset5 roffset5"><fmt:message key="button.cancel"></fmt:message></a>
+                          <a href="javascript:doEditOrAdd('addPage');" class="btn btn-primary float-end mt-2"><fmt:message key="label.wiki.savechanges"></fmt:message></a> 
+                          <a href="javascript:cancelAdd();changeDiv('view');" class="btn btn-primary float-end mt-2 me-2"><fmt:message key="button.cancel"></fmt:message></a>
 
                         </div>
                       </div>
Index: lams_tool_wiki/web/pages/wiki/compare.jsp
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_wiki/web/pages/wiki/compare.jsp	(.../compare.jsp)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_wiki/web/pages/wiki/compare.jsp	(.../compare.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -29,7 +29,7 @@
 			</div>
 			
 			<div id="saveCancelButtons" class="voffset10"> 
-				<a href="javascript:window.close()" class="btn btn-default"><fmt:message key="button.close" /></a>
+				<a href="javascript:window.close()" class="btn btn-secondary"><fmt:message key="button.close" /></a>
 			</div>
 
 		<div id="footer"></div>
Index: lams_tool_wiki/web/pages/wiki/viewWiki.jsp
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_wiki/web/pages/wiki/viewWiki.jsp	(.../viewWiki.jsp)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_wiki/web/pages/wiki/viewWiki.jsp	(.../viewWiki.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -33,7 +33,7 @@
 			</div>
 			
 			<div id="saveCancelButtons" class="voffset10"> 
-				<a href="javascript:window.close()" class="btn btn-default"><fmt:message key="button.close" /></a>
+				<a href="javascript:window.close()" class="btn btn-secondary"><fmt:message key="button.close" /></a>
 			</div>
 		
 		<div id="footer"></div>
Index: lams_tool_wiki/web/wikilink/wikilink.jsp
===================================================================
diff -u -r9cbba0026b9584b2e4bcba57f0d5a8510bdb5846 -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_wiki/web/wikilink/wikilink.jsp	(.../wikilink.jsp)	(revision 9cbba0026b9584b2e4bcba57f0d5a8510bdb5846)
+++ lams_tool_wiki/web/wikilink/wikilink.jsp	(.../wikilink.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -27,20 +27,20 @@
 			<tr>
 				<td><span id="existingLinkMenuLabel">&nbsp;</span></td>
 				<td></td>
-				<td><select name="existingWikiDropDownMenu"
-					id="existingWikiDropDownMenu">
-					<option value="noSelection">Please Select</option>
-					<script type="text/javascript">
-						<!--
-							var i;
-							for (i=0; i<wikiArray.length; ++i) 
-							{	
-								var wikiURL="javascript:changeWikiPage('" + wikiArray[i] + "')";
-								addOption(document.getElementById('existingWikiDropDownMenu'), prettyWikiLink(wikiArray[i]), wikiURL);
-							}
-						//-->		
-					</script>
-				</select>
+				<td>
+					<select name="existingWikiDropDownMenu" id="existingWikiDropDownMenu" class="form-select">
+						<option value="noSelection">Please Select</option>
+						<script type="text/javascript">
+							<!--
+								var i;
+								for (i=0; i<wikiArray.length; ++i) 
+								{	
+									var wikiURL="javascript:changeWikiPage('" + wikiArray[i] + "')";
+									addOption(document.getElementById('existingWikiDropDownMenu'), prettyWikiLink(wikiArray[i]), wikiURL);
+								}
+							//-->		
+						</script>
+					</select>
 				</td>
 			</tr>
 		</table>
Index: lams_tool_zoom/web/pages/learning/learning.jsp
===================================================================
diff -u -rfe19797ec82718905555353176ed719bec11043e -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_tool_zoom/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision fe19797ec82718905555353176ed719bec11043e)
+++ lams_tool_zoom/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -43,15 +43,15 @@
 				<p>
 					<fmt:message key="label.learning.conferenceNotAvailable" />
 				</p>
-				<a href="#" onclick="window.location.reload()" class="btn btn-default"><fmt:message key="label.refresh" /></a>
+				<a href="#" onclick="window.location.reload()" class="btn btn-secondary"><fmt:message key="label.refresh" /></a>
 			</c:when>
 			<c:otherwise>
 				<c:if test="${not empty meetingPassword}">
 					<h4><fmt:message key="label.meeting.password" />&nbsp;<code>${meetingPassword}</code></h4>
 				</c:if>
 				
 				<iframe id="zoomJoinFrame" style="width: 100%; height: 680px; border: none; display: none" src="${meetingURL}"></iframe>
-				<a id="zoomJoinButton" href="${meetingURL}" target="_blank" style="display: none" class="btn btn-default">
+				<a id="zoomJoinButton" href="${meetingURL}" target="_blank" style="display: none" class="btn btn-secondary">
 					<fmt:message key="button.enter" />
 				</a>
 
Index: lams_www/web/public/ckeditor-templates/bootsnippets.js
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rbc8213e12c4e5afddd0394ad66386ef3e70d1611
--- lams_www/web/public/ckeditor-templates/bootsnippets.js	(.../bootsnippets.js)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_www/web/public/ckeditor-templates/bootsnippets.js	(.../bootsnippets.js)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
@@ -253,7 +253,7 @@
 		css: '',
 		html: 
 		'<div class="container">' +
-		'	<div class="col-xs-12 col-sm-9 offset-sm-1">' +
+		'	<div class="col-12 col-sm-9 offset-sm-1">' +
 		'		<img class="img-fluid" style="margin: auto" src="/lams/www/public/ckeditor-templates/images/desk.jpg">' +
 		'		<div class="carousel-caption">' +
 		'			<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend, turpis non luctus tempor</h2>' +
@@ -483,10 +483,10 @@
 		html: 
 			'<div class="bootstrap-tabs" data-tab-set-title="Tab Set Title" style="background-color:#f8f8f8;border: 1px solid #e8e5e5;border-radius: 5px 5px 40px 10px;padding: 5px;">' +
 			'	<ul class="nav nav-tabs" role="tablist"><!-- add tabs here -->' +
-			'		<li role="presentation"><a aria-controls="title-tab-1" class="tab-link" data-toggle="tab" href="#title-tab-1" role="tab" target="_blank">Tab 1 Name</a></li>' +
-			'		<li role="presentation"><a aria-controls="title-tab-2" class="tab-link" data-toggle="tab" href="#title-tab-2" role="tab" target="_blank">Tab 2 Name</a></li>' +
-			'		<li role="presentation"><a aria-controls="title-tab-3" class="tab-link" data-toggle="tab" href="#title-tab-3" role="tab" target="_blank">Tab 3 Name</a></li>' +
-			'		<li class="active" role="presentation"><a aria-controls="title-tab-4" class="tab-link" data-toggle="tab" href="#title-tab-4" role="tab" target="_blank">Tab 4 Name</a></li>' +
+			'		<li role="presentation"><a aria-controls="title-tab-1" class="tab-link" data-bs-toggle="tab" href="#title-tab-1" role="tab" target="_blank">Tab 1 Name</a></li>' +
+			'		<li role="presentation"><a aria-controls="title-tab-2" class="tab-link" data-bs-toggle="tab" href="#title-tab-2" role="tab" target="_blank">Tab 2 Name</a></li>' +
+			'		<li role="presentation"><a aria-controls="title-tab-3" class="tab-link" data-bs-toggle="tab" href="#title-tab-3" role="tab" target="_blank">Tab 3 Name</a></li>' +
+			'		<li class="active" role="presentation"><a aria-controls="title-tab-4" class="tab-link" data-bs-toggle="tab" href="#title-tab-4" role="tab" target="_blank">Tab 4 Name</a></li>' +
 			'	</ul>' +
 		
 			'	<div class="tab-content"><!-- add tab panels here -->' +