"Bootstrap 4 Timeline"
Bootstrap 4.1.1 Snippet by kodakro

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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Poppins:400,500,600,700" rel="stylesheet">
<section class="experience pt-100 pb-100" id="experience">
<div class="container">
<div class="row">
<div class="col-xl-8 mx-auto text-center">
<div class="section-title">
<h4>bootstrap 4 timeline</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12">
<ul class="timeline-list">
<!-- Single Experience -->
<li>
<div class="timeline_content">
<span>2008</span>
<h4>Intern Developer span</h4>
<p>We gather your business and products information. We then determine the direction of the project and understand your goals and we combine your ideas with ours for an amazing website.</p>
</div>
</li>
<!-- Single Experience -->
<li>
<div class="timeline_content">
<span>2007-2012</span>
<h4>Junior Developer</h4>
<p>We gather your business and products information. We then determine the direction of the project and understand your goals and we combine your ideas with ours for an amazing website.</p>
</div>
</li>
<!-- Single Experience -->
<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
.pt-100{
padding-top:100px;
}
.pb-100{
padding-bottom:100px;
}
.section-title {
margin-bottom: 60px;
}
.section-title p {
color: #777;
font-size: 16px;
}
.section-title h4 {
text-transform: capitalize;
font-size: 40px;
position: relative;
padding-bottom: 20px;
margin-bottom: 20px;
font-weight: 600;
}
.section-title h4:before {
position: absolute;
content: "";
width: 60px;
height: 2px;
background-color: #ff3636;
bottom: 0;
left: 50%;
margin-left: -30px;
}
.section-title h4:after {
position: absolute;
background-color: #ff3636;
content: "";
width: 10px;
height: 10px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: