Bootstrap pricing table template Free Download

bootstrap pricing table template
bootstrap pricing table template
bootstrap pricing table template

Today in this article i am going to tell you Quickly build an effective pricing table for your potential customers .

Add These Files in your page head section.

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

HTML

 <div class="container">
       <div class="row">
          <div class="col-md-3">
             <div class="box_container bs">
               <div class="box_header">Free</div>
               <div class="price">Rs.120/mo</div>
               <ul class="list">
                 <li><a href="#">1 Domain</a></li>
                 <li><a href="#">10 GB Disk Space</a></li>
                 <li><a href="#">10 Email Account</a></li>
                 <li><a href="#">Cpanel</a></li>
                 <li><a href="#">10 GB Bandwidth</a></li>
                 <li><a href="#">Help center access</a></li>
                 <li><a href="#">Customer Panel</a></li>
               </ul>
               <div class="buy"><a href="#">Buy Now</a></div>
             </div>
          </div>
          
          <div class="col-md-3">
             <div class="box_container bs">
               <div class="box_header">Pro</div>
               <div class="price">Rs.140/mo</div>
               <ul class="list">
                 <li><a href="#">1 Domain</a></li>
                 <li><a href="#">10 GB Disk Space</a></li>
                 <li><a href="#">10 Email Account</a></li>
                 <li><a href="#">Cpanel</a></li>
                 <li><a href="#">10 GB Bandwidth</a></li>
                 <li><a href="#">Help center access</a></li>
                 <li><a href="#">Customer Panel</a></li>
               </ul>
               <div class="buy"><a href="#">Buy Now</a></div>
             </div>
          </div>
          
          <div class="col-md-3">
             <div class="box_container bs">
               <div class="box_header">Super</div>
               <div class="price">Rs.160/mo</div>
               <ul class="list">
                 <li><a href="#">1 Domain</a></li>
                 <li><a href="#">10 GB Disk Space</a></li>
                 <li><a href="#">10 Email Account</a></li>
                 <li><a href="#">Cpanel</a></li>
                 <li><a href="#">10 GB Bandwidth</a></li>
                 <li><a href="#">Help center access</a></li>
                 <li><a href="#">Customer Panel</a></li>
               </ul>
               <div class="buy"><a href="#">Buy Now</a></div>
             </div>
          </div>
          
          <div class="col-md-3">
             <div class="box_container bs">
               <div class="box_header">Delux</div>
               <div class="price">Rs.200/mo</div>
               <ul class="list">
                 <li><a href="#">1 Domain</a></li>
                 <li><a href="#">10 GB Disk Space</a></li>
                 <li><a href="#">10 Email Account</a></li>
                 <li><a href="#">Cpanel</a></li>
                 <li><a href="#">10 GB Bandwidth</a></li>
                 <li><a href="#">Help center access</a></li>
                 <li><a href="#">Customer Panel</a></li>
               </ul>
               <div class="buy"><a href="#">Buy Now</a></div>
             </div>
          </div>
          
       </div>
    </div>

CSS

.bs
{
	-webkit-box-shadow: 0px 0px 9px 0px rgba(214,214,214,1);
-moz-box-shadow: 0px 0px 9px 0px rgba(214,214,214,1);
box-shadow: 0px 0px 9px 0px rgba(214,214,214,1);
}


.price
{
	font-size:25px;
	color:#F30;
	text-align:center;
	border-bottom:1px dashed #f1f1f3;
}

.box_header
{
	background:#f2f2f2;
	padding:10px;
	font-weight:600;
	font-size:18px;
	text-align:center;
}

.list
{
	list-style:none;
	margin:0px;
	padding:0px;
	margin-bottom:20px;
	
}

.list li
{
	color:#333;
	padding-left:10px;
	height:30px;
	line-height:30px;
	border-bottom:1px dashed #f1f1f3;
}

.list li a
{
	color:#333;
}

.buy
{
	background:#F30;
	height:60px;
	font-size:25px;
	line-height:60px;
	text-align:center;
}

.buy a
{
	color:#fff;
}

Leave a Reply

Your email address will not be published. Required fields are marked *