"Timeline"
Bootstrap 3.3.0 Snippet by irinashuvalova

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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 ---------->
<div class="container">
<div class="row">
<div class="timeline">
<span class="period">06'2010</span>
<span class="period">07'2011</span>
<span class="period">05'2012</span>
<span class="period period-active">08'2013</span>
<span class="period">12'2013</span>
<span class="period">06'2014</span>
</div>
</div>
</div>
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
.timeline {
margin-top: 40px;
background-color: #425c7f;
width: 600px;
height: 18px;
border-radius: 10px;
color: #fff;
font-size: 0;
}
.period {
border-radius: 10px;
width: 16.66%;
margin-top: 0;
box-sizing: border-box;
display: inline-block;
height: 18px;
font-size: 14px;
text-align: center;
cursor: pointer;
}
.period-active {
background-color: #afb4ba;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
$(function() {
$('.timeline').on('click', '.period', function() {
$('.period').removeClass('period-active');
$(this).addClass('period-active');
})
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Login and Register Modal
Simple Vertical timeline
Zigzag Timeline Layout
Two column timeline - not responsive

Questions / Comments: