<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="container">
<div class="row mt-5">
<div class="col-md-8 offset-md-2 text-center">
<h2>Our <span class="font-weight-light">Pricing</span></h2>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name</p>
</div>
</div>
<div class="row mt-5 mb-5">
<div class="col-md-4 text-center">
<div class="classes">
<div class="classes-img position-relative d-block rounded-circle" style="background-image: url(https://dummyimage.com/250x250/000/fff&text=img-1);">
<p class="price text-center d-table position-absolute rounded-circle bg-primary text-white"><span class="d-table-cell">$25.00<br><small>/month</small></span></p>
</div>
<div class="desc mt-3">
<h3 class="font-weight-light h3"><a href="#">Football</a></h3>
<p>Pointing has no control about the blind texts it is an almost unorthographic life</p>
<p><a href="https://www.totoprayogo.com/#" target="_blank" class="btn btn-outline-primary">Learn More</a></p>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<div class="classes">
<div class="classes-img position-relative d-block rounded-circle" style="background-image: url(https://dummyimage.com/250x250/000/fff&text=img-2);">
<p class="price text-center d-table position-absolute rounded-circle bg-primary text-white"><span class="d-table-cell">$25.00<br><small>/month</small></span></p>
</div>
<div class="desc mt-3">
<h3 class="font-weight-light h3"><a href="#">Cycling</a></h3>
<p>Pointing has no control about the blind texts it is an almost unorthographic life</p>
<p><a href="https://www.totoprayogo.com/#" target="_blank" class="btn btn-outline-primary">Learn More</a></p>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<div class="classes">
<div class="classes-img position-relative d-block rounded-circle" style="background-image: url(https://dummyimage.com/250x250/000/fff&text=img-3);">
<p class="price text-center d-table position-absolute rounded-circle bg-primary text-white"><span class="d-table-cell">$25.00<br><small>/month</small></span></p>
</div>
<div class="desc mt-3">
<h3 class="font-weight-light h3"><a href="#">Fitness Gym & Cardio</a></h3>
<p>Pointing has no control about the blind texts it is an almost unorthographic life</p>
<p><a href="https://www.totoprayogo.com/#" target="_blank" class="btn btn-outline-primary">Learn More</a></p>
</div>
</div>
</div>
</div>
</div>
