Index: lams_tool_bbb/web/WEB-INF/tags/Alert.tag
===================================================================
diff -u
--- lams_tool_bbb/web/WEB-INF/tags/Alert.tag	(revision 0)
+++ lams_tool_bbb/web/WEB-INF/tags/Alert.tag	(revision e1bda7fc7b70b802055368c37f8148d9b87a475b)
@@ -0,0 +1,46 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="close" required="false" rtexprvalue="true"%>
+<%@ attribute name="id" required="false" rtexprvalue="true"%>
+<%@ attribute name="type" required="false" rtexprvalue="true"%>
+
+<c:set var="idName" value="alert-${type}" />
+<c:if test="${not empty id}">
+	<c:set var="idName" value="${id}" />
+</c:if>
+
+<c:set var="alertType" value="info" />
+<c:set var="iconType" value="info-circle" />
+<c:choose>
+	<c:when test="${type == 'danger'}">
+		<c:set var="alertType" value="danger" />
+		<c:set var="iconType" value="times-circle" />
+	</c:when>
+	<c:when test="${type == 'success'}">
+		<c:set var="alertType" value="success" />
+		<c:set var="iconType" value="check-circle" />
+	</c:when>
+	<c:when test="${type == 'warning'}">
+		<c:set var="alertType" value="warning" />
+		<c:set var="iconType" value="exclamation-circle" />
+	</c:when>
+</c:choose>
+
+<div class="row no-gutter">
+	<div class="col-xs-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">
+					<i class="fa fa-lg fa-${iconType} text-muted"></i>
+				</div>
+				<div class="media-body">
+					<c:if test="${close}">
+							<a href="#" class="close pull-right" data-dismiss="alert" aria-label="close">&times;</a>
+					</c:if>
+					<jsp:doBody />
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
Index: lams_tool_bbb/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -rdf5534fd49894e3369fc98f8273d9e2fefbb4817 -re1bda7fc7b70b802055368c37f8148d9b87a475b
--- lams_tool_bbb/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision df5534fd49894e3369fc98f8273d9e2fefbb4817)
+++ lams_tool_bbb/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision e1bda7fc7b70b802055368c37f8148d9b87a475b)
@@ -1,6 +1,6 @@
 
 <%
-	 /****************************************************************
+	/****************************************************************
 	 * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
 	 * =============================================================
 	 * License Information: http://lamsfoundation.org/licensing/lams/2.0/
@@ -49,10 +49,18 @@
 	<c:set var="buttonTryAgainKey" value="button.try.again" />
 </c:if>
 
-<p>
-	<fmt:message key="${defineLaterMessageKey}" />
-</p>
-<div align="right" class="space-bottom-top">
-	<a href="javascript:location.reload(true);" class="button"><fmt:message
-			key="${buttonTryAgainKey}" /> </a>
+<div class="row no-gutter">
+	<div
+		class="col-xs-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">
+		<a href="javascript:location.reload(true);"
+			class="btn btn-primary pull-right voffset5"><fmt:message
+				key="${buttonTryAgainKey}" /></a>
+	</div>
+</div>
\ No newline at end of file
Index: lams_tool_bbb/web/WEB-INF/tags/Page.tag
===================================================================
diff -u
--- lams_tool_bbb/web/WEB-INF/tags/Page.tag	(revision 0)
+++ lams_tool_bbb/web/WEB-INF/tags/Page.tag	(revision e1bda7fc7b70b802055368c37f8148d9b87a475b)
@@ -0,0 +1,34 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+
+<div class="row no-gutter">
+	<div class="col-xs-12">
+		<div class="container" id="${idName}">
+			<div class="panel panel-default panel-${type}-page">
+				<div class="panel-heading">
+					<c:if test="${not empty title}">
+						<div class="panel-title panel-${type}-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>
+					</c:if>
+					<c:if test="${not empty headingContent}">
+						<c:out value="${headingContent}" escapeXml="true" />
+					</c:if>
+				</div>
+				<div class="panel-body panel-${type}-body">
+					<jsp:doBody />
+				</div>
+			</div>
+		</div>
+		<! -- End content container -->
+	</div>
+</div>
Index: lams_tool_bbb/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r5e63656a12c02f7476564e278b43ff4ce86ac930 -re1bda7fc7b70b802055368c37f8148d9b87a475b
--- lams_tool_bbb/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 5e63656a12c02f7476564e278b43ff4ce86ac930)
+++ lams_tool_bbb/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision e1bda7fc7b70b802055368c37f8148d9b87a475b)
@@ -432,6 +432,14 @@
 		<path>/WEB-INF/tags/DefineLater.tag</path>
    	</tag-file>  
    	<tag-file>
+	    <name>Alert</name>
+		<path>/WEB-INF/tags/Alert.tag</path>
+   	</tag-file>  
+   	<tag-file>
+	    <name>Page</name>
+		<path>/WEB-INF/tags/Page.tag</path>
+   	</tag-file>  
+   	<tag-file>
 	    <name>ImgButtonWrapper</name>
 		<path>/WEB-INF/tags/ImgButtonWrapper.tag</path>
    	</tag-file>
Index: lams_tool_bbb/web/common/simpleHeader.jsp
===================================================================
diff -u -r74b71c544bb3970571e885fd2e56fb22c9880f19 -re1bda7fc7b70b802055368c37f8148d9b87a475b
--- lams_tool_bbb/web/common/simpleHeader.jsp	(.../simpleHeader.jsp)	(revision 74b71c544bb3970571e885fd2e56fb22c9880f19)
+++ lams_tool_bbb/web/common/simpleHeader.jsp	(.../simpleHeader.jsp)	(revision e1bda7fc7b70b802055368c37f8148d9b87a475b)
@@ -16,5 +16,6 @@
 	
 	<%-- TODO is this the best place to import these scripts ?	--%>
 	<script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
-	
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
 </lams:head>
Index: lams_tool_bbb/web/pages/learning/defineLater.jsp
===================================================================
diff -u -rdf5534fd49894e3369fc98f8273d9e2fefbb4817 -re1bda7fc7b70b802055368c37f8148d9b87a475b
--- lams_tool_bbb/web/pages/learning/defineLater.jsp	(.../defineLater.jsp)	(revision df5534fd49894e3369fc98f8273d9e2fefbb4817)
+++ lams_tool_bbb/web/pages/learning/defineLater.jsp	(.../defineLater.jsp)	(revision e1bda7fc7b70b802055368c37f8148d9b87a475b)
@@ -1,11 +1,11 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<div id="content">
-	<h1>
-		<fmt:message key="activity.title" />
-	</h1>
+<c:set var="title" scope="request">
+	<fmt:message key="activity.title" />
+</c:set>
+<lams:Page type="learner" title="${title}">
 	<lams:DefineLater defineLaterMessageKey="message.defineLaterSet" />
-</div>
+</lams:Page>
 
 
 
Index: lams_tool_bbb/web/pages/learning/learning.jsp
===================================================================
diff -u -r33c642c7896741b77af6bf3cd92d1322c7978e71 -re1bda7fc7b70b802055368c37f8148d9b87a475b
--- lams_tool_bbb/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 33c642c7896741b77af6bf3cd92d1322c7978e71)
+++ lams_tool_bbb/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision e1bda7fc7b70b802055368c37f8148d9b87a475b)
@@ -9,26 +9,26 @@
 	}
 
 	function validateForm() {
-	
+
 		// Validates that there's input from the user. 
-		
+
 		// disables the Finish button to avoid double submittion 
 		disableFinishButton();
 
- 		if (mode == "learner") {
+		if (mode == "learner") {
 			// if this is learner mode, then we add this validation see (LDEV-1319)
-		
+
 			if (document.learningForm.entryText.value == "") {
-				
+
 				// if the input is blank, then we further inquire to make sure it is correct
-				if (confirm("<fmt:message>message.learner.blank.input</fmt:message>"))  {
+				if (confirm("<fmt:message>message.learner.blank.input</fmt:message>")) {
 					// if correct, submit form
 					return true;
 				} else {
 					// otherwise, focus on the text area
 					document.learningForm.entryText.focus();
 					document.getElementById("finishButton").disabled = false;
-					return false;      
+					return false;
 				}
 			} else {
 				// there was something on the form, so submit the form
@@ -37,51 +37,56 @@
 		}
 	}
 
--->
+	-->
 </script>
 
-<div id="content">
-	<h1>
-		<c:out value="${contentDTO.title}" escapeXml="true"/>
-	</h1>
+<lams:Page type="learner" title="${contentDTO.title}">
+	<div class="panel">
+		<c:out value="${contentDTO.instructions}" escapeXml="false" />
+	</div>
 
-	<p>
-		<c:out value="${contentDTO.instructions}" escapeXml="false"/>
-	</p>
-
 	<c:if test="${contentDTO.lockOnFinish and mode == 'learner'}">
-		<div class="info">
+		<lams:Alert id="lockWhenFinished" type="info" close="true">
 			<c:choose>
-				<c:when test="${finishedActivity}">
+				<c:when test="${userDTO.finishedActivity}">
 					<fmt:message key="message.activityLocked" />
 				</c:when>
 				<c:otherwise>
 					<fmt:message key="message.warnLockOnFinish" />
 				</c:otherwise>
 			</c:choose>
-		</div>
+		</lams:Alert>
 	</c:if>
 
-	<p>
-		<c:choose>
-			<c:when test="${meetingOpen}">
-				<html:link href="${meetingURL}" target="bbbLearner${toolSessionID}" onclick="window.open('${meetingURL}', 'bbbLearner${toolSessionID}', 'resizable=yes,scrollbars=yes')">
-					<fmt:message key="label.learning.joinConference" />
-				</html:link>
-			</c:when>
-			<c:otherwise>
-				<p>
-					<fmt:message key="label.learning.conferenceNotAvailable" />
-				</p>
-				<html:link href="#" onclick="window.location.reload()">
-					<fmt:message key="label.refresh" />
-				</html:link>
-			</c:otherwise>
-		</c:choose>
-	</p>
+	<c:set var="allowAccess" value="true" />
+	<c:if test="${contentDTO.lockOnFinish && userDTO.finishedActivity && mode == 'learner'}">
+		<c:set var="allowAccess" value="false" />
+	</c:if>
 
+	<div class="buttons">
+			<c:choose>
+				<c:when test="${meetingOpen && allowAccess}">
+					<html:link styleClass="btn btn-success" href="${meetingURL}" target="bbbLearner${toolSessionID}"
+						onclick="window.open('${meetingURL}', 'bbbLearner${toolSessionID}', 'resizable=yes,scrollbars=yes')">
+						<fmt:message key="label.learning.joinConference" />
+					</html:link>
+				</c:when>
+				<c:otherwise>
+					<p>
+						<fmt:message key="label.learning.conferenceNotAvailable" />
+					</p>
+					<html:link styleClass="btn btn-sm btn-default" href="#" onclick="window.location.reload()">
+						<fmt:message key="label.refresh" />
+					</html:link>
+				</c:otherwise>
+			</c:choose>
+
+	</div>
+
+	<hr class="msg-hr">
+
 	<c:if test="${mode == 'learner' || mode == 'author'}">
 		<%@ include file="parts/finishButton.jsp"%>
 	</c:if>
 
-</div>
+</lams:Page>
Index: lams_tool_bbb/web/pages/learning/notebook.jsp
===================================================================
diff -u -rae140d55bbff1eca3b1dd866483dfb84e0313030 -re1bda7fc7b70b802055368c37f8148d9b87a475b
--- lams_tool_bbb/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision ae140d55bbff1eca3b1dd866483dfb84e0313030)
+++ lams_tool_bbb/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision e1bda7fc7b70b802055368c37f8148d9b87a475b)
@@ -6,35 +6,36 @@
 	}
 </script>
 
-<div id="content">
-	<h1>
-		<c:out value="${contentDTO.title}" escapeXml="true"/>
-	</h1>
+<lams:Page type="learner" title="${contentDTO.title}">
 
-	<html:form action="/learning" method="post"
-		onsubmit="disableFinishButton();">
+	<html:form action="/learning" method="post" onsubmit="disableFinishButton();">
 
-		<p class="small-space-top">
-			<lams:out value="${contentDTO.reflectInstructions}" escapeHtml="true"/>
-		</p>
+		<div class="panel">
+			<lams:out value="${contentDTO.reflectInstructions}" escapeHtml="true" />
+		</div>
 
-		<html:textarea cols="60" rows="8" property="entryText"
-			styleClass="text-area"></html:textarea>
+		<html:textarea styleId="focused" rows="5" property="entryText" styleClass="form-control"></html:textarea>
 
-		<div class="space-bottom-top align-right">
-			<html:hidden property="dispatch" value="submitReflection" />
-			<html:hidden property="toolSessionID" />
-			<html:submit styleClass="button" styleId="finishButton">
-			    <c:choose>
- 					<c:when test="${activityPosition.last}">
- 						<fmt:message key="button.submit" />
- 					</c:when>
- 					<c:otherwise>
- 		 				<fmt:message key="button.finish" />
- 					</c:otherwise>
-	 			</c:choose>
-			</html:submit>
-		</div>
+		<html:hidden property="dispatch" value="submitReflection" />
+		<html:hidden property="toolSessionID" />
+		<html:submit styleClass="btn btn-primary pull-right voffset10 na" styleId="finishButton">
+			<c:choose>
+				<c:when test="${activityPosition.last}">
+					<fmt:message key="button.submit" />
+				</c:when>
+				<c:otherwise>
+					<fmt:message key="button.finish" />
+				</c:otherwise>
+			</c:choose>
+		</html:submit>
+
 	</html:form>
-</div>
+	
+	<script type="text/javascript">
+		window.onload = function() {
+			document.getElementById("focused").focus();
+		}
+	</script>
 
+</lams:Page>
+
Index: lams_tool_bbb/web/pages/learning/parts/finishButton.jsp
===================================================================
diff -u -r8aded0b18a5a7712622ae56f38923fa297449977 -re1bda7fc7b70b802055368c37f8148d9b87a475b
--- lams_tool_bbb/web/pages/learning/parts/finishButton.jsp	(.../finishButton.jsp)	(revision 8aded0b18a5a7712622ae56f38923fa297449977)
+++ lams_tool_bbb/web/pages/learning/parts/finishButton.jsp	(.../finishButton.jsp)	(revision e1bda7fc7b70b802055368c37f8148d9b87a475b)
@@ -9,62 +9,67 @@
 	}
 </script>
 
+<c:set var="notebookEntry" scope="request">
+	<fmt:message key="label.notebookEntry" />
+</c:set>
+
 <html:form action="/learning" method="post">
 	<html:hidden property="toolSessionID" value="${toolSessionID}" />
 	<html:hidden property="dispatch" value="openNotebook" />
 
-	<c:if
-		test="${userDTO.finishedActivity and contentDTO.reflectOnActivity}">
+	<c:if test="${userDTO.finishedActivity and contentDTO.reflectOnActivity}">
 
-		<div class="space-top">
-			<h2>
-				${contentDTO.reflectInstructions}
-			</h2>
+		<div class="panel panel-default">
+			<div class="panel-heading panel-title">${notebookEntry}</div>
+			<div class="panel-body">
+				<div class="panel">
+					<c:out value="${contentDTO.reflectInstructions}" escapeXml="true" />
+				</div>
 
-			<p>
 				<c:choose>
 					<c:when test="${userDTO.notebookEntryDTO != null}">
-						<lams:out escapeHtml="true"
-							value="${userDTO.notebookEntryDTO.entry}" />
+						<div class="panel-body bg-warning">
+							<lams:out escapeHtml="true" value="${userDTO.notebookEntryDTO.entry}" />
+						</div>
 					</c:when>
 
 					<c:otherwise>
-						<em><fmt:message key="message.no.reflection.available" /> </em>
+						<fmt:message key="message.no.reflection.available" />
 					</c:otherwise>
 				</c:choose>
-			</p>
+				</p>
 
-			<html:submit styleClass="button">
-				<fmt:message key="button.edit" />
-			</html:submit>
+				<html:submit styleClass="btn btn-sm btn-default">
+					<fmt:message key="button.edit" />
+				</html:submit>
+
+			</div>
 		</div>
 	</c:if>
 </html:form>
 
-<html:form action="/learning" method="post"
-	onsubmit="disableFinishButton();">
+<html:form action="/learning" method="post" onsubmit="disableFinishButton();">
 	<html:hidden property="toolSessionID" value="${toolSessionID}" />
-	<div class="space-bottom-top align-right">
+	<div class="pull-right voffset10">
 		<c:choose>
-			<c:when
-				test="${!userDTO.finishedActivity and contentDTO.reflectOnActivity}">
+			<c:when test="${!userDTO.finishedActivity and contentDTO.reflectOnActivity}">
 				<html:hidden property="dispatch" value="openNotebook" />
 
-				<html:submit styleClass="button">
+				<html:submit styleClass="btn btn-primary">
 					<fmt:message key="button.continue" />
 				</html:submit>
 			</c:when>
 			<c:otherwise>
 				<html:hidden property="dispatch" value="finishActivity" />
-				<html:submit styleClass="button" styleId="finishButton">
-				    <c:choose>
-	 					<c:when test="${activityPosition.last}">
-	 						<fmt:message key="button.submit" />
-	 					</c:when>
-	 					<c:otherwise>
-	 		 				<fmt:message key="button.finish" />
-	 					</c:otherwise>
-		 			</c:choose>
+				<html:submit styleClass="btn btn-primary na" styleId="finishButton">
+					<c:choose>
+						<c:when test="${activityPosition.last}">
+							<fmt:message key="button.submit" />
+						</c:when>
+						<c:otherwise>
+							<fmt:message key="button.finish" />
+						</c:otherwise>
+					</c:choose>
 				</html:submit>
 			</c:otherwise>
 		</c:choose>