Bootstrap Snippet Calendar Display Media Layout using HTML CSS

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="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="media d-flex align-items-center">
            <p class="calendar " >
                21<em>Juni</em>
            </p>
      <div class="media-body ">
        <h3>
            Why do we use it?
        </h3>
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
        </p>
      </div>
    </div>
    <div class="media d-flex align-items-center">
            <p class="calendar " >
                31<em>Desember</em>
            </p>
      <div class="media-body ">
        <h3>
            Where does it come from? - <small>NewYear 2019</small>
        </h3>
        <p>
            when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
        </p>
      </div>
    </div>
    <div class="media d-flex align-items-center">
            <p class="calendar " >
                30<em>Desember</em>
            </p>
      <div class="media-body ">
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 {
margin-top:18px
}
/*
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);
}
/*
calendar css
Ref: http://codepen.io/chelovekov/pen/ayKAn
*/
/*
Ref : Bootstrap 3.1.0 Snippet by mrmccormack
*/
.calendar {
margin:.25em 10px 10px 0;
padding-top:5px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Calendar Display Media Layout"
Bootstrap 4.1.1 Snippet by johndrova

Related: See More

Questions / Comments:

"Calendar Display Media Layout" Bootstrap 4.1.1 Snippet by johndrova

Related: See More

Questions / Comments:

"Calendar Display Media Layout"
Bootstrap 4.1.1 Snippet by johndrova