Bootstrap Snippet Timeline Stages using HTML CSS

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="timeline-v">
  <div class="timelinecontainer approved timeline-left">
    <div class="timelinecontent">
      <h3>Thomas</h3>
      <p class="date">20/05/2019</p>
      <p class="status">Approved</p>
    </div>
  </div>
  <div class="timelinecontainer approved timeline-right">
    <div class="timelinecontent">
      <h3>Adom</h3>
      <p>20/05/2019</p>
      <p>Approved</p>
    </div>
  </div>
  <div class="timelinecontainer pending timeline-left">
    <div class="timelinecontent">
      <h2>Alvin</h2>
      <p>20/05/2019</p>
      <p>Pending</p>
    </div>
  </div>
  <div class="timelinecontainer timeline-right">
    <div class="timelinecontent">
      <h2>Robert</h2>
      <p>20/05/2019</p>
      <p>TBD</p>
    </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
26
27
28
29
30
31
32
33
34
35
36
37
* {
  box-sizing: border-box;
}
body {
  background-color: #1885d0;
  font-family: Arial;
}
/* The actual timeline (the vertical ruler) */
.timeline-v {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
/* The actual timeline (the vertical ruler) */
.timeline-v::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}
/* Container around content */
.timeline-v .timelinecontainer {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
  
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Timeline Stages"
Bootstrap 4.1.1 Snippet by subhash4web

Related: See More

Questions / Comments:

"Timeline Stages" Bootstrap 4.1.1 Snippet by subhash4web

Related: See More

Questions / Comments:

"Timeline Stages"
Bootstrap 4.1.1 Snippet by subhash4web