<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
<div class="row">
<h2>
Mr. M.'s Calendar Event Layout
</h2>
<p>
<a href="http://bootsnipp.com/iframe/4Ga2" target="_blank">View Full Screen </a> <i>(Req'd to test on mobile device)</i>
</p>
<div class="col-md-1">
<br>
<p class="calendar">
15<em>March</em>
</p>
</div>
<div class="col-md-6">
<h3>
Annual Meeting 2014 - <small>Old Boston City Hall</small>
</h3>
<p>
Sample of date display with sample layout. Note image changes color on mouse over and is responsive.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque ultricies libero, in lacinia lacus mattis eget. Donec in libero quis ligula dictum lobortis. Donec hendrerit, enim ut pulvinar dapibus, tortor dui blandit nunc, non varius lorem mi at augue. Nam dictum tellus porta metus laoreet, fermentum facilisis nunc suscipit. Phasellus pharetra nibh at tortor congue porttitor.
</p>
<h4>
Hidden Agenda
</h4>
<ul class="list-group text-center">
<li class="list-group-item">Introductions</li>