<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Butter Cake v4.0.0 - Starter Kit</title>
<!-- FONT AWESOME 4.7.0 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- BUTTER CAKE CSS 4.0.0 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/buttercake@4.0.0/dist/css/butterCake.min.css">
</head>
<body>
<div class="container py-5">
<ol class="bc-timeline">
<li>
<span class="line bg-primary"></span>
<span class="floater">2019</span>
<h4>Title 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, placeat.
</p>
</li>
<li>
<span class="line bg-secondary"></span>
<span class="floater bg-secondary">2018</span>
<h4>Title 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, placeat.
</p>
</li>
<li>
<span class="line bg-success"></span>
<span class="floater bg-success">2017</span>
<h4>Title 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, placeat.
</p>
</li>
<li>
<span class="line bg-info"></span>
<span class="floater bg-info">2016</span>
<h4>Title 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, placeat.
</p>
</li>
<li>
<span class="line bg-warning"></span>
<span class="floater bg-warning">2015</span>
<h4>Title 5</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, placeat.
</p>
</li>
</ol>
</div>
<style>
.bc-timeline {
list-style-type: none;
}
.bc-timeline li {
position: relative;
margin: 0;
padding-bottom: 1em;
padding-left: 50px;
}
.bc-timeline li .line {
content: ' ';
background-color: var(--primary);
position: absolute;
bottom: 0;
top: 0;
left: 6px;
width: 3px;
}
.bc-timeline li .floater {
content: attr(data-date);
background-color: var(--primary);
position: absolute;
left: 0;
top: 10px;
border-radius: 4px;
height: auto;
width: auto;
color: white;
font-size: 12px;
padding: 2px 4px;
font-weight: 600;
}
</style>
<!-- JQUERY 3.3.1 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- BUTTER CAKE JS 4.0.0 -->
<script src="https://cdn.jsdelivr.net/npm/buttercake@4.0.0/dist/js/butterCake.min.js"></script>
</body>
</html>