"BS4 timeline"
Bootstrap 4.1.1 Snippet by mylastof

Post to Facebook Tweet this

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="">
<div class="container">
<h2 class="pb-3 pt-2 border-bottom mb-5">Vertical Left-Right Timeline</h2>
<!--first section-->
<div class="row align-items-center how-it-works d-flex">
<div class="col-2 text-center bottom d-inline-flex justify-content-center align-items-center">
<div class="circle font-weight-bold">1</div>
</div>
<div class="col-6">
<h5>Fully Responsive</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.</p>
</div>
</div>
<!--path between 1-2-->
<div class="row timeline">
<div class="col-2">
<div class="corner top-right"></div>
</div>
<div class="col-8">
<hr/>
</div>
<div class="col-2">
<div class="corner left-bottom"></div>
</div>
</div>
<!--second section-->
<div class="row align-items-center justify-content-end how-it-works d-flex">
<div class="col-6 text-right">
<h5>Using Bootstrap</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.</p>
</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
26
27
28
29
30
31
32
33
34
35
36
37
.circle {
padding: 13px 20px;
border-radius: 50%;
background-color: #ED8D8D;
color: #fff;
max-height: 50px;
z-index: 2;
}
.how-it-works.row .col-2 {
align-self: stretch;
}
.how-it-works.row .col-2::after {
content: "";
position: absolute;
border-left: 3px solid #ED8D8D;
z-index: 1;
}
.how-it-works.row .col-2.bottom::after {
height: 50%;
left: 50%;
top: 50%;
}
.how-it-works.row .col-2.full::after {
height: 100%;
left: calc(50% - 3px);
}
.how-it-works.row .col-2.top::after {
height: 50%;
left: 50%;
top: 0;
}
.timeline div {
padding: 0;
height: 40px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard React
Simple Vertical timeline
Zigzag Timeline Layout
Two column timeline - not responsive

Questions / Comments:

Please suggest code for adding fourth section

SameerRiaz () - 4 years ago - Reply 0

Is there a fix for IE 11? screenshot http://fightpompe.com/bootsnip.png

juanbkm () - 5 years ago - Reply 0

Hi,

the 4th timeline is not working for me?!

It looks like this:

https://i.epvpimg.com/Uam7aab.png

bennymeier () - 6 years ago - Reply 0

new version, please check : https://bootsnipp.com/user/snippets/35EXB

mylastof () - 5 years ago - Reply 0

You're talking about left, uneven timelines 3-5-7, aren't you? See my answer to follow-up.

palatin8 () - 6 years ago - Reply 0

.timeline .right-bottom {

left: calc(50% - 3px);

top: calc(50% - 3px);

}

hi try this. it work for me

achalakavinda () - 6 years ago - Reply 0

Doesn't that shift the offset to the next section?

I prefer to have a new rule in timeline.css for full vertical lines in uneven sections:

.how-it-works.row .col-2.full-left::after {

height: 100%;

left: 50%;

}

instead of

.how-it-works.row .col-2.full::after {

height: 100%;

left: calc(50% - 3px);

}

Usage:

<div class="col-2 text-center full-left d-inline-flex justify-content-center align-items-center">

Works for me unto section seven, which has an .how-it-works.row .col-2.top::after

palatin8 () - 6 years ago - Reply 0