"Calendar Display Card Layout"
Bootstrap 3.1.0 Snippet by mrmccormack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
<!------ Include the above in your HEAD tag ---------->
<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><!--./col-md-->
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
background-color:#333;
margin-top:18px
}
.container {
padding:28px;
background-color:#fff
}
.list-group {
width:170px;
margin-left:12px
}
/*
for grey scale
http://codepen.io/beben-koben/pen/ckKzh
THIS NOT WORKING in Safari and Chrome
*/
.grayscale {
filter: url(#grayscale);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
/*Hover effects*/
.grayscale:hover {
filter: none;
-moz-filter: none;
-webkit-filter: none;
}
/*Default state for brightness has to be specified specifically*/
img.brightness:hover {
-webkit-filter: brightness(0);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: