"Vertical Timeline"
Bootstrap 3.3.0 Snippet by Deepakbisht

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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="container">
<header class="clearfix">
<h1>Vertical Timeline</h1>
</header>
<div class="main">
<ul class="cbp_tmtimeline">
<li>
<time class="cbp_tmtime" datetime="2017-01-10 18:30"><span>1/1/17</span> <span>18:30</span></time>
<div class="cbp_tmicon cbp_tmicon-phone"><img src="http://lanyon.com/Images/Icon-Images/Lanyon_Mobile_icon_Core_Features.aspx" class="img-responsive" width="40px"></div>
<div class="cbp_tmlabel">
<h2>Ricebean black-eyed pea</h2>
<p>Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea sprouts wattle seed rutabaga okra yarrow cress avocado grape radish bush tomato ricebean black-eyed pea maize eggplant. Cabbage lentil cucumber chickpea sorrel gram garbanzo plantain lotus root bok choy squash cress potato summer purslane salsify fennel horseradish dulse. Winter purslane garbanzo artichoke broccoli lentil corn okra silver beet celery quandong. Plantain salad beetroot bunya nuts black-eyed pea collard greens radish water spinach gourd chicory prairie turnip avocado sierra leone bologi.</p>
</div>
</li>
<li>
<time class="cbp_tmtime" datetime="2017-01-11T12:01"><span>1/1/17</span> <span>12:01</span></time>
<div class="cbp_tmicon cbp_tmicon-screen"><img src="http://lanyon.com/Images/Icon-Images/Lanyon_Mobile_icon_Core_Features.aspx" class="img-responsive" width="40px"></div>
<div class="cbp_tmlabel">
<h2>Greens radish arugula</h2>
<p>Caulie dandelion maize lentil collard greens radish arugula sweet pepper water spinach kombu courgette lettuce. Celery coriander bitterleaf epazote radicchio shallot winter purslane collard greens spring onion squash lentil. Artichoke salad bamboo shoot black-eyed pea brussels sprout garlic kohlrabi.</p>
</div>
</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
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
@font-face {
font-family: 'ecoico';
src:url('../fonts/timelineicons/ecoico.eot');
src:url('../fonts/timelineicons/ecoico.eot?#iefix') format('embedded-opentype'),
url('../fonts/timelineicons/ecoico.woff') format('woff'),
url('../fonts/timelineicons/ecoico.ttf') format('truetype'),
url('../fonts/timelineicons/ecoico.svg#ecoico') format('svg');
font-weight: normal;
font-style: normal;
} /* Made with http://icomoon.io/ */
.cbp_tmtimeline {
margin: 30px 0 0 0;
padding: 0;
list-style: none;
position: relative;
}
/* The line */
.cbp_tmtimeline:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 10px;
background:#FFF;
left: 20%;
margin-left: -10px;
}
/* The date/time */
.cbp_tmtimeline > li .cbp_tmtime {
display: block;
width: 25%;
padding-right: 100px;
position: absolute;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: