"Pricing table"
Bootstrap 4.1.1 Snippet by mylastof

<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>
.classes-img { width: 250px; height: 250px; margin: 0 auto; } .classes-img .price { bottom: 0; width: 80px; height: 80px; margin: 0 auto; } .classes-img .price span { vertical-align: middle; }

Related: See More


Questions / Comments: