Bootstrap Responsive Pricing Table Free Download

Bootstrap Responsive Pricing Table EcXamples
Bootstrap Responsive Pricing Table EcXamples

Hello Friends today in this article I will provides you the complete Responsive Bootstrap Pricing Table Free Download, Here you can see the live preview of Bootstrap Pricing Table

 <div class="container">
	<div class="row">
		
		
<div class="col-lg-3 col-md-6 col-12">
   <div class="single-table wow fadeInUp" data-wow-delay=".2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
<div class="table-head">
   <h4 class="title">Basic</h4>
   <div class="price">
     <h2 class="amount">$45<span class="duration">/ Monthly</span></h2>
   </div>
</div>
<ul class="table-list">
<li>Routine Checkup</li>
<li>24Th Assisance</li>
<li>100 Text & Treatments</li>
<li>Regular Health Checkups</li>
</ul>


<div class="button text-center">
<a class="btn btn-success" href="javascript:void(0)">Make Payment</a>
</div>

</div>
</div>
		
<div class="col-lg-3 col-md-6 col-12">
   <div class="single-table wow fadeInUp" data-wow-delay=".2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
<div class="table-head">
   <h4 class="title">Basic</h4>
   <div class="price">
     <h2 class="amount">$45<span class="duration">/ Monthly</span></h2>
   </div>
</div>
<ul class="table-list">
<li>Routine Checkup</li>
<li>24Th Assisance</li>
<li>100 Text & Treatments</li>
<li>Regular Health Checkups</li>
</ul>


<div class="button text-center">
<a class="btn btn-success" href="javascript:void(0)">Make Payment</a>
</div>

</div>
</div>
		
<div class="col-lg-3 col-md-6 col-12">
   <div class="single-table wow fadeInUp" data-wow-delay=".2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
<div class="table-head">
   <h4 class="title">Basic</h4>
   <div class="price">
     <h2 class="amount">$45<span class="duration">/ Monthly</span></h2>
   </div>
</div>
<ul class="table-list">
<li>Routine Checkup</li>
<li>24Th Assisance</li>
<li>100 Text & Treatments</li>
<li>Regular Health Checkups</li>
</ul>


<div class="button text-center">
<a class="btn btn-success" href="javascript:void(0)">Make Payment</a>
</div>

</div>
</div>
		
		<div class="col-lg-3 col-md-6 col-12">
   <div class="single-table wow fadeInUp" data-wow-delay=".2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
<div class="table-head">
   <h4 class="title">Basic</h4>
   <div class="price">
     <h2 class="amount">$45<span class="duration">/ Monthly</span></h2>
   </div>
</div>
<ul class="table-list">
<li>Routine Checkup</li>
<li>24Th Assisance</li>
<li>100 Text & Treatments</li>
<li>Regular Health Checkups</li>
</ul>


<div class="button text-center">
<a class="btn btn-success" href="javascript:void(0)">Make Payment</a>
</div>

</div>
</div>
		

   </div>
</div>
body
{
	margin: 0px;
	padding: 0px;
	font-family: 'Roboto Slab', serif;
	font-size: 18px;
}


.single-table
{
	width: 100%;
	height: auto;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(217,217,217,1);
-moz-box-shadow: 0px 0px 5px 0px rgba(217,217,217,1);
box-shadow: 0px 0px 5px 0px rgba(217,217,217,1);
	padding: 20px;
}

.table-head .title
{
	font-size: 20px;
	background: #e5580c;
	text-align: center;
	height: 35px;
	font-weight: bold;
	line-height: 35px;
	color: #fff;
	border-radius: 50px;
	font-family: 'Roboto Slab', serif;
}

.price .amount
{
	text-align: center;
	font-size: 25px;
	font-weight: bold;
	font-family: 'Roboto Slab', serif;
}


.table-list
{
	list-style: none;
	text-align: center;
}


.table-list li
{
	line-height: 50px;
}

Leave a Reply

avatar
  Subscribe  
Notify of