Index: lams_tool_gmap/web/WEB-INF/tags/Alert.tag
===================================================================
diff -u
--- lams_tool_gmap/web/WEB-INF/tags/Alert.tag	(revision 0)
+++ lams_tool_gmap/web/WEB-INF/tags/Alert.tag	(revision e4a3e685c0a26e3f0a203410682cfaca4602f55a)
@@ -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_gmap/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r3299d560146318cb6f26ec2b234e3af70ec21eba -re4a3e685c0a26e3f0a203410682cfaca4602f55a
--- lams_tool_gmap/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 3299d560146318cb6f26ec2b234e3af70ec21eba)
+++ lams_tool_gmap/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision e4a3e685c0a26e3f0a203410682cfaca4602f55a)
@@ -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_gmap/web/WEB-INF/tags/Page.tag
===================================================================
diff -u
--- lams_tool_gmap/web/WEB-INF/tags/Page.tag	(revision 0)
+++ lams_tool_gmap/web/WEB-INF/tags/Page.tag	(revision e4a3e685c0a26e3f0a203410682cfaca4602f55a)
@@ -0,0 +1,36 @@
+<%@ 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="content">
+			<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_gmap/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r5e63656a12c02f7476564e278b43ff4ce86ac930 -re4a3e685c0a26e3f0a203410682cfaca4602f55a
--- lams_tool_gmap/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 5e63656a12c02f7476564e278b43ff4ce86ac930)
+++ lams_tool_gmap/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision e4a3e685c0a26e3f0a203410682cfaca4602f55a)
@@ -427,11 +427,19 @@
 	    <name>Date</name>
 		<path>/WEB-INF/tags/Date.tag</path>
    	</tag-file>  
-   	<tag-file>
+    	<tag-file>
 	    <name>DefineLater</name>
 		<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_gmap/web/common/mapLegend.jsp
===================================================================
diff -u -ra3bb7dc7925483a1db6eb3cb017f654cd85c1a4c -re4a3e685c0a26e3f0a203410682cfaca4602f55a
--- lams_tool_gmap/web/common/mapLegend.jsp	(.../mapLegend.jsp)	(revision a3bb7dc7925483a1db6eb3cb017f654cd85c1a4c)
+++ lams_tool_gmap/web/common/mapLegend.jsp	(.../mapLegend.jsp)	(revision e4a3e685c0a26e3f0a203410682cfaca4602f55a)
@@ -2,6 +2,29 @@
 <c:set var="tool">
 	<lams:WebAppURL />
 </c:set>
+
+<!--  remove the choose once all across to bootstrap - only picking up learner at the moment as only learner has been bootstrapped! -->
+<c:choose>
+<c:when test="${mode == 'learner'}">
+<!--  bootstrap version - keep -->
+<table>
+	<tr>
+		<td valign="middle"><fmt:message key="label.legend.unsaved" /></td>
+ 		<td><img src="${tool}/images/red_Marker.png"></img></td>
+ 		<td width="10px"></td>
+ 		<td valign="middle"><fmt:message key="label.legend.saved" /></td>
+		<td><img src="${tool}/images/blue_Marker.png"></img></td>
+		<td width="10px"></td>
+ 		<td valign="middle"><fmt:message key="label.legend.edited" /></td>
+ 		<td><img src="${tool}/images/paleblue_Marker.png"></img></td>
+ 		<td width="10px"></td>
+ 		<td valign="middle"><fmt:message key="label.legend.userSelected" /></td>
+ 		<td><img src="${tool}/images/yellow_Marker.png"></img></td>
+	</tr>
+</table>
+</c:when>
+<c:otherwise>
+<!--  old version - to go -->
 <html>
 <div   >
 <table style="border:WhiteSmoke 2px solid;">
@@ -22,3 +45,9 @@
 </div>
 
 </html>
+
+
+</c:otherwise>
+</c:choose>
+
+
Index: lams_tool_gmap/web/includes/jsp/mapFunctions.jsp
===================================================================
diff -u -rd9fea0d214dfaae43a89801f03bd4cc7d617fffa -re4a3e685c0a26e3f0a203410682cfaca4602f55a
--- lams_tool_gmap/web/includes/jsp/mapFunctions.jsp	(.../mapFunctions.jsp)	(revision d9fea0d214dfaae43a89801f03bd4cc7d617fffa)
+++ lams_tool_gmap/web/includes/jsp/mapFunctions.jsp	(.../mapFunctions.jsp)	(revision e4a3e685c0a26e3f0a203410682cfaca4602f55a)
@@ -231,8 +231,8 @@
 	var sideBarText = "";
 	var j;
 	var i;
-
-	sideBarText += "<nobr><h2>" + groupName + "</h2></nobr>";
+	
+ 	sideBarText += "<p>" + groupName + "</p>";
 	for (j=0;j<users.length; j++)
 	{
 		// leave open image if the user div was already open
@@ -259,7 +259,7 @@
 		}
 		sideBarText += "</div>";
 	}
-	document.getElementById("usersidebar").innerHTML = sideBarText;
+ 	document.getElementById("usersidebar").innerHTML = sideBarText;
 }
 
 // Cancels the edit and returns to the view window for the marker
Index: lams_tool_gmap/web/pages/learning/defineLater.jsp
===================================================================
diff -u -r3299d560146318cb6f26ec2b234e3af70ec21eba -re4a3e685c0a26e3f0a203410682cfaca4602f55a
--- lams_tool_gmap/web/pages/learning/defineLater.jsp	(.../defineLater.jsp)	(revision 3299d560146318cb6f26ec2b234e3af70ec21eba)
+++ lams_tool_gmap/web/pages/learning/defineLater.jsp	(.../defineLater.jsp)	(revision e4a3e685c0a26e3f0a203410682cfaca4602f55a)
@@ -1,11 +1,8 @@
 <%@ include file="/common/taglibs.jsp"%>
-
-<div id="content">
-	<h1>
-		<fmt:message key="activity.title" />
-	</h1>
+<c:set var="title"><fmt:message key="activity.title" /></c:set>
+<lams:Page type="learner" title="${title}">
 	<lams:DefineLater defineLaterMessageKey="message.defineLaterSet" />
-</div>
+</lams:Page>
+<div id="footer"></div>
 
 
-
Index: lams_tool_gmap/web/pages/learning/gmap.jsp
===================================================================
diff -u -rd9fea0d214dfaae43a89801f03bd4cc7d617fffa -re4a3e685c0a26e3f0a203410682cfaca4602f55a
--- lams_tool_gmap/web/pages/learning/gmap.jsp	(.../gmap.jsp)	(revision d9fea0d214dfaae43a89801f03bd4cc7d617fffa)
+++ lams_tool_gmap/web/pages/learning/gmap.jsp	(.../gmap.jsp)	(revision e4a3e685c0a26e3f0a203410682cfaca4602f55a)
@@ -18,50 +18,48 @@
 -->
 </script>
 
-<div id="content">
-	<h1>
-		<c:out value="${gmapDTO.title}" escapeXml="true"/>
-	</h1>
+<lams:Page type="learner" title="${gmapDTO.title}">
 
+	<div class="panel">
+		<c:out value="${gmapDTO.instructions}" escapeXml="false" />
+	</div>
+
+	<!-- map UI -->
+	<div class="panel">
+     
+		<%@ include file="../../common/mapLegend.jsp"%>
+
+		<div class="container-fluid">
+		<div class="row no-gutter">
+			<div class="col-sm-10">
+				<div id="map_canvas" style="height:400px"><fmt:message key="error.cantLoadMap"></fmt:message></div>
+			</div>
+			<div class="col-sm-2">
+				<div id="usersidebar"></div>		
+			</div>	
+		</div>
+		</div>
+				
+		<div class="btn-group-sm">
+			<c:if test="${contentEditable}">
+				<a href="javascript:addMarkerToCenter()" class="btn btn-default voffset5" role="button"/><fmt:message key="button.addMarker"/></a>
+			</c:if>
+			<a href="javascript:fitMapMarkers()" class="btn btn-default voffset5" role="button"/><fmt:message key="button.fitMarkers"/></a>
+			<a href="javascript:if(confirmLeavePage()){refreshPage();}" class="btn btn-default voffset5" role="button"/><fmt:message key="button.refresh"/></a>
+		</div>
 	
-	<p>
-		<c:out value="${gmapDTO.instructions}" escapeXml="false"/>
-	</p>
+		<div class="voffset5">
+			<input type="text" onkeypress="javascript:if (event.keyCode==13){showAddress();return false;}" size="55" name="address" id="address" value="${gmapDTO.defaultGeocoderAddress}" />
+			<a href="javascript:showAddress()" class="btn btn-default btn-xs" role="button"><span class="fa fa-search" aria-hidden="true"></span></a>
+		</div>
 
-	<br />
+	</div>
+	<!-- end map UI -->
 	
-	<table>
-		<tr>
-			<td>
-				<div id="map_legend" style="width:100%;" >
-					<iframe marginwidth="0" align="left" height="60px" width="100%" frameborder="0" src="${tool}/common/mapLegend.jsp"></iframe>
-				</div>
-				<div id="map_canvas" style="float: left; width:80%; height:400px"><fmt:message key="error.cantLoadMap"></fmt:message></div>
-				<div id="usersidebar" style="float: right; width:20%; overflow:auto; height:400px; background:WhiteSmoke; "></div>		
-			</td>
-		</tr>
-		<tr>
-			<td>	
-				<c:choose>
-					<c:when test="${contentEditable}">
-				<a href="javascript:addMarkerToCenter()" class="button"/><fmt:message key="button.addMarker"/></a>
-					</c:when>
-				</c:choose>
-				<a href="javascript:fitMapMarkers()" class="button"/><fmt:message key="button.fitMarkers"/></a>
-				<a href="javascript:if(confirmLeavePage()){refreshPage();}" class="button"/><fmt:message key="button.refresh"/></a>
-			</td>
-		</tr>
-	</table>
-	<p />
-	
-	<input type="text" onkeypress="javascript:if (event.keyCode==13){showAddress();return false;}" size="55" name="address" id="address" value="${gmapDTO.defaultGeocoderAddress}" />
-    			<a href="javascript:showAddress()" class="button"/><fmt:message key="button.go"/></a>
-	
-	
 	<c:if test="${mode == 'learner' || mode == 'author'}">
 		<%@ include file="parts/finishButton.jsp"%>
 	</c:if>
 	
-</div>
+</lams:Page>
 
 
Index: lams_tool_gmap/web/pages/learning/notebook.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -re4a3e685c0a26e3f0a203410682cfaca4602f55a
--- lams_tool_gmap/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_gmap/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision e4a3e685c0a26e3f0a203410682cfaca4602f55a)
@@ -24,12 +24,8 @@
 	
 	<body class="stripes">
 	
-			<div id="content">
+			<lams:Page type="learner" title="${gmapDTO.title}">
 			
-			<h1>
-				<c:out value="${gmapDTO.title}" escapeXml="true"/>
-			</h1>
-		
 			<html:form action="/learning" method="post">
 				<html:hidden property="toolSessionID" styleId="toolSessionID"/>
 				<html:hidden property="markersXML" />
@@ -44,9 +40,8 @@
 		
 				<div class="space-bottom-top align-right">
 					<html:hidden property="dispatch" value="submitReflection" />
-					<html:link href="#nogo" styleClass="button" styleId="finishButton" 
+					<html:link href="#nogo" styleClass="btn btn-primary voffset10 pull-right na" styleId="finishButton" 
 				          onclick="javascript:document.learningForm.submit();return false">
-						<span class="nextActivity">
 							<c:choose>
 			 					<c:when test="${activityPosition.last}">
 			 						<fmt:message key="button.submit" />
@@ -55,12 +50,11 @@
 			 		 				<fmt:message key="button.finish" />
 			 					</c:otherwise>
 				 			</c:choose>
-			 			</span>
 					</html:link>
 				</div>
 			</html:form>
 				
-			</div>
+			</lams:Page>
 			<div class="footer"></div>
 	</body>
 </lams:html>
Index: lams_tool_gmap/web/pages/learning/parts/finishButton.jsp
===================================================================
diff -u -rb88cfcacfc98572e23f6040a7a4ed4060b58a1fc -re4a3e685c0a26e3f0a203410682cfaca4602f55a
--- lams_tool_gmap/web/pages/learning/parts/finishButton.jsp	(.../finishButton.jsp)	(revision b88cfcacfc98572e23f6040a7a4ed4060b58a1fc)
+++ lams_tool_gmap/web/pages/learning/parts/finishButton.jsp	(.../finishButton.jsp)	(revision e4a3e685c0a26e3f0a203410682cfaca4602f55a)
@@ -15,29 +15,33 @@
 	<html:hidden property="mode" value="${mode}" />	
 	<html:hidden property="toolSessionID" styleId="toolSessionID"/>
 	<html:hidden property="markersXML" value="" />
-		<div class="space-top">
-			<h3><fmt:message key="heading.reflection" /></h3>
-			<p>
-				<strong><lams:out value="${gmapDTO.reflectInstructions}" escapeHtml="true"/></strong>
-			</p>
-
-			<p>
-				<c:choose>
-					<c:when test="${not empty gmapUserDTO.notebookEntry}">
-						<lams:out escapeHtml="true" value="${gmapUserDTO.notebookEntry}" />
-					</c:when>
-
-					<c:otherwise>
-						<em><fmt:message key="message.no.reflection.available" /> </em>
-					</c:otherwise>
-				</c:choose>
-			</p>
-
-			<html:submit styleClass="button" onclick="javascript:return confirmLeavePage();">
-				<fmt:message key="button.edit" />
-			</html:submit>
+	<div class="row no-gutter">
+		<div class="col-xs-12">
+			<div class="panel panel-default">
+				<div class="panel-heading panel-title">
+					<fmt:message key="heading.reflection" />
+				</div>
+				<div class="panel-body">
+					<div class="reflectionInstructions">
+						<lams:out value="${gmapDTO.reflectInstructions}" escapeHtml="true"/>
+					</div>
+					<div class="panel">
+						<c:choose>
+							<c:when test="${not empty gmapUserDTO.notebookEntry}">
+								<lams:out escapeHtml="true" value="${gmapUserDTO.notebookEntry}" />
+							</c:when>
+							<c:otherwise>
+								<em><fmt:message key="message.no.reflection.available" /> </em>
+							</c:otherwise>
+						</c:choose>
+					</div>
+					<html:submit styleClass="btn btn-default pull-left" onclick="javascript:return confirmLeavePage();">
+						<fmt:message key="button.edit" />
+					</html:submit>
+				</div>
+			</div>
 		</div>
-	
+	</div>	
 </html:form>
 </c:if>
 
@@ -47,28 +51,27 @@
 	<html:hidden property="markersXML" value="" styleId="markersXML" />
 	<html:hidden property="mode" value="${mode}" />	
 	<div class="space-bottom-top align-right">
-		<html:submit styleClass="button" styleId="saveButton" onclick="javascript:document.getElementById('dispatch').value = 'saveMarkers'; return serialiseMarkers();">
+	
+		<html:submit styleClass="btn btn-primary voffset10 pull-left" onclick="javascript:document.getElementById('dispatch').value = 'saveMarkers'; return serialiseMarkers();">
 			<fmt:message>button.save</fmt:message>
 		</html:submit>
 		<c:choose>
 			<c:when test="${!gmapUserDTO.finishedActivity and gmapDTO.reflectOnActivity}">
-				<html:submit styleClass="button" onclick="javascript:document.getElementById('dispatch').value = 'openNotebook'; return serialiseMarkers();">
+				<html:submit styleClass="btn btn-primary voffset10 pull-right" onclick="javascript:document.getElementById('dispatch').value = 'openNotebook'; return serialiseMarkers();">
 					<fmt:message key="button.continue" />
 				</html:submit>
 			</c:when>
 			<c:otherwise>
 				<html:hidden property="dispatch" value="finishActivity" />
-				<html:link href="#nogo" styleClass="button" styleId="finishButton" onclick="javascript:saveAndFinish();">
-					<span class="nextActivity">
-						<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>
-					</span>
+				<html:link href="#nogo" styleClass="btn btn-primary voffset10 pull-right na" styleId="finishButton" onclick="javascript:saveAndFinish();">
+					<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:link>
 			</c:otherwise>
 		</c:choose>