<!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>
<h4>Title 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, placeat.
</p>
</li>
<li>
<h4>Title 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, placeat.
</p>
</li>
<li>
<h4>Title 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, placeat.
</p>
</li>
<li>
<h4>Title 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, placeat.
</p>
</li>
<li>
<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: 25px;
}
.bc-timeline li:before {
content: '';
background-color: var(--primary);
position: absolute;
bottom: 0;
top: 0;
left: 6px;
width: 3px;
}
.bc-timeline li:after {
content: '';
background-color: var(--primary);
position: absolute;
left: 0;
top: 10px;
border-radius: 50%;
height: 15px;
width: 15px;
}
</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>