<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
<h2>Agenda</h2>
<p class="lead">
This agenda viewer will let you see multiple events cleanly!
</p>
<div class="alert alert-warning">
<h4>Mobile Support</h4>
<p>In order to get the lines between cells looking their best without any JavaScript, I had to use tables for this design. While this could be done in ".row", doing so will cause issues when displaying the vertical borders between cells, which is a compromise I wasn't willing to make this time.'</p>
</div>
<hr />
<div class="agenda">
<div class="table-responsive">
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Event</th>
</tr>
</thead>
<tbody>
<tr>
<td class="agenda-date" class="active" rowspan="1">
<div class="dayofmonth">26</div>
<div class="dayofweek">Saturday</div>
<div class="shortdate text-muted">July, 2014</div>
</td>
