Index: lams_admin/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u -r92aac4e72f24ed4acb100dd5365a6b79b8c9a0ec -r0c5215248a690e323d8f9f650aeaea5c452f42e4
--- lams_admin/web/WEB-INF/tags/Widget.tag	(.../Widget.tag)	(revision 92aac4e72f24ed4acb100dd5365a6b79b8c9a0ec)
+++ lams_admin/web/WEB-INF/tags/Widget.tag	(.../Widget.tag)	(revision 0c5215248a690e323d8f9f650aeaea5c452f42e4)
@@ -13,6 +13,7 @@
 <%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
 <%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
 <%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
 
 <%@ attribute name="icon" required="false" rtexprvalue="true"%>
 <%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
@@ -43,6 +44,10 @@
 	<c:set var="shadow">shadow-none</c:set>
 </c:if>
 
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
 <c:choose>
 	<c:when test="${type eq 'w1' }">
 
@@ -54,10 +59,20 @@
 	    <div class="col-8">
 	      <div class="card-body m-0">
 	        <div class="card-text ${titleAlignment}">${title}</div>
-	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
 	      </div>
 	      <c:if test="{not empty footerText}">
-	      <div class="card-footer">${footerText}</div>
+	      	<div class="card-footer">${footerText}</div>
 	      </c:if>
 	    </div>
 	  </div>
Index: lams_central/web/WEB-INF/tags/Alert.tag
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r0c5215248a690e323d8f9f650aeaea5c452f42e4
--- lams_central/web/WEB-INF/tags/Alert.tag	(.../Alert.tag)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_central/web/WEB-INF/tags/Alert.tag	(.../Alert.tag)	(revision 0c5215248a690e323d8f9f650aeaea5c452f42e4)
@@ -28,7 +28,7 @@
 </c:choose>
 
 <div class="row no-gutter">
-	<div class="col-xs-12 col-sm-offset-2 col-sm-8">
+	<div class="col-12 col-sm-offset-2 col-sm-8">
 		<div id="${idName}" class="alert alert-${alertType}" style="margin-bottom: 10px; padding: 8px">
 			<div class="media">
 				<div class="media-left">
Index: lams_central/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r0c5215248a690e323d8f9f650aeaea5c452f42e4
--- lams_central/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_central/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 0c5215248a690e323d8f9f650aeaea5c452f42e4)
@@ -51,14 +51,14 @@
 
 <div class="row no-gutter">
 	<div
-		class="col-xs-12 col-sm-offset-1 col-sm-10 col-lg-offset-2 col-lg-8">
+		class="col-12 col-sm-offset-1 col-sm-10 col-lg-offset-2 col-lg-8">
 		<div class="alert alert-info">
 			<fmt:message key="${defineLaterMessageKey}" />
 		</div>
 	</div>
 </div>
 <div class="row no-gutter">
-	<div class="col-xs-12">
+	<div class="col-12">
 		<a href="javascript:location.reload(true);"
 			class="btn btn-primary pull-right voffset5"><fmt:message
 				key="${buttonTryAgainKey}" /></a>
Index: lams_central/web/WEB-INF/tags/LeaderDisplay.tag
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r0c5215248a690e323d8f9f650aeaea5c452f42e4
--- lams_central/web/WEB-INF/tags/LeaderDisplay.tag	(.../LeaderDisplay.tag)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_central/web/WEB-INF/tags/LeaderDisplay.tag	(.../LeaderDisplay.tag)	(revision 0c5215248a690e323d8f9f650aeaea5c452f42e4)
@@ -17,7 +17,7 @@
 </c:if>
 
 <div class="row no-gutter">
-	<div class="col-xs-12 col-sm-offset-2 col-sm-8">
+	<div class="col-12 col-sm-offset-2 col-sm-8">
 		<div id="${idName}" class="alert alert-info leader-display">
 			<h4><fmt:message key="${messageKey}">
 				<fmt:param><c:out value="${username}" escapeXml="true"/></fmt:param>
Index: lams_central/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r1d57e77980d70c39242b61da2705eebab2f421af -r0c5215248a690e323d8f9f650aeaea5c452f42e4
--- lams_central/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 1d57e77980d70c39242b61da2705eebab2f421af)
+++ lams_central/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 0c5215248a690e323d8f9f650aeaea5c452f42e4)
@@ -25,7 +25,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" id="content">
 			<jsp:doBody />
 		</div>
@@ -367,14 +367,14 @@
 
 		<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}">
-					<div class="panel panel-default panel-${type}-page">
+					<div class="card panel-default card-${type}-page">
 						<c:if test="${not empty title}">
-							<div class="panel-heading">
-								<div class="panel-title panel-${type}-title">
+							<div class="card-header">
+								<div class="card-title card-${type}-title">
 									<c:out value="${title}" escapeXml="true" />
 									<c:if test="${not empty titleHelpURL}">
 										<span class="pull-right">${titleHelpURL}</span>
@@ -386,7 +386,7 @@
 							</div>
 						</c:if>
 						
-						<div class="panel-body panel-${type}-body">
+						<div class="card-body card-${type}-body">
 							<jsp:doBody />
 						</div>
 					</div>
@@ -409,15 +409,15 @@
 	<c:otherwise>
 	<!-- Standard Screens  --> 
 		<div class="row no-gutter no-margin">
-		<div class="col-xs-12">
+		<div class="col-12">
 		<div class="container" id="content">
 
 		<c:choose>
 		<c:when test="${usePanel}">
-		<div class="panel panel-default panel-${type}-page">
+		<div class="card panel-default card-${type}-page">
 			<c:if test="${not empty title}">
-				<div class="panel-heading">
-					<div class="panel-title panel-${type}-title">
+				<div class="card-header">
+					<div class="card-title card-${type}-title">
 						<c:out value="${title}" escapeXml="true" />
 						<c:if test="${not empty titleHelpURL}">
 							<span class="pull-right">${titleHelpURL}</span>
@@ -429,7 +429,7 @@
 				</div>
 			</c:if>
 			
-			<div class="panel-body panel-${type}-body">
+			<div class="card-body card-${type}-body">
 				<jsp:doBody />
 			</div>
 		</div>
Index: lams_central/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r8e742e0e9689c2f26674a1b43c225694b1a41280 -r0c5215248a690e323d8f9f650aeaea5c452f42e4
--- lams_central/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 8e742e0e9689c2f26674a1b43c225694b1a41280)
+++ lams_central/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0c5215248a690e323d8f9f650aeaea5c452f42e4)
@@ -183,11 +183,11 @@
 					</c:if>
 				
 					<div class="no-gutter">
-						<div class="col-xs-12 col-sm-11 ">
+						<div class="col-12 col-sm-11 ">
 							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control"
 									placeholder="<fmt:message key="label.comment.textarea.tip"/>"/>
 						</div>
-						<div class="button add-comment add-comment-new col-xs-12 col-sm-1" 
+						<div class="button add-comment add-comment-new col-12 col-sm-1" 
 								data-item-id="${itemRatingDto.itemId}" data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}">
 						</div>
 					</div>
Index: lams_central/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_central/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_central/web/WEB-INF/tags/Widget.tag	(revision 0c5215248a690e323d8f9f650aeaea5c452f42e4)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_central/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rae9912edeb82523d71d1e18df67ec5ee7e6301a8 -r0c5215248a690e323d8f9f650aeaea5c452f42e4
--- lams_central/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision ae9912edeb82523d71d1e18df67ec5ee7e6301a8)
+++ lams_central/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 0c5215248a690e323d8f9f650aeaea5c452f42e4)
@@ -347,7 +347,11 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file>
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   	  
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_monitoring/web/WEB-INF/tags/Alert.tag
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r0c5215248a690e323d8f9f650aeaea5c452f42e4
--- lams_monitoring/web/WEB-INF/tags/Alert.tag	(.../Alert.tag)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_monitoring/web/WEB-INF/tags/Alert.tag	(.../Alert.tag)	(revision 0c5215248a690e323d8f9f650aeaea5c452f42e4)
@@ -28,7 +28,7 @@
 </c:choose>
 
 <div class="row no-gutter">
-	<div class="col-xs-12 col-sm-offset-2 col-sm-8">
+	<div class="col-12 col-sm-offset-2 col-sm-8">
 		<div id="${idName}" class="alert alert-${alertType}" style="margin-bottom: 10px; padding: 8px">
 			<div class="media">
 				<div class="media-left">
Index: lams_monitoring/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r0c5215248a690e323d8f9f650aeaea5c452f42e4
--- lams_monitoring/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_monitoring/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 0c5215248a690e323d8f9f650aeaea5c452f42e4)
@@ -51,14 +51,14 @@
 
 <div class="row no-gutter">
 	<div
-		class="col-xs-12 col-sm-offset-1 col-sm-10 col-lg-offset-2 col-lg-8">
+		class="col-12 col-sm-offset-1 col-sm-10 col-lg-offset-2 col-lg-8">
 		<div class="alert alert-info">
 			<fmt:message key="${defineLaterMessageKey}" />
 		</div>
 	</div>
 </div>
 <div class="row no-gutter">
-	<div class="col-xs-12">
+	<div class="col-12">
 		<a href="javascript:location.reload(true);"
 			class="btn btn-primary pull-right voffset5"><fmt:message
 				key="${buttonTryAgainKey}" /></a>
Index: lams_monitoring/web/WEB-INF/tags/LeaderDisplay.tag
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r0c5215248a690e323d8f9f650aeaea5c452f42e4
--- lams_monitoring/web/WEB-INF/tags/LeaderDisplay.tag	(.../LeaderDisplay.tag)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_monitoring/web/WEB-INF/tags/LeaderDisplay.tag	(.../LeaderDisplay.tag)	(revision 0c5215248a690e323d8f9f650aeaea5c452f42e4)
@@ -17,7 +17,7 @@
 </c:if>
 
 <div class="row no-gutter">
-	<div class="col-xs-12 col-sm-offset-2 col-sm-8">
+	<div class="col-12 col-sm-offset-2 col-sm-8">
 		<div id="${idName}" class="alert alert-info leader-display">
 			<h4><fmt:message key="${messageKey}">
 				<fmt:param><c:out value="${username}" escapeXml="true"/></fmt:param>
Index: lams_monitoring/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r1d57e77980d70c39242b61da2705eebab2f421af -r0c5215248a690e323d8f9f650aeaea5c452f42e4
--- lams_monitoring/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 1d57e77980d70c39242b61da2705eebab2f421af)
+++ lams_monitoring/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 0c5215248a690e323d8f9f650aeaea5c452f42e4)
@@ -25,7 +25,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" id="content">
 			<jsp:doBody />
 		</div>
@@ -367,14 +367,14 @@
 
 		<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}">
-					<div class="panel panel-default panel-${type}-page">
+					<div class="card panel-default card-${type}-page">
 						<c:if test="${not empty title}">
-							<div class="panel-heading">
-								<div class="panel-title panel-${type}-title">
+							<div class="card-header">
+								<div class="card-title card-${type}-title">
 									<c:out value="${title}" escapeXml="true" />
 									<c:if test="${not empty titleHelpURL}">
 										<span class="pull-right">${titleHelpURL}</span>
@@ -386,7 +386,7 @@
 							</div>
 						</c:if>
 						
-						<div class="panel-body panel-${type}-body">
+						<div class="card-body card-${type}-body">
 							<jsp:doBody />
 						</div>
 					</div>
@@ -409,15 +409,15 @@
 	<c:otherwise>
 	<!-- Standard Screens  --> 
 		<div class="row no-gutter no-margin">
-		<div class="col-xs-12">
+		<div class="col-12">
 		<div class="container" id="content">
 
 		<c:choose>
 		<c:when test="${usePanel}">
-		<div class="panel panel-default panel-${type}-page">
+		<div class="card panel-default card-${type}-page">
 			<c:if test="${not empty title}">
-				<div class="panel-heading">
-					<div class="panel-title panel-${type}-title">
+				<div class="card-header">
+					<div class="card-title card-${type}-title">
 						<c:out value="${title}" escapeXml="true" />
 						<c:if test="${not empty titleHelpURL}">
 							<span class="pull-right">${titleHelpURL}</span>
@@ -429,7 +429,7 @@
 				</div>
 			</c:if>
 			
-			<div class="panel-body panel-${type}-body">
+			<div class="card-body card-${type}-body">
 				<jsp:doBody />
 			</div>
 		</div>
Index: lams_monitoring/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r8e742e0e9689c2f26674a1b43c225694b1a41280 -r0c5215248a690e323d8f9f650aeaea5c452f42e4
--- lams_monitoring/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 8e742e0e9689c2f26674a1b43c225694b1a41280)
+++ lams_monitoring/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0c5215248a690e323d8f9f650aeaea5c452f42e4)
@@ -183,11 +183,11 @@
 					</c:if>
 				
 					<div class="no-gutter">
-						<div class="col-xs-12 col-sm-11 ">
+						<div class="col-12 col-sm-11 ">
 							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control"
 									placeholder="<fmt:message key="label.comment.textarea.tip"/>"/>
 						</div>
-						<div class="button add-comment add-comment-new col-xs-12 col-sm-1" 
+						<div class="button add-comment add-comment-new col-12 col-sm-1" 
 								data-item-id="${itemRatingDto.itemId}" data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}">
 						</div>
 					</div>
Index: lams_monitoring/web/WEB-INF/tags/SimplePanel.tag
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r0c5215248a690e323d8f9f650aeaea5c452f42e4
--- lams_monitoring/web/WEB-INF/tags/SimplePanel.tag	(.../SimplePanel.tag)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_monitoring/web/WEB-INF/tags/SimplePanel.tag	(.../SimplePanel.tag)	(revision 0c5215248a690e323d8f9f650aeaea5c452f42e4)
@@ -11,18 +11,18 @@
 	<c:set var="title"><fmt:message key="${titleKey}" /></c:set>
 </c:if>
 
-<div class="panel panel-default">
+<div class="card">
 	<c:if test="${not empty title or not empty titleHelpURL}">
-	<div class="panel-heading">
-		<div class="panel-title">
+	<div class="card-header">
+		<div class="card-title">
 		<c:out value="${title}" escapeXml="true" />
 		<c:if test="${not empty titleHelpURL}">
 			<a style="float: right" href="${titleHelpURL}" target="_new"><span class="help" style="margin: 0px"></span></a>
 		</c:if>
 		</div>
 	</div>
 	</c:if>
-	<div class="panel-body ${panelBodyClass}">
+	<div class="card-body ${panelBodyClass}">
 		<jsp:doBody />
 	</div>
 </div>
Index: lams_monitoring/web/WEB-INF/tags/TabBodyArea.tag
===================================================================
diff -u -re962cd60c6fc58a68e93516844801045ed956870 -r0c5215248a690e323d8f9f650aeaea5c452f42e4
--- lams_monitoring/web/WEB-INF/tags/TabBodyArea.tag	(.../TabBodyArea.tag)	(revision e962cd60c6fc58a68e93516844801045ed956870)
+++ lams_monitoring/web/WEB-INF/tags/TabBodyArea.tag	(.../TabBodyArea.tag)	(revision 0c5215248a690e323d8f9f650aeaea5c452f42e4)
@@ -31,7 +31,7 @@
 %>
 <%@ taglib uri="tags-core" prefix="c"%>
 
-<div class="panel-body panel-monitor-body">
+<div class="card-body card-monitor-body">
 	 <jsp:doBody />
 </div>
 
Index: lams_monitoring/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_monitoring/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_monitoring/web/WEB-INF/tags/Widget.tag	(revision 0c5215248a690e323d8f9f650aeaea5c452f42e4)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_monitoring/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r24ebb6c91f49a10f1e5718036b3a3c1a80c3314f -r0c5215248a690e323d8f9f650aeaea5c452f42e4
--- lams_monitoring/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 24ebb6c91f49a10f1e5718036b3a3c1a80c3314f)
+++ lams_monitoring/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 0c5215248a690e323d8f9f650aeaea5c452f42e4)
@@ -347,7 +347,11 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file>
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   	  
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>