"Timeline - dotted"
Bootstrap 3.0.3 Snippet by victoreduardo

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.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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">
<div class="timeline-centered">
<article class="timeline-entry">
<div class="timeline-entry-inner">
<time class="timeline-time" datetime="2014-01-10T03:45"><span>03:45 AM</span> <span>Today</span></time>
<div class="timeline-icon bg-success">
<i class="entypo-feather"></i>
</div>
<div class="timeline-label">
<h2><a href="#">Art Ramadani</a> <span>posted a status update</span></h2>
<p>Tolerably earnestly middleton extremely distrusts she boy now not. Add and offered prepare how cordial two promise. Greatly who affixed suppose but enquire compact prepare all put. Added forth chief trees but rooms think may.</p>
</div>
</div>
</article>
<article class="timeline-entry left-aligned">
<div class="timeline-entry-inner">
<time class="timeline-time" datetime="2014-01-10T03:45"><span>03:45 AM</span> <span>Today</span></time>
<div class="timeline-icon bg-secondary">
<i class="entypo-suitcase"></i>
</div>
<div class="timeline-label">
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
img
{
vertical-align: middle;
}
.img-responsive
{
display: block;
height: auto;
max-width: 100%;
}
.img-rounded
{
border-radius: 3px;
}
.img-thumbnail
{
background-color: #fff;
border: 1px solid #ededf0;
border-radius: 3px;
display: inline-block;
height: auto;
line-height: 1.428571429;
max-width: 100%;
moz-transition: all .2s ease-in-out;
o-transition: all .2s ease-in-out;
padding: 2px;
transition: all .2s ease-in-out;
webkit-transition: all .2s ease-in-out;
}
.img-circle
{
border-radius: 50%;
}
.timeline-centered {
position: relative;
margin-bottom: 30px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

pretty neat!

myskyhigh () - 9 years ago - Reply 0


Really nice looking timeline.

One could improve it by removing CSS duplications - example .timeline-centered:before, .timeline-centered:after.

You could also consider switching to the BEM methodology because the long CSS nesting is in my opinion inefficient. So instead of this: .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label you would have just this: .timeline__label

czerasz () - 10 years ago - Reply 0