Index: lams_monitoring/web/monitor-sequence-tab.jsp
===================================================================
diff -u -r8b539226552978ff77efe129fff621ec8b660f59 -r0566214ac49eed87e266c749887a82c1bacb7f4f
--- lams_monitoring/web/monitor-sequence-tab.jsp	(.../monitor-sequence-tab.jsp)	(revision 8b539226552978ff77efe129fff621ec8b660f59)
+++ lams_monitoring/web/monitor-sequence-tab.jsp	(.../monitor-sequence-tab.jsp)	(revision 0566214ac49eed87e266c749887a82c1bacb7f4f)
@@ -1,74 +1,94 @@
 <!DOCTYPE html>
 <%@ include file="/taglibs.jsp"%>
 
-<div id="canvas-container" class="svg-learner-draggable-area ms-5 text-start monitoring-panel">
-	<div id="sequenceTopButtonsContainer" class="topButtonsContainer">
-		<a id="liveEditButton" class="btn btn-sm btn-default" style="display:none" title="<fmt:message key='button.live.edit.tooltip'/>"
-	       href="#" onClick="javascript:openLiveEdit()">
-			<i class="fa fa-pencil"></i> <span class="hidden-xs"><fmt:message key='button.live.edit'/></span>
-		</a>
-		<!-- 
-			<a id="canvasFitScreenButton" class="btn btn-sm btn-default" title="<fmt:message key='button.canvas.fit.screen.tooltip'/>"
-		       href="#" onClick="javascript:canvasFitScreen(true)">
-				<i class="fa fa-arrows-alt"></i> <span class="hidden-xs"><fmt:message key='button.canvas.fit.screen'/></span>
-			</a>
-			<a id="canvasOriginalSizeButton" class="btn btn-sm btn-default" title="<fmt:message key='button.canvas.original.size.tooltip'/>"
-		       href="#" onClick="javascript:canvasFitScreen(false)">
-				<i class="fa fa-arrow-circle-o-up"></i> <span class="hidden-xs"><fmt:message key='button.canvas.original.size'/></span>
-			</a>
-		 -->
-	</div>
-	<div id="sequenceCanvas"></div>
-	<div id="completedLearnersContainer" class="mt-2" title="<fmt:message key='force.complete.end.lesson.tooltip' />">
-		<img id="completedLessonLearnersIcon" src="<lams:LAMSURL/>images/completed.svg" />
-	</div>
-	<img id="sequenceCanvasLoading"
-	     src="<lams:LAMSURL/>images/ajax-loader-big.gif" />
-	<img id="sequenceSearchedLearnerHighlighter"
-	     src="<lams:LAMSURL/>images/pedag_down_arrow.gif" />
-	<!--
-	<img src="<lams:LAMSURL/>images/components/user-map.png" alt="#" />
-	<div class="map-pn">
-		<span><img src="<lams:LAMSURL/>images/components/plus.svg" alt="#" /></span>
-		<span><img src="<lams:LAMSURL/>images/components/minus.svg" alt="#" /></span>
-	</div>
-	-->
-</div>
+<div class="container-fluid">
+	<div class="row">
+		<div class="col mb-5">
+			<div id="canvas-container" class="svg-learner-draggable-area ms-5 text-start monitoring-panel">
+				<div id="sequenceTopButtonsContainer" class="topButtonsContainer">
+					<a id="liveEditButton" class="btn btn-sm btn-default" style="display:none" title="<fmt:message key='button.live.edit.tooltip'/>"
+				       href="#" onClick="javascript:openLiveEdit()">
+						<i class="fa fa-pencil"></i> <span class="hidden-xs"><fmt:message key='button.live.edit'/></span>
+					</a>
+					<!-- 
+						<a id="canvasFitScreenButton" class="btn btn-sm btn-default" title="<fmt:message key='button.canvas.fit.screen.tooltip'/>"
+					       href="#" onClick="javascript:canvasFitScreen(true)">
+							<i class="fa fa-arrows-alt"></i> <span class="hidden-xs"><fmt:message key='button.canvas.fit.screen'/></span>
+						</a>
+						<a id="canvasOriginalSizeButton" class="btn btn-sm btn-default" title="<fmt:message key='button.canvas.original.size.tooltip'/>"
+					       href="#" onClick="javascript:canvasFitScreen(false)">
+							<i class="fa fa-arrow-circle-o-up"></i> <span class="hidden-xs"><fmt:message key='button.canvas.original.size'/></span>
+						</a>
+					 -->
+				</div>
+				<div id="sequenceCanvas"></div>
+				<div id="completedLearnersContainer" class="mt-2" title="<fmt:message key='force.complete.end.lesson.tooltip' />">
+					<img id="completedLessonLearnersIcon" src="<lams:LAMSURL/>images/completed.svg" />
+				</div>
+				<img id="sequenceCanvasLoading"
+				     src="<lams:LAMSURL/>images/ajax-loader-big.gif" />
+				<img id="sequenceSearchedLearnerHighlighter"
+				     src="<lams:LAMSURL/>images/pedag_down_arrow.gif" />
+				<!--
+				<img src="<lams:LAMSURL/>images/components/user-map.png" alt="#" />
+				<div class="map-pn">
+					<span><img src="<lams:LAMSURL/>images/components/plus.svg" alt="#" /></span>
+					<span><img src="<lams:LAMSURL/>images/components/minus.svg" alt="#" /></span>
+				</div>
+				-->
+			</div>
+		</div>
+		<div class="col">
+			<div class="row">
+				<div class="col mb-5">
+					<div id="completion-chart-panel" class="monitoring-panel">
+						<h6><fmt:message key="lesson.chart.title"/></h6>
+						<div id="chartDiv" class="panel-body"></div>
+						<!--
+						<div class="graph-con">
+							<canvas id="myChart" class="chartjs-render-monitor"></canvas>
+						</div>
+						<ul>
+							<li>
+								<h6>completion</h6>
+							</li>
+							<li>
+								<span class="graph-count"></span> - Not started
+							</li>
+							<li>
+								<span class="graph-count"></span> - In process
+							</li>
+							<li>
+								<span class="graph-count"></span> - Completed
+							</li>
+						</ul>
+						-->
+					</div>
+				</div>
+				<div class="col mb-5">
+					<div id="required-tasks" class="monitoring-panel">
+						<h6><fmt:message key="lesson.required.tasks"/></h6>
+						<div id="required-tasks-content"></div>
+					</div>
+				</div>
+				<div class="col mb-5">
+					<div id="insights" class="monitoring-panel">
+						<h6>insights</h6>
+						<div class="insight-col-content">
+							<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem</p>
+							<p><a href="#">read more...</a></p>
+						</div>
+					</div>
+				</div>
+			</div>
 
-<div class="monitoring-layout-element">
-	<div id="completion-chart-panel" class="monitoring-panel">
-		<h6><fmt:message key="lesson.chart.title"/></h6>
-		<div id="chartDiv" class="panel-body"></div>
-		<!--
-		<div class="graph-con">
-			<canvas id="myChart" class="chartjs-render-monitor"></canvas>
 		</div>
-		<ul>
-			<li>
-				<h6>completion</h6>
-			</li>
-			<li>
-				<span class="graph-count"></span> - Not started
-			</li>
-			<li>
-				<span class="graph-count"></span> - In process
-			</li>
-			<li>
-				<span class="graph-count"></span> - Completed
-			</li>
-		</ul>
-		-->
 	</div>
 </div>
-	
+
+
+<!-- 
 <div class="monitoring-layout-element">
-	<div id="required-tasks" class="monitoring-panel">
-		<h6><fmt:message key="lesson.required.tasks"/></h6>
-		<div id="required-tasks-content"></div>
-	</div>
-</div>	
-		
-<div class="monitoring-layout-element">
 	<div class="graph-grades">
 		<div class="graph-star-col">
 			<img src="<lams:LAMSURL/>images/components/star.png" alt="#" />
@@ -123,13 +143,4 @@
 		</div>
 	</div>
 </div>
-
-<div class="monitoring-layout-element">
-	<div class="monitoring-panel insight-col">
-		<h6>insights</h6>
-		<div class="insight-col-content">
-			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem</p>
-			<p><a href="#">read more...</a></p>
-		</div>
-	</div>
-</div>	
\ No newline at end of file
+-->
\ No newline at end of file
