xxxxxxxxxx1
<div class="container my-5">2
3
<!-- Section: Introduction -->4
<section class="">5
6
<p>Free examples of Bootstrap Bootstrap timeline vertical. </p>7
8
<p>9
Detailed documentation and more examples you can find in our10
<a href="https://mdbootstrap.com/docs/standard/extended/timeline/" target="_blank"><strong>Timeline Docs</strong></a>.11
</p>12
13
<hr class="mt-5">14
15
<p>Built with <a target="_blank" href="https://mdbootstrap.com/docs/standard/">Material Design for Bootstrap</a> - free and powerful Bootstrap UI KIT</p>16
17
<a class="btn btn-primary me-2" href="https://mdbootstrap.com/docs/standard/getting-started/installation/" target="_blank" role="button">Download MDB UI KIT <i class="fas fa-download ms-2"></i></a>18
<a class="btn btn-danger me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/" role="button">Learn more</a>19
<a class="btn btn-success me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/getting-started/" role="button">Tutorials</a>20
<a class="btn btn-dark me-2" target="_blank" href="https://github.com/mdbootstrap/mdb-ui-kit" role="button">GitHub <i class="fab fa-github ms-2"></i></a>21
22
<hr class="mb-5"/>23
24
</section>25
<!-- Section: Introduction -->26
27
<!-- Section: Basic example -->28
<section class="">29
30
<p><strong>Basic example</strong></p>31
32
<section style="background-color: #F0F2F5;">33
<div class="container py-5">34
<div class="main-timeline">35
<div class="timeline left">36
<div class="card">37
<div class="card-body p-4">38
<h3>2017</h3>39
<p class="mb-0">Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>40
</div>41
</div>42
</div>43
<div class="timeline right">44
<div class="card">45
<div class="card-body p-4">46
<h3>2016</h3>47
<p class="mb-0">Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>48
</div>49
</div>50
</div>51
<div class="timeline left">52
<div class="card">53
<div class="card-body p-4">54
<h3>2015</h3>55
<p class="mb-0">Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>56
</div>57
</div>58
</div>59
<div class="timeline right">60
<div class="card">61
<div class="card-body p-4">62
<h3>2012</h3>63
<p class="mb-0">Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>64
</div>65
</div>66
</div>67
<div class="timeline left">68
<div class="card">69
<div class="card-body p-4">70
<h3>2011</h3>71
<p class="mb-0">Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>72
</div>73
</div>74
</div>75
<div class="timeline right">76
<div class="card">77
<div class="card-body p-4">78
<h3>2007</h3>79
<p class="mb-0">Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>80
</div>81
</div>82
</div>83
</div>84
</div>85
</section>86
87
</section>88
<!-- Section: Basic example -->89
</div>xxxxxxxxxx1
/* The actual timeline (the vertical ruler) */2
.main-timeline {3
position: relative;4
}5
6
/* The actual timeline (the vertical ruler) */7
.main-timeline::after {8
content: '';9
position: absolute;10
width: 6px;11
background-color: #939597;12
top: 0;13
bottom: 0;14
left: 50%;15
margin-left: -3px;16
}17
18
/* Container around content */19
.timeline {20
position: relative;21
background-color: inherit;22
width: 50%;23
}24
25
/* The circles on the timeline */26
.timeline::after {27
content: '';28
position: absolute;29
width: 25px;30
height: 25px;31
right: -13px;32
background-color: #939597;33
border: 5px solid #F5DF4D;34
top: 15px;35
border-radius: 50%;36
z-index: 1;37
}38
39
/* Place the container to the left */40
.left {41
padding: 0px 40px 20px 0px;42
left: 0;43
}44
45
/* Place the container to the right */46
.right {47
padding: 0px 0px 20px 40px;48
left: 50%;49
}50
51
/* Add arrows to the left container (pointing right) */52
.left::before {53
content: " ";54
position: absolute;55
top: 18px;56
z-index: 1;57
right: 30px;58
border: medium solid white;59
border-width: 10px 0 10px 10px;60
border-color: transparent transparent transparent white;61
}62
63
/* Add arrows to the right container (pointing left) */64
.right::before {65
content: " ";66
position: absolute;67
top: 18px;68
z-index: 1;69
left: 30px;70
border: medium solid white;71
border-width: 10px 10px 10px 0;72
border-color: transparent white transparent transparent;73
}74
75
/* Fix the circle for containers on the right side */76
.right::after {77
left: -12px;78
}79
80
/* Media queries - Responsive timeline on screens less than 600px wide */81
@media screen and (max-width: 600px) {82
/* Place the timelime to the left */83
.main-timeline::after {84
left: 31px;85
}86
87
/* Full-width containers */88
.timeline {89
width: 100%;90
padding-left: 70px;91
padding-right: 25px;92
}93
94
/* Make sure that all arrows are pointing leftwards */95
.timeline::before {96
left: 60px;97
border: medium solid white;98
border-width: 10px 10px 10px 0;99
border-color: transparent white transparent transparent;100
}101
102
/* Make sure all circles are at the same spot */103
.left::after, .right::after {104
left: 18px;105
}106
107
.left::before {108
right: auto;109
}110
111
/* Make all right containers behave like the left ones */112
.right {113
left: 0%;114
}115
}1
1
Console errors: 0