Examples of slim-line calendars coded with the Twitter Bootstrap framework. These would be ideal to use in website sidebars, where space is often limited. The calendars are responsive and reflow to fit smaller screens, like mobile.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Example 1 -->
<h5>Twitter Bootstrap list group with badges and events set as links</h5>
<div class="list-group">
<a href="http://example.com" class="list-group-item">Event One<span class="badge">22 Sep 2016</span></a>
<a href="http://example.com" class="list-group-item">Event Two<span class="badge">16 Oct 2016</span></a>
<a href="http://example.com" class="list-group-item">Event Three<span class="badge">03 Nov 2016</span></a>
<a href="http://example.com" class="list-group-item">Event Four<span class="badge">06 Dec 2016</span></a>
<a href="http://example.com" class="list-group-item">Event Five<span class="badge">14 Jan 2017</span></a>
<a href="http://example.com" class="list-group-item">Event Six<span class="badge">04 Feb 2017</span></a>
<a href="http://example.com" class="list-group-item">Event Seven<span class="badge">03 Mar 2017</span></a>
</div>
<!-- Example 2 -->
<h5>Twitter Bootstrap list group with sub headings and varying lengths of event descriptions</h5>
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">22 September 2016</h4>
<p class="list-group-item-text">Details about the event go here.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">9 November 2016</h4>
<p class="list-group-item-text">Team building. Because every team needs building.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">10 November 2016</h4>
<p class="list-group-item-text">Another event goes here in this space like this.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">25 December 2016</h4>
<p class="list-group-item-text">We open our presents, if we've been good. This year Christmas is on a Sunday. The day before is Christmas Eve. The following day is Boxing Day.</p>
</a>
<a href="#" class="list-group-item">
<h4...
CSS
/* Styles just for the demo */
h5 {
text-align: center;
margin: 20px;
}
.list-group {
max-width: 300px;
margin: 30px auto;
}
Please Whitelist JSFiddle in your content blocker.
Help keep JSFiddle free for always by one of two ways:
Whitelist JSFiddle in your content blocker (two clicks)
Go PRO and get access to additional PRO features →
Join the 4+ million users, and keep the JSFiddle dream alive.
Ad-free
All ads in the editor and listing pages are turned completely off.
Fiddle Pages
Your fiddles accessible under a custom domain and a vanity path - the simplest hosting for your personal project.
Use pre-released features
You get to try and use features (like the Palette Color Generator) months before everyone else.
Fiddle collections
Sort and categorize your Fiddles into multiple collections.
Private collections and fiddles
You can make as many Private Fiddles, and Private Collections as you wish!
Get Fiddle Pages with PRO
Your fiddles accessible under a custom domain and a vanity path - the simplest hosting for your personal project.