7+ Bootstrap Pricing Table Examples

This post contains a total of 7+ Hand-Picked Bootstrap Pricing Table Examples with Source Code. All these Pricing Tables are made using Bootstrap.

You can use the source code of these examples with credits to the original owner.

Related Posts

Click a Code to Copy it.

Bootstrap pricing table examples

1. By Divinector

Made by Divinector. Bootstrap pricing table with hover effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  
<style>
.single-price {
  text-align: center;
  background: #262626;
  transition: .7s;
  margin-top: 20px;
}
.single-price h3 {
  font-size: 25px;
  color: #000;
  font-weight: 600;
  text-align: center;
  margin: 0;
  margin-top: -80px;
  font-family: poppins;
  color: #fff;
}
.single-price h4 {
  font-size: 48px;
  font-weight: 500;
  color: #fff;
}
.single-price h4 span.sup {
  vertical-align: text-top;
  font-size: 25px;
}
.deal-top {
  position: relative;
  background: #16A086;
  font-size: 16px;
  text-transform: uppercase;
  padding: 136px 24px 0;
}
.deal-top::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -50px;
  width: 0;
  height: 0;
  border-top: 50px solid #16A086;
  border-left: 175px solid transparent;
  border-right: 183px solid transparent;
}
.deal-bottom {
  padding: 56px 16px 0;
}
.deal-bottom ul {
  margin: 0;
  padding: 0;
}
.deal-bottom  ul li {
  font-size: 16px;
  color: #fff;
  font-weight: 300;
  margin-top: 16px;
  border-top: 1px solid #E4E4E4;
  padding-top: 16px;
  list-style: none;
}
.btn-area a {
  display: inline-block;
  font-size: 18px;
  color: #fff;
  background: #16A086;
  padding: 8px 64px;
  margin-top: 32px;
  border-radius: 4px;	
  margin-bottom: 40px;
  text-transform: uppercase;
  font-weight: bold;
  text-decoration: none;
}


.single-price:hover {
  background: #16A086;
}
.single-price:hover .deal-top {
  background: #262626;
}
.single-price:hover .deal-top:after {
  border-top: 50px solid #262626;
}
.single-price:hover .btn-area a {
  background: #262626;
}





/* ignore the code below */


.link-area
{
  position:fixed;
  bottom:20px;
  left:20px;  
  padding:15px;
  border-radius:40px;
  background:tomato;
}
.link-area a
{
  text-decoration:none;
  color:#fff;
  font-size:25px;
}
</style>
</head>
<body>
  <div class="pricing-area">
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="single-price">
          <div class="deal-top">
            <h3>Basic</h3>
            <h4> 29 <span class="sup">$</span> </h4> 
          </div>
          <div class="deal-bottom">
            <ul class="deal-item">
              <li>10 GB Storage</li>
              <li>10 Email address</li>
              <li>10 Domain names</li>
              <li>500 gb Bandwidth </li>
              <li>24 hour Support </li>
            </ul>
            <div class="btn-area">
              <a href="#">Sign Up</a>				
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="single-price">
          <div class="deal-top">
            <h3>Standard</h3>
            <h4> 59 <span class="sup">$</span> </h4>
          </div>
          <div class="deal-bottom">
            <ul class="deal-item">
              <li>50 GB Storage</li>
              <li>50 Email address</li>
              <li>50 Domain names</li>
              <li>1 TB Bandwidth </li>
              <li>24 hour Support </li>
            </ul>
            <div class="btn-area">
              <a href="#">Sign Up</a>				
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="single-price">
          <div class="deal-top">
            <h3>Professional</h3>
            <h4> 79 <span class="sup">$</span> </h4> 
          </div>
          <div class="deal-bottom">
            <ul class="deal-item">
              <li>100 GB Storage</li>
              <li>100 Email address</li>
              <li>100 Domain names</li>
              <li>5 TB Bandwidth </li>
              <li>24 hour Support </li>
            </ul>
            <div class="btn-area">
              <a href="#">Sign Up</a>				
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>       
</div>
</body>
</html>

2. By Minhazul Hossain

Made by Minhazul Hossain. Simple Bootstrap pricing table. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
/* ======= PRICING ======= */
.panel{
  border: 5px solid #ccc !important;
}
.panel:hover{
  border: 5px solid #ccc;
}
.pricing-package{
  margin: 50px 0px 0px 0px;
  font-family: 'Ubuntu', sans-serif;
}
.pricing-package .package-1 .panel-heading{
  background: #004D40;
  color: #fff;
  border: none;
  border-radius: 0%;
}
.pricing-package .package-2 .panel-heading{
  background: #8BC34A;
  color: #fff;
  border-radius: 0%;
}
.pricing-package .package-3 .panel-heading{
  background: #4CAF50;
  color: #fff;
  border-radius: 0%;
}

.pricing-package .panel-pricing ul li {
  font-size: 14px;
  padding-left: 25%;
}
.pricing-package .panel-pricing ul li:hover:nth-child(odd){
  background: #E0F2F1;
}
.pricing-package .panel-pricing ul li:hover:nth-child(even){
  background: #B2DFDB;
}
.pricing-package .panel-pricing ul li span{
  font-family: 'Ubuntu', sans-serif;
  padding-left: 15px;
}
.pricing-package .panel-pricing ul li:last-child{
  padding-bottom: 20px;
}
.pricing-package .panel-pricing ul li i{
  font-size: 22px;
}
.pricing-package .panel-pricing ul li .fa-times,.fa-check{
  color: #ccc;
}
.panel-pricing{
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -webkit-transition: all .3s ease;
}
.panel-pricing:hover{
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
}
.pricing-package .panel-heading .btn-default{
  background: #004D40;
}
.subscribe-button button{
  width: 100%;
  border-radius: 0%;
  padding: 20px;
}
.package-1 .subscribe-button button{
  background: #004D40;
}
.package-2 .subscribe-button button{
  background: #8BC34A;
}
.package-3 .subscribe-button button{
  background: #4CAF50;
}
.subscribe-button button a{
  color: #fff;
}
</style>
</head>
<body>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >

<!--Packages Starts-->
  <div class="pricing-package">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="panel package-1 panel-pricing">
            <div class="panel-heading">
              <h4 class="text-center">Package 1</h4>
            </div>
            <div class="panel-body text-center">
              <h3> <strong> BDT. 3500 <small>/ $35.25</small></strong></h3>
            </div>
            <ul class="list-group">
              <li class="list-group-item"> <i class="fa fa-times"></i><span> Browsing CV</span></li>
              <li class="list-group-item"> <i class="fa fa-check"></i><span> Download CV: 10</span></li>
              <li class="list-group-item"> <i class="fa fa-check"></i><span> CV Collection</span></li>
              <li class="list-group-item"> <i class="fa fa-check"></i><span> Dashboard</span></li>
              <li class="list-group-item"> <i class="fa fa-check"></i><span> Wallet</span></li>
              <li class="list-group-item"> <i class="fa fa-times"></i><span> Exam Test</span></li>
              <li class="list-group-item"> <i class="fa fa-times"></i><span> Skill Test</span></li>
              <li class="list-group-item"> <i class="fa fa-check"></i><span> Validity: 10 days</span></li>
              <li class="list-group-item"> <i class="fa fa-check"></i><span> Job Announcement: 2</span></li>
            </ul>
            <div class="subscribe-button">
              <button type="button" name="button" class="btn btn-default"><a href="#">Subscribe now</a></button>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="panel package-2 panel-pricing">
            <div class="panel-heading">
              <h4 class="text-center">Package 2</h4>
            </div>
            <div class="panel-body text-center">
              <h3> <strong> BDT. 4500 <small>/ $55.25</small></strong></h3>
            </div>
            <ul class="list-group">
              <li class="list-group-item"> <i class="fa fa-times"></i><span> Browsing CV</span></li>
              <li class="list-group-item"> <i class="fa fa-check"></i><span> Download CV: 10</span></li>
              <li class="list-group-item"> <i class="fa fa-check"></i><span> CV Collection</span></li>
              <li class="list-group-item"> <i class="fa fa-check"></i><span> Dashboard</span></li>
              <li class="list-group-item"> <i class="fa fa-check"></i><span> Wallet</span></li>
              <li class="list-group-item"> <i class="fa fa-times"></i><span> Exam Test</span></li>
              <li class="list-group-item"> <i class="fa fa-times"></i><span> Skill Test</span></li>
              <li class="list-group-item"> <i class="fa fa-check"></i><span> Validity: 10 days</span></li>
              <li class="list-group-item"> <i class="fa fa-check"></i><span> Job Announcement: 2</span></li>
            </ul>
            <div class="subscribe-button">
              <button type="button" name="button" class="btn btn-default"><a href="#">Subscribe now</a></button>
            </div>
          </div>
        </div><div class="col-md-4">
          <div class="panel package-3 panel-pricing">
            <div class="panel-heading">
              <h4 class="text-center">Package 3</h4>
            </div>
            <div class="panel-body text-center">
              <h3> <strong> BDT. 7500 <small>/ $85.25</small></strong></h3>
            </div>
            <ul class="list-group">
              <li class="list-group-item"> <i class="fa fa-times"></i><span> Browsing CV</span></li>
              <li class="list-group-item"> <i class="fa fa-check"></i><span> Download CV: 10</span></li>
              <li class="list-group-item"> <i class="fa fa-check"></i><span> CV Collection</span></li>
              <li class="list-group-item"> <i class="fa fa-check"></i><span> Dashboard</span></li>
              <li class="list-group-item"> <i class="fa fa-check"></i><span> Wallet</span></li>
              <li class="list-group-item"> <i class="fa fa-times"></i><span> Exam Test</span></li>
              <li class="list-group-item"> <i class="fa fa-times"></i><span> Skill Test</span></li>
              <li class="list-group-item"> <i class="fa fa-check"></i><span> Validity: 10 days</span></li>
              <li class="list-group-item"> <i class="fa fa-check"></i><span> Job Announcement: 2</span></li>
            </ul>
            <div class="subscribe-button">
              <button type="button" name="button" class="btn btn-default"><a href="#">Subscribe now</a></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--Packages Ends-->
</body>
</html>

3. By Aswani

Made by Aswani. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
    
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" type="text/css">
	<!-- <link rel="stylesheet" href="css/reset.css"> -->
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
  <title>CodePen - responsive-pricing-table</title>

<style>
ibody { background: #fff; font: 400 1em/1.4 "Open Sans", "Helvetica Neue", sans-serif; color: #333; text-align: center; padding: 4em 2em; }

		h1 { font-weight: 300; font-size: 5em; line-height: 1.35; margin: 0 0 .125em; }
		h1 + p { font-size: 1.5em; color: #999; max-width: 30em; margin: 0 auto 3em; }

		table { width: 100%; text-align: left; border-spacing: 0; border-collapse: collapse; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

		th, td { font-family: inherit; font-size: .875em; line-height: 1.45; color: #444; vertical-align: middle; padding: .7em; }
		th { font-weight: 600; }

		colgroup:nth-child(1) { width: 28%; border: 0 none; }
		colgroup:nth-child(2) { width: 18%; border: 1px solid #ccc; }
		colgroup:nth-child(3) { width: 18%; border: 1px solid #ccc; }
		colgroup:nth-child(4) { width: 18%; border: 3px solid #59c7fb;}
		colgroup:nth-child(5) { width: 18%; border: 1px solid #ccc; }

		/* Tablehead */

		thead th { background:-webkit-gradient(linear, 100% 55%, 0% 25%, from(#533147), to(#FCC9AA));
			text-align: center; position: relative; border-bottom: 1px solid #ccc; padding: 3em 0 2em; font-weight: 400; color: #999; }
			thead th:nth-child(1) { background: transparent;  }
		thead th:nth-child(3) {  /*padding: 2em 0 5em;*/ }
		thead th h2 { font-weight: bold;  line-height: 1.2; color: #e5e6e2; }
		thead th h2 + p { font-size: 1.5em; line-height: 1.4;color:#e5e6e2; }
		thead th:nth-child(3) h2 { font-size: 3.6em; }
		thead th:nth-child(3) h2 + p { font-size: 1.5em; }

		thead th p.promo { font-size: 1.3em; color: #fff; position: absolute; top: 1em; left: 0px; z-index: 1000; width: 100%; margin: 0; padding: .625em 17px .75em; background: #c00; box-shadow: 0 2px 4px rgba(0,0,0,.25); border-bottom: 1px solid #900; }

		thead th p.promo:before { content: ""; position: absolute; display: block; width: 0px; height: 0px; border-style: solid; border-width: 0 7px 7px 0; border-color: transparent #900 transparent transparent; bottom: -7px; left: 0; }
		thead th p.promo:after { content: ""; position: absolute; display: block; width: 0px; height: 0px; border-style: solid; border-width: 7px 7px 0 0; border-color: #900 transparent transparent transparent; bottom: -7px; right: 0; }

		/* Tablebody */

		tbody th { background: rgba(255, 255, 255, 0.42); border-left: 1px solid #ccc;font-size: 13px; }
		tbody th span { font-weight: normal; font-size: 87.5%; color: #999; display: block; }

		tbody td { background: rgba(255, 255, 255, 0.42); text-align: center;    border-right: 1px solid #ccc; }

		tbody tr:nth-child(even) th,
		tbody tr:nth-child(even) td { background: rgba(245, 245, 245, 0.68); border: 1px solid #ccc; border-width: 1px 1px 1px 1px; }
		tbody tr:last-child td { border: 1px solid #ccc; }

		/* Tablefooter */

		tfoot th  { padding: 2em 1em; border-top: 1px solid #ccc; }
		tfoot td  { text-align: center; padding: 2em 1em; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;
			border-right: 1px solid #ccc;}

			tfoot a  { font-weight: bold; color: #fff; text-decoration: none; text-transform: uppercase; display: block; padding: 1.125em 2em; background: #92c500; border-radius: .5em;font-size: 13px; }
			.fa-check{
				color:green;
			}
			.fa-times{
				color:#dc2b2b;
			}
			a:focus, a:hover {
				color: #23527c;
				text-decoration: none;
			}
</style>
</head>
	<body>
		<div class="container">
			<div class="row">
        <h2 class="text-center"> Responsive bootstrap pricing table</h2>
        <div class="table-responsive">
				<table class="table">

					<colgroup></colgroup>
					<colgroup></colgroup>
					<colgroup></colgroup>
					<colgroup></colgroup>

					<thead>
						<tr>
							<th>&nbsp;</th>
							<th>
								<h2>Basic</h2>
								<h4 style="color:#d1d1d1;font-weight: bold;">$99/MO</h4>
								<p style="color:#ddd; font-size:12px;">800/Hours</p>
							</th>
							<th>
								<h2>Silver</h2>
								<h4 style="color:#d1d1d1;font-weight: bold;">$499/MO</h4>
								<p style="color:#ddd; font-size:12px;">2500/Hours</p>
							</th>
							<th>
								<h2>Gold</h2>
								<h4 style="color:#d1d1d1;font-weight: bold;">$995/MO</h4>
								<p style="color:#ddd; font-size:12px;">5500/Hours</p>
								<p class="promo">Recommended !</p>
							</th>
							<th style="border:1px solid #ccc;">
								<h2>Platinum</h2>
								<h4 style="color:#d1d1d1;font-weight: bold;">Call Us</h4>
								<p style="color:#ddd; font-size:12px;">>5500/Hours</p>
							</th>

						</tr>
					</thead>

					<tfoot>
						<tr>
							<th>&nbsp;</th>
							<td><a href="#">Purchase</a></td>
							<td><a href="#">Purchase</a></td>
							<td><a href="#">Purchase</a></td>
							<td ><a href="#">Purchase</a></td>
						</tr>
					</tfoot>

					<tbody>
						<tr>
							<th>Lorem ipsum</th>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
						</tr>
						<tr>
							<th>Lorem ipsum</th>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
						</tr>
						<tr>
							<th>Lorem ipsum</th>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
						</tr>
						<tr>
							<th>Lorem ipsum</th>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
						</tr>
						<tr>
							<th>Lorem ipsum</th>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
						</tr>
						<tr>
							<th>Lorem ipsum</th>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
						</tr>
						<!-- another 6 -->
						<tr>
							<th>Lorem ipsum</th>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
						</tr>
						<tr>
							<th>Lorem ipsum</th>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
						</tr>
						<tr>
							<th>Lorem ipsum</th>
							<td><i class="fa fa-times fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
						</tr>
						<tr>
							<th>Lorem ipsum</th>
							<td><i class="fa fa-times fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
						</tr>
						<tr>
							<th>Lorem ipsum</th>
							<td><i class="fa fa-times fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
						</tr>
						<tr>
							<th>Lorem ipsum</th>
							<td><i class="fa fa-times fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
						</tr>
						<!-- another 6 -->
						<tr>
							<th>Lorem ipsum</th>
							<td><i class="fa fa-times fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
						</tr>
						<tr>
							<th>Lorem ipsum</th>
							<td><i class="fa fa-times fa-2x"></i></td>
							<td><i class="fa fa-times fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
						</tr>
						<tr>
							<th>Lorem ipsum</th>
							<td><i class="fa fa-times fa-2x"></i></td>
							<td><i class="fa fa-times fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
						</tr>
						<tr>
							<th>Lorem ipsum</th>
							<td><i class="fa fa-times fa-2x"></i></td>
							<td><i class="fa fa-times fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
						</tr>
						<tr>
							<th>Lorem ipsum</th>
							<td><i class="fa fa-times fa-2x"></i></td>
							<td><i class="fa fa-times fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
						</tr>
						<tr>
							<th>Lorem ipsum</th>
							<td><i class="fa fa-times fa-2x"></i></td>
							<td><i class="fa fa-times fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
						</tr>
						<!-- another 3 -->
						<tr>
							<th>Lorem ipsum</th>
							<td><i class="fa fa-times fa-2x"></i></td>
							<td><i class="fa fa-times fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
						</tr>
						<tr>
							<th>Lorem ipsum</th>
							<td><i class="fa fa-times fa-2x"></i></td>
							<td><i class="fa fa-times fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
						</tr>
						<tr>
							<th>Lorem ipsum</th>
							<td><i class="fa fa-times fa-2x"></i></td>
							<td><i class="fa fa-times fa-2x"></i></td>
							<td><i class="fa fa-times fa-2x"></i></td>
							<td><i class="fa fa-check fa-2x"></i></td>
						</tr>
					</tbody>
				</table>
        </div>
			</div>
		</div>
</body>
</html>

4. By brusky

Made by brusky. Classy Pricing table using bootstrap 4. Source

bootstrap pricing table by brusky
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
 
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato|Montserrat:600,700'>
  
<style>
.rounded-lg {
  border-radius: 1rem !important;
}

.text-small {
  font-size: 0.9rem !important;
}

.custom-separator {
  width: 5rem;
  height: 6px;
  border-radius: 1rem;
}

.text-uppercase {
  letter-spacing: 0.2em;
}

body {
  background: #00B4DB;
  background: -webkit-linear-gradient(to right, #0083B0, #00B4DB);
  background: linear-gradient(to right, #0083B0, #00B4DB);
  color: #514B64;
  min-height: 100vh;
}
</style>
</head>
<body>
  <section>
  <div class="container py-5">

    <!-- Start -->
    <header class="text-center mb-5 text-white">
      <div class="row">
        <div class="col-lg-7 mx-auto">
          <h1>Bootstrap pricing table</h1>
          <p>Easily create a classy pricing table in Bootstrap&nbsp;4.<br> <a href="" class="text-reset">Bootstrap snippet by Brusky</a></p>
        </div>
      </div>
    </header>
    <!-- END -->



    <div class="row text-center align-items-end">
      <!-- Pricing Table-->
      <div class="col-lg-4 mb-5 mb-lg-0">
        <div class="bg-white p-5 rounded-lg shadow">
          <h1 class="h6 text-uppercase font-weight-bold mb-4">Basic</h1>
          <h2 class="h1 font-weight-bold">$199<span class="text-small font-weight-normal ml-2">/ month</span></h2>

          <div class="custom-separator my-4 mx-auto bg-primary"></div>

          <ul class="list-unstyled my-5 text-small text-left">
            <li class="mb-3">
              <i class="fa fa-check mr-2 text-primary"></i> Lorem ipsum dolor sit amet</li>
            <li class="mb-3">
              <i class="fa fa-check mr-2 text-primary"></i> Sed ut perspiciatis</li>
            <li class="mb-3">
              <i class="fa fa-check mr-2 text-primary"></i> At vero eos et accusamus</li>
            <li class="mb-3 text-muted">
              <i class="fa fa-times mr-2"></i>
              <del>Nam libero tempore</del>
            </li>
            <li class="mb-3 text-muted">
              <i class="fa fa-times mr-2"></i>
              <del>Sed ut perspiciatis</del>
            </li>
            <li class="mb-3 text-muted">
              <i class="fa fa-times mr-2"></i>
              <del>Sed ut perspiciatis</del>
            </li>
          </ul>
          <a href="#" class="btn btn-primary btn-block p-2 shadow rounded-pill">Subscribe</a>
        </div>
      </div>
      <!-- END -->


      <!-- Pricing Table-->
      <div class="col-lg-4 mb-5 mb-lg-0">
        <div class="bg-white p-5 rounded-lg shadow">
          <h1 class="h6 text-uppercase font-weight-bold mb-4">Pro</h1>
          <h2 class="h1 font-weight-bold">$399<span class="text-small font-weight-normal ml-2">/ month</span></h2>

          <div class="custom-separator my-4 mx-auto bg-primary"></div>

          <ul class="list-unstyled my-5 text-small text-left font-weight-normal">
            <li class="mb-3">
              <i class="fa fa-check mr-2 text-primary"></i> Lorem ipsum dolor sit amet</li>
            <li class="mb-3">
              <i class="fa fa-check mr-2 text-primary"></i> Sed ut perspiciatis</li>
            <li class="mb-3">
              <i class="fa fa-check mr-2 text-primary"></i> At vero eos et accusamus</li>
            <li class="mb-3">
              <i class="fa fa-check mr-2 text-primary"></i> Nam libero tempore</li>
            <li class="mb-3">
              <i class="fa fa-check mr-2 text-primary"></i> Sed ut perspiciatis</li>
            <li class="mb-3 text-muted">
              <i class="fa fa-times mr-2"></i>
              <del>Sed ut perspiciatis</del>
            </li>
          </ul>
          <a href="#" class="btn btn-primary btn-block p-2 shadow rounded-pill">Subscribe</a>
        </div>
      </div>
      <!-- END -->


      <!-- Pricing Table-->
      <div class="col-lg-4">
        <div class="bg-white p-5 rounded-lg shadow">
          <h1 class="h6 text-uppercase font-weight-bold mb-4">Enterprise</h1>
          <h2 class="h1 font-weight-bold">$899<span class="text-small font-weight-normal ml-2">/ month</span></h2>

          <div class="custom-separator my-4 mx-auto bg-primary"></div>

          <ul class="list-unstyled my-5 text-small text-left font-weight-normal">
            <li class="mb-3">
              <i class="fa fa-check mr-2 text-primary"></i> Lorem ipsum dolor sit amet</li>
            <li class="mb-3">
              <i class="fa fa-check mr-2 text-primary"></i> Sed ut perspiciatis</li>
            <li class="mb-3">
              <i class="fa fa-check mr-2 text-primary"></i> At vero eos et accusamus</li>
            <li class="mb-3">
              <i class="fa fa-check mr-2 text-primary"></i> Nam libero tempore</li>
            <li class="mb-3">
              <i class="fa fa-check mr-2 text-primary"></i> Sed ut perspiciatis</li>
            <li class="mb-3">
              <i class="fa fa-check mr-2 text-primary"></i> Sed ut perspiciatis</li>
          </ul>
          <a href="#" class="btn btn-primary btn-block p-2 shadow rounded-pill">Subscribe</a>
        </div>
      </div>
      <!-- END -->

    </div>
  </div>
</section>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js'></script>

</body>
</html>

5. By Hasib

Made by Hasib. Simple bootstrap table with hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  
<style>
.panel-pricing {
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -webkit-transition: all .3s ease;
}
.panel-pricing:hover {
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
}
.panel-pricing .panel-heading {
  padding: 20px 10px;
}
.panel-pricing .panel-heading .fa {
  margin-top: 10px;
  font-size: 58px;
}
.panel-pricing .list-group-item {
  color: #777777;
  border-bottom: 1px solid rgba(250, 250, 250, 0.5);
}
.panel-pricing .list-group-item:last-child {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
.panel-pricing .list-group-item:first-child {
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}
.panel-pricing .panel-body {
  background-color: #f0f0f0;
  font-size: 40px;
  color: #777777;
  padding: 20px;
  margin: 0px;
}
</style>
</head>
<body>
      <section id="plans">
        <div class="container">
            <div class="row">

                <!-- item -->
                <div class="col-md-4 col-sm-4 text-center">
                    <div class="panel panel-danger panel-pricing">
                        <div class="panel-heading">
                            <i class="fa fa-desktop"></i>
                            <h3>Plan 1</h3>
                        </div>
                        <div class="panel-body text-center">
                            <p><strong>$100 / Month</strong></p>
                        </div>
                        <ul class="list-group text-center">
                            <li class="list-group-item"><i class="fa fa-check"></i> Personal use</li>
                            <li class="list-group-item"><i class="fa fa-check"></i> Unlimited projects</li>
                            <li class="list-group-item"><i class="fa fa-check"></i> 27/7 support</li>
                        </ul>
                        <div class="panel-footer">
                            <a class="btn btn-lg btn-block btn-danger" href="#">BUY NOW!</a>
                        </div>
                    </div>
                </div>
                <!-- /item -->

                <!-- item -->
                <div class="col-md-4 col-sm-4 text-center">
                    <div class="panel panel-warning panel-pricing">
                        <div class="panel-heading">
                            <i class="fa fa-desktop"></i>
                            <h3>Plan 2</h3>
                        </div>
                        <div class="panel-body text-center">
                            <p><strong>$200 / Month</strong></p>
                        </div>
                        <ul class="list-group text-center">
                            <li class="list-group-item"><i class="fa fa-check"></i> Personal use</li>
                            <li class="list-group-item"><i class="fa fa-check"></i> Unlimited projects</li>
                            <li class="list-group-item"><i class="fa fa-check"></i> 27/7 support</li>
                        </ul>
                        <div class="panel-footer">
                            <a class="btn btn-lg btn-block btn-warning" href="#">BUY NOW!</a>
                        </div>
                    </div>
                </div>
                <!-- /item -->

                <!-- item -->
                <div class="col-md-4 col-sm-4 text-center">
                    <div class="panel panel-success panel-pricing">
                        <div class="panel-heading">
                            <i class="fa fa-desktop"></i>
                            <h3>Plan 3</h3>
                        </div>
                        <div class="panel-body text-center">
                            <p><strong>$300 / Month</strong></p>
                        </div>
                        <ul class="list-group text-center">
                            <li class="list-group-item"><i class="fa fa-check"></i> Personal use</li>
                            <li class="list-group-item"><i class="fa fa-check"></i> Unlimited projects</li>
                            <li class="list-group-item"><i class="fa fa-check"></i> 27/7 support</li>
                        </ul>
                        <div class="panel-footer">
                            <a class="btn btn-lg btn-block btn-success" href="#">BUY NOW!</a>
                        </div>
                    </div>
                </div>
                <!-- /item -->

            </div>
        </div>
    </section>
</body>
</html>

6. By Alexandru Andrei

Made by Alexandru Andrei. Pricing table with Slide effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
  
<style>
.pricingTable{
    text-align: center;
    background: #fff;
    padding-top: 5px;
    transition: all 0.5s ease-in-out 0s;
}
.pricingTable > .pricingTable-header{
    color:#fff;
    background: #ffd400;
    height: 190px;
    position: relative;
    transition: all 0.5s ease 0s;
}
.pricingTable > .pricingTable-header:after{
    content: "";
    border-bottom: 40px solid #fff;
    border-right: 263px solid transparent;
    position: absolute;
    right:0px;
    bottom: 0px;
}
.pricingTable:hover .pricingTable-header{
    height: 230px;
    transition: all 0.5s ease 0s;
}
.pricingTable-header > .heading{
    display: block;
    padding: 20px 0;
}
.heading > h3{
    margin: 0;
    text-transform: uppercase;
}
.pricingTable-header > .price-value{
    display: block;
    font-size: 60px;
    line-height: 60px;
}
.pricingTable-header > .price-value > .mo{
    font-size: 14px;
    display: block;
    line-height: 0px;
    text-transform: uppercase;
}
.pricingTable-header > .price-value > .currency{
    font-size: 24px;
    margin-right: 4px;
    position: relative;
    bottom:30px;
}
.pricingTable > .pricingContent{
    text-transform: uppercase;
    color:#000
}
.pricingTable > .pricingContent > ul{
    list-style: none;
    padding: 0;
}
.pricingTable > .pricingContent > ul > li{
    padding: 15px 0;
    border-bottom: 1px solid #000;
}
.pricingTable > .pricingContent > ul > li:last-child{
    border: 0px none;
}
.pricingTable-sign-up{
    padding: 30px 0;
}
.pricingTable-sign-up > .btn-block{
    width: 80%;
    margin: 0 auto;
    background: #ffd400;
    border:2px solid #fff;
    color:#fff;
    padding: 15px 12px;
    text-transform: uppercase;
    font-size: 18px;
}
.pricingTable-sign-up > .btn-block:hover{
    opacity: 0.9;
}

@media screen and (max-width: 1200px){
    .pricingTable > .pricingTable-header:after{
        border-right: 215px solid transparent;
    }
}
@media screen and (max-width: 990px){
    .pricingTable{
        margin-bottom: 20px;
    }
    .pricingTable > .pricingTable-header:after{
        border-right: 349px solid transparent;
    }
}
@media screen and (max-width: 480px){
    .pricingTable{
        overflow: hidden;
    }
    .pricingTable > .pricingTable-header:after {
        border-right: 459px solid rgba(0, 0, 0, 0);
    }
}
</style>
</head>
<body>
  <div class="container kedit">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="pricingTable">
                <div class="pricingTable-header">
                    <span class="heading">
                        <h3>Standard</h3>
                    </span>
                    <span class="price-value"><span class="currency">โ‚ฌ</span>10<span class="mo"> month</span></span>
                </div>
 
                <div class="pricingContent">
                    <ul>
                        <li>50GB Disk Space</li>
                        <li>50 Email Accounts</li>
                        <li>50GB Monthly Bandwidth</li>
                        <li>50 Domains</li>
                        <li>Unlimited Subdomains</li>
                    </ul>
                </div><!-- /  CONTENT BOX-->
 
                <div class="pricingTable-sign-up">
                    <a href="#" class="btn btn-block btn-default">sign up</a>
                </div><!-- BUTTON BOX-->
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="pricingTable">
                <div class="pricingTable-header">
                    <span class="heading">
                        <h3>Standard</h3>
                    </span>
                    <span class="price-value"><span class="currency">โ‚ฌ</span>10<span class="mo"> month</span></span>
                </div>
 
                <div class="pricingContent">
                    <ul>
                        <li>50GB Disk Space</li>
                        <li>50 Email Accounts</li>
                        <li>50GB Monthly Bandwidth</li>
                        <li>50 Domains</li>
                        <li>Unlimited Subdomains</li>
                    </ul>
                </div><!-- /  CONTENT BOX-->
 
                <div class="pricingTable-sign-up">
                    <a href="#" class="btn btn-block btn-default">sign up</a>
                </div><!-- BUTTON BOX-->
            </div>
            </div>
            <div class="col-md-3 col-sm-6">
            <div class="pricingTable">
                <div class="pricingTable-header">
                    <span class="heading">
                        <h3>Standard</h3>
                    </span>
                    <span class="price-value"><span class="currency">โ‚ฌ</span>10<span class="mo"> month</span></span>
                </div>
 
                <div class="pricingContent">
                    <ul>
                        <li>50GB Disk Space</li>
                        <li>50 Email Accounts</li>
                        <li>50GB Monthly Bandwidth</li>
                        <li>50 Domains</li>
                        <li>Unlimited Subdomains</li>
                    </ul>
                </div><!-- /  CONTENT BOX-->
 
                <div class="pricingTable-sign-up">
                    <a href="#" class="btn btn-block btn-default">sign up</a>
                </div><!-- BUTTON BOX-->
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="pricingTable">
                <div class="pricingTable-header">
                    <span class="heading">
                        <h3>Standard</h3>
                    </span>
                    <span class="price-value"><span class="currency">โ‚ฌ</span>10<span class="mo"> month</span></span>
                </div>
 
                <div class="pricingContent">
                    <ul>
                        <li>50GB Disk Space</li>
                        <li>50 Email Accounts</li>
                        <li>50GB Monthly Bandwidth</li>
                        <li>50 Domains</li>
                        <li>Unlimited Subdomains</li>
                    </ul>
                </div><!-- /  CONTENT BOX-->
 
                <div class="pricingTable-sign-up">
                    <a href="#" class="btn btn-block btn-default">sign up</a>
                </div><!-- BUTTON BOX-->
            </div>
        </div>
        </div>
    </div>
</div>
</body>
</html>

7. By andyaydin

Made by andyaydin. Bootstrap Pricing Table with “Read More”. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
.moretext, .moretext1, .moretext2{
  display: none;
}

.pricing .card {
  border: none;
  border-radius: 1rem;
  transition: all 0.2s;
  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}

.pricing hr {
  margin: 1.5rem 0;
}

.pricing .card-title {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  letter-spacing: .1rem;
  font-weight: bold;
}

.pricing .card-price {
  font-size: 3rem;
  margin: 0;
}

.pricing .card-price .period {
  font-size: 0.8rem;
}

.pricing ul li {
  margin-bottom: 1rem;
}

.pricing .text-muted {
  opacity: 0.7;
}

.pricing .btn {
  font-size: 80%;
  border-radius: 5rem;
  letter-spacing: .1rem;
  font-weight: bold;
  padding: 1rem;
  opacity: 0.7;
  transition: all 0.2s;
}

/* Hover Effects on Card */

@media (min-width: 992px) {
  .pricing .card:hover {
    margin-top: -.25rem;
    margin-bottom: .25rem;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
  }
  .pricing .card:hover .btn {
    opacity: 1;
  }
}
</style>
</head>
<body>
  <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<section class="pricing py-5">
  <div class="container">
    <div class="row">
	     <!-- Free Tier -->
      <div class="col-lg-4">
        <div class="card mb-5 mb-lg-0">
          <div class="card-body">
            <h5 class="card-title text-muted text-uppercase text-center">Starter</h5>
            <h6 class="card-price text-center">$0<span class="period">/month</span></h6>
            <hr>
            <ul class="fa-ul">
              <li><span class="fa-li"><i class="fa fa-check"></i></span>Single User</li>
              <li><span class="fa-li"><i class="fa fa-check"></i></span>5GB Storage</li>
              <li><span class="fa-li"><i class="fa fa-check"></i></span>Unlimited Public Projects</li>
              <li><span class="fa-li"><i class="fa fa-check"></i></span>Community Access</li>
              <li class="text-muted"><span class="fa-li"><i class="fa fa-times"></i></span>Unlimited Private Projects</li>
              <li class="text-muted"><span class="fa-li"><i class="fa fa-times"></i></span>Dedicated Phone Support</li>
              <li class="text-muted"><span class="fa-li"><i class="fa fa-times"></i></span>Free Subdomain</li>
              <li class="text-muted"><span class="fa-li"><i class="fa fa-times"></i></span>Monthly Status Reports</li>
			  <li class="moretext2"><span class="fa-li"><i class="fa fa-check"></i></span>Monthly Status Reports</li>
              <li class="moretext2"><span class="fa-li"><i class="fa fa-check"></i></span>Monthly Status Reports</li>
              <li class="moretext2"><span class="fa-li"><i class="fa fa-check"></i></span>Monthly Status Reports</li>
              <li class="moretext2"><span class="fa-li"><i class="fa fa-check"></i></span>Monthly Status Reports</li>
              <li class="moretext2"><span class="fa-li"><i class="fa fa-check"></i></span>Monthly Status Reports</li>
            </ul>
            <a href="#" class="btn btn-block btn-primary text-uppercase moreless-button2">Read More</a>
          </div>
        </div>
      </div>
      <!-- Plus Tier -->
      <div class="col-lg-4">
        <div class="card mb-5 mb-lg-0">
          <div class="card-body">
            <h5 class="card-title text-muted text-uppercase text-center">Premium</h5>
            <h6 class="card-price text-center">$9<span class="period">/month</span></h6>
            <hr>
            <ul class="fa-ul">
              <li><span class="fa-li"><i class="fa fa-check"></i></span><strong>5 Users</strong></li>
              <li><span class="fa-li"><i class="fa fa-check"></i></span>50GB Storage</li>
              <li><span class="fa-li"><i class="fa fa-check"></i></span>Unlimited Public Projects</li>
              <li><span class="fa-li"><i class="fa fa-check"></i></span>Community Access</li>
              <li><span class="fa-li"><i class="fa fa-check"></i></span>Unlimited Private Projects</li>
              <li><span class="fa-li"><i class="fa fa-check"></i></span>Dedicated Phone Support</li>
              <li><span class="fa-li"><i class="fa fa-check"></i></span>Free Subdomain</li>
              <li class="text-muted"><span class="fa-li"><i class="fa fa-times"></i></span>Monthly Status Reports</li>
			   <li class="moretext1"><span class="fa-li"><i class="fa fa-check"></i></span>Monthly Status Reports</li>
              <li class="moretext1"><span class="fa-li"><i class="fa fa-check"></i></span>Monthly Status Reports</li>
              <li class="moretext1"><span class="fa-li"><i class="fa fa-check"></i></span>Monthly Status Reports</li>
              <li class="moretext1"><span class="fa-li"><i class="fa fa-check"></i></span>Monthly Status Reports</li>
              <li class="moretext1"><span class="fa-li"><i class="fa fa-check"></i></span>Monthly Status Reports</li>
            </ul>
            <a href="#" class="btn btn-block btn-primary text-uppercase moreless-button1">Read More</a>
          </div>
        </div>
      </div>
      <!-- Pro Tier -->
      <div class="col-lg-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title text-muted text-uppercase text-center">Enterprise</h5>
            <h6 class="card-price text-center">$49<span class="period">/month</span></h6>
            <hr>
            <ul class="fa-ul">
              <li><span class="fa-li"><i class="fa fa-check"></i></span><strong>Unlimited Users</strong></li>
              <li><span class="fa-li"><i class="fa fa-check"></i></span>150GB Storage</li>
              <li><span class="fa-li"><i class="fa fa-check"></i></span>Unlimited Public Projects</li>
              <li><span class="fa-li"><i class="fa fa-check"></i></span>Community Access</li>
              <li><span class="fa-li"><i class="fa fa-check"></i></span>Unlimited Private Projects</li>
              <li><span class="fa-li"><i class="fa fa-check"></i></span>Dedicated Phone Support</li>
              <li><span class="fa-li"><i class="fa fa-check"></i></span>Dedicated Phone</li>
              <li><span class="fa-li"><i class="fa fa-check"></i></span>Monthly Status Reports</li>
              <li class="moretext"><span class="fa-li"><i class="fa fa-check"></i></span>Monthly Status Reports</li>
              <li class="moretext"><span class="fa-li"><i class="fa fa-check"></i></span>Monthly Status Reports</li>
              <li class="moretext"><span class="fa-li"><i class="fa fa-check"></i></span>Monthly Status Reports</li>
              <li class="moretext"><span class="fa-li"><i class="fa fa-check"></i></span>Monthly Status Reports</li>
              <li class="moretext"><span class="fa-li"><i class="fa fa-check"></i></span>Monthly Status Reports</li>
            </ul>
            <a href="#" class="btn btn-block btn-primary text-uppercase moreless-button">Read More</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div style="height:500px;"></div>
</section>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script>
jQuery('.moreless-button').click(function () {
  jQuery('.moretext').slideToggle();
  if (jQuery('.moreless-button').text() == "Read More") {
    jQuery(this).text("Read less");
  } else {
    jQuery(this).text("Read more");
  }
});

jQuery('.moreless-button1').click(function () {
  jQuery('.moretext1').slideToggle();
  if (jQuery('.moreless-button1').text() == "Read More") {
    jQuery(this).text("Read less");
  } else {
    jQuery(this).text("Read more");
  }
});

jQuery('.moreless-button2').click(function () {
  jQuery('.moretext2').slideToggle();
  if (jQuery('.moreless-button2').text() == "Read More") {
    jQuery(this).text("Read less");
  } else {
    jQuery(this).text("Read more");
  }
});
    </script>
</body>
</html>

8. By Manol Kalinov

Made by Manol Kalinov. Responsive Pricing table made using Bootstrap. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
  
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300); 
body{
    background:#010101;
}

.price_table_container{
	text-align:center;
	color:#666;
	margin-top:35px;
	font-family: 'Open Sans', sans-serif;
}

.price_table_heading{
	font-size:36px;
	padding:10px;
	background:#EEE;
}


.price_table_row {
    padding:15px;
	background: #FFF;
}

.cost{
	padding:30px;
	font-size:30px;
}
.cost span{
	font-size:15px;
}

.price_table_row:nth-of-type(even) {
    background: #F8F8F8;
}
.btn{
	border-radius:0px;
}

.recommended{
/*USER DEFINED COLOUR*/	
background:#FF3A3A; 
color:#FFF;
/*USER DEFINED COLOUR*/	
padding:3px 0 3px 0;
margin-top:10px;  
text-align:center;
margin-bottom:-35px;
font-family: 'Open Sans', sans-serif;
}


.spacer{width:100%;height:50px;}


/*Already Defined Colours*/
/*Background*/
.primary-bg{background:#337AB7;color:#FFF;}
.success-bg{background:#5CB85C;color:#FFF;}
.info-bg{background:#5BC0DE;color:#FFF;}
.warning-bg{background:#F0AD4E;color:#FFF;}
.danger-bg{background:#D9534F;color:#FFF;}
.dark-bg{background:#444;color:#FFF;}
.royal-bg{background:#8E74E2;color:#FFF;}
.static-bg{background:#2BB0A6;color:#FFF;}

/*Only Text Colours*/
.primary-text{background:#FFF;color:#337AB7;}
.success-text{background:#FFF;color:#5CB85C;}
.info-text{background:#FFF;color:#5BC0DE;}
.warning-text{background:#FFF;color:#F0AD4E;}
.danger-text{background:#FFF;color:#D9534F;}
.dark-text{background:#FFF;color:#444;}
.royal-text{background:#FFF;color:#8E74E2;}
.static-text{background:#FFF;color:#2BB0A6;}

/*Additional Button styles*/

/*BTN-DARK*/
.btn-dark {
  color: #fff;
  background-color: #444;
  border-color: #444;
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark.focus,
.btn-dark:active,
.btn-dark.active,
.open > .dropdown-toggle.btn-dark {
  color: #fff;
  background-color: #222;
  border-color: #222;
}
.btn-dark:active,
.btn-dark.active,
.open > .dropdown-toggle.btn-dark {
  background-image: none;
}


/*BTN-ROYAL---------*/
.btn-royal {
  color: #fff;
  background-color: #8E74E2;
  border-color: #8E74E2;
}
.btn-royal:hover,
.btn-royal:focus,
.btn-royal.focus,
.btn-royal:active,
.btn-royal.active,
.open > .dropdown-toggle.btn-royal {
  color: #fff;
  background-color: #7451E8;
  border-color: #7451E8;
}
.btn-royal:active,
.btn-royal.active,
.open > .dropdown-toggle.btn-royal {
  background-image: none;
}


/*BTN-STATIC---------*/
.btn-static {
  color: #fff;
  background-color: #2BB0A6;
  border-color: #2BB0A6;
}
.btn-static:hover,
.btn-static:focus,
.btn-static.focus,
.btn-static:active,
.btn-static.active,
.open > .dropdown-toggle.btn-static {
  color: #fff;
  background-color: #07A094;
  border-color: #07A094;
}
.btn-static:active,
.btn-static.active,
.open > .dropdown-toggle.btn-static {
  background-image: none;
}

/*!
 * Hover.css (https://ianlunn.co.uk/)
 * Version: 1.0.10
 * Author: Ian Lunn @IanLunn
 * Author URL: https://ianlunn.co.uk/
 * Github: https://github.com/IanLunn/Hover
 * Made available under a MIT License:
 * https://www.opensource.org/licenses/mit-license.php
 * Hover.css Copyright Ian Lunn 2014.
 */.button{margin:.4em;padding:1em;cursor:pointer;background:#e1e1e1;text-decoration:none;color:#666;-webkit-tap-highlight-color:rgba(0,0,0,0)}.grow{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.grow:active,.grow:focus,.grow:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.shrink{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.shrink:active,.shrink:focus,.shrink:hover{-webkit-transform:scale(0.9);transform:scale(0.9)}@-webkit-keyframes pulse{25%{-webkit-transform:scale(1.1);transform:scale(1.1)}75%{-webkit-transform:scale(0.9);transform:scale(0.9)}}@keyframes pulse{25%{-webkit-transform:scale(1.1);transform:scale(1.1)}75%{-webkit-transform:scale(0.9);transform:scale(0.9)}}.pulse{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.pulse:active,.pulse:focus,.pulse:hover{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes pulse-grow{to{-webkit-transform:scale(1.1);transform:scale(1.1)}}@keyframes pulse-grow{to{-webkit-transform:scale(1.1);transform:scale(1.1)}}.pulse-grow{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.pulse-grow:active,.pulse-grow:focus,.pulse-grow:hover{-webkit-animation-name:pulse-grow;animation-name:pulse-grow;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}@-webkit-keyframes pulse-shrink{to{-webkit-transform:scale(0.9);transform:scale(0.9)}}@keyframes pulse-shrink{to{-webkit-transform:scale(0.9);transform:scale(0.9)}}.pulse-shrink{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.pulse-shrink:active,.pulse-shrink:focus,.pulse-shrink:hover{-webkit-animation-name:pulse-shrink;animation-name:pulse-shrink;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}@-webkit-keyframes push{50%{-webkit-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes push{50%{-webkit-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1);transform:scale(1)}}.push{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.push:active,.push:focus,.push:hover{-webkit-animation-name:push;animation-name:push;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes pop{50%{-webkit-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pop{50%{-webkit-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);transform:scale(1)}}.pop{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.pop:active,.pop:focus,.pop:hover{-webkit-animation-name:pop;animation-name:pop;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:1;animation-iteration-count:1}.rotate{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.rotate:active,.rotate:focus,.rotate:hover{-webkit-transform:rotate(4deg);transform:rotate(4deg)}.grow-rotate{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.grow-rotate:active,.grow-rotate:focus,.grow-rotate:hover{-webkit-transform:scale(1.1) rotate(4deg);transform:scale(1.1) rotate(4deg)}.float{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.float:active,.float:focus,.float:hover{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.sink{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.sink:active,.sink:focus,.sink:hover{-webkit-transform:translateY(5px);transform:translateY(5px)}@-webkit-keyframes hover{50%{-webkit-transform:translateY(-3px);transform:translateY(-3px)}100%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}}@keyframes hover{50%{-webkit-transform:translateY(-3px);transform:translateY(-3px)}100%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}}.hover{display:inline-block;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.hover:active,.hover:focus,.hover:hover{-webkit-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-name:hover;animation-name:hover;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}@-webkit-keyframes hang{50%{-webkit-transform:translateY(3px);transform:translateY(3px)}100%{-webkit-transform:translateY(6px);transform:translateY(6px)}}@keyframes hang{50%{-webkit-transform:translateY(3px);transform:translateY(3px)}100%{-webkit-transform:translateY(6px);transform:translateY(6px)}}.hang{display:inline-block;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.hang:active,.hang:focus,.hang:hover{-webkit-transform:translateY(6px);transform:translateY(6px);-webkit-animation-name:hang;animation-name:hang;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.skew{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.skew:active,.skew:focus,.skew:hover{-webkit-transform:skew(-10deg);transform:skew(-10deg)}.skew-forward{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.skew-forward:active,.skew-forward:focus,.skew-forward:hover{-webkit-transform:skew(-10deg);transform:skew(-10deg)}.skew-backward{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.skew-backward:active,.skew-backward:focus,.skew-backward:hover{-webkit-transform:skew(10deg);transform:skew(10deg)}@-webkit-keyframes wobble-vertical{16.65%{-webkit-transform:translateY(8px);transform:translateY(8px)}33.3%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}49.95%{-webkit-transform:translateY(4px);transform:translateY(4px)}66.6%{-webkit-transform:translateY(-2px);transform:translateY(-2px)}83.25%{-webkit-transform:translateY(1px);transform:translateY(1px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes wobble-vertical{16.65%{-webkit-transform:translateY(8px);transform:translateY(8px)}33.3%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}49.95%{-webkit-transform:translateY(4px);transform:translateY(4px)}66.6%{-webkit-transform:translateY(-2px);transform:translateY(-2px)}83.25%{-webkit-transform:translateY(1px);transform:translateY(1px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}.wobble-vertical{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.wobble-vertical:active,.wobble-vertical:focus,.wobble-vertical:hover{-webkit-animation-name:wobble-vertical;animation-name:wobble-vertical;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-horizontal{16.65%{-webkit-transform:translateX(8px);transform:translateX(8px)}33.3%{-webkit-transform:translateX(-6px);transform:translateX(-6px)}49.95%{-webkit-transform:translateX(4px);transform:translateX(4px)}66.6%{-webkit-transform:translateX(-2px);transform:translateX(-2px)}83.25%{-webkit-transform:translateX(1px);transform:translateX(1px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes wobble-horizontal{16.65%{-webkit-transform:translateX(8px);transform:translateX(8px)}33.3%{-webkit-transform:translateX(-6px);transform:translateX(-6px)}49.95%{-webkit-transform:translateX(4px);transform:translateX(4px)}66.6%{-webkit-transform:translateX(-2px);transform:translateX(-2px)}83.25%{-webkit-transform:translateX(1px);transform:translateX(1px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}.wobble-horizontal{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.wobble-horizontal:active,.wobble-horizontal:focus,.wobble-horizontal:hover{-webkit-animation-name:wobble-horizontal;animation-name:wobble-horizontal;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-to-bottom-right{16.65%{-webkit-transform:translate(8px,8px);transform:translate(8px,8px)}33.3%{-webkit-transform:translate(-6px,-6px);transform:translate(-6px,-6px)}49.95%{-webkit-transform:translate(4px,4px);transform:translate(4px,4px)}66.6%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}83.25%{-webkit-transform:translate(1px,1px);transform:translate(1px,1px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes wobble-to-bottom-right{16.65%{-webkit-transform:translate(8px,8px);transform:translate(8px,8px)}33.3%{-webkit-transform:translate(-6px,-6px);transform:translate(-6px,-6px)}49.95%{-webkit-transform:translate(4px,4px);transform:translate(4px,4px)}66.6%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}83.25%{-webkit-transform:translate(1px,1px);transform:translate(1px,1px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}.wobble-to-bottom-right{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.wobble-to-bottom-right:active,.wobble-to-bottom-right:focus,.wobble-to-bottom-right:hover{-webkit-animation-name:wobble-to-bottom-right;animation-name:wobble-to-bottom-right;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-to-top-right{16.65%{-webkit-transform:translate(8px,-8px);transform:translate(8px,-8px)}33.3%{-webkit-transform:translate(-6px,6px);transform:translate(-6px,6px)}49.95%{-webkit-transform:translate(4px,-4px);transform:translate(4px,-4px)}66.6%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}83.25%{-webkit-transform:translate(1px,-1px);transform:translate(1px,-1px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes wobble-to-top-right{16.65%{-webkit-transform:translate(8px,-8px);transform:translate(8px,-8px)}33.3%{-webkit-transform:translate(-6px,6px);transform:translate(-6px,6px)}49.95%{-webkit-transform:translate(4px,-4px);transform:translate(4px,-4px)}66.6%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}83.25%{-webkit-transform:translate(1px,-1px);transform:translate(1px,-1px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}.wobble-to-top-right{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.wobble-to-top-right:active,.wobble-to-top-right:focus,.wobble-to-top-right:hover{-webkit-animation-name:wobble-to-top-right;animation-name:wobble-to-top-right;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-top{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}@keyframes wobble-top{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}.wobble-top{display:inline-block;-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.wobble-top:active,.wobble-top:focus,.wobble-top:hover{-webkit-animation-name:wobble-top;animation-name:wobble-top;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-bottom{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}@keyframes wobble-bottom{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}.wobble-bottom{display:inline-block;-webkit-transform-origin:100% 0;transform-origin:100% 0;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.wobble-bottom:active,.wobble-bottom:focus,.wobble-bottom:hover{-webkit-animation-name:wobble-bottom;animation-name:wobble-bottom;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-skew{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}@keyframes wobble-skew{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}.wobble-skew{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.wobble-skew:active,.wobble-skew:focus,.wobble-skew:hover{-webkit-animation-name:wobble-skew;animation-name:wobble-skew;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes buzz{50%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}100%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}}@keyframes buzz{50%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}100%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}}.buzz{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.buzz:active,.buzz:focus,.buzz:hover{-webkit-animation-name:buzz;animation-name:buzz;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes buzz-out{10%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}20%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}30%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}40%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}50%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}60%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}70%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}80%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}90%{-webkit-transform:translateX(1px) rotate(0);transform:translateX(1px) rotate(0)}100%{-webkit-transform:translateX(-1px) rotate(0);transform:translateX(-1px) rotate(0)}}@keyframes buzz-out{10%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}20%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}30%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}40%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}50%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}60%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}70%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}80%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}90%{-webkit-transform:translateX(1px) rotate(0);transform:translateX(1px) rotate(0)}100%{-webkit-transform:translateX(-1px) rotate(0);transform:translateX(-1px) rotate(0)}}.buzz-out{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.buzz-out:active,.buzz-out:focus,.buzz-out:hover{-webkit-animation-name:buzz-out;animation-name:buzz-out;-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:1;animation-iteration-count:1}.border-fade{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:inset 0 0 0 4px #e1e1e1,0 0 1px rgba(0,0,0,0)}.border-fade:active,.border-fade:focus,.border-fade:hover{box-shadow:inset 0 0 0 4px #666,0 0 1px rgba(0,0,0,0)}.hollow{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:background;transition-property:background;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:inset 0 0 0 4px #e1e1e1,0 0 1px rgba(0,0,0,0)}.hollow:active,.hollow:focus,.hollow:hover{background:0 0}.trim{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.trim:before{content:'';position:absolute;border:#fff solid 4px;top:4px;left:4px;right:4px;bottom:4px;opacity:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:opacity;transition-property:opacity}.trim:active:before,.trim:focus:before,.trim:hover:before{opacity:1}.outline-outward{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.outline-outward:before{content:'';position:absolute;border:#e1e1e1 solid 4px;top:0;right:0;bottom:0;left:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:top,right,bottom,left;transition-property:top,right,bottom,left}.outline-outward:active:before,.outline-outward:focus:before,.outline-outward:hover:before{top:-8px;right:-8px;bottom:-8px;left:-8px}.outline-inward{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.outline-inward:before{pointer-events:none;content:'';position:absolute;border:#e1e1e1 solid 4px;top:-16px;right:-16px;bottom:-16px;left:-16px;opacity:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:top,right,bottom,left;transition-property:top,right,bottom,left}.outline-inward:active:before,.outline-inward:focus:before,.outline-inward:hover:before{top:-8px;right:-8px;bottom:-8px;left:-8px;opacity:1}.round-corners{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:border-radius;transition-property:border-radius;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.round-corners:active,.round-corners:focus,.round-corners:hover{border-radius:1em}.glow{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.glow:active,.glow:focus,.glow:hover{box-shadow:0 0 8px rgba(0,0,0,.6)}.box-shadow-outset{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.box-shadow-outset:active,.box-shadow-outset:focus,.box-shadow-outset:hover{box-shadow:2px 2px 2px rgba(0,0,0,.6)}.box-shadow-inset{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;box-shadow:inset 0 0 0 rgba(0,0,0,.6),0 0 1px rgba(0,0,0,0);-webkit-transform:translateZ(0);transform:translateZ(0)}.box-shadow-inset:active,.box-shadow-inset:focus,.box-shadow-inset:hover{box-shadow:inset 2px 2px 2px rgba(0,0,0,.6),0 0 1px rgba(0,0,0,0)}.float-shadow{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.float-shadow:before{pointer-events:none;position:absolute;z-index:-1;content:'';top:100%;left:5%;height:10px;width:90%;opacity:0;background:-webkit-radial-gradient(center,ellipse,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 80%);background:radial-gradient(ellipse at center,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 80%);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform,opacity;transition-property:transform,opacity}.float-shadow:active,.float-shadow:focus,.float-shadow:hover{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.float-shadow:active:before,.float-shadow:focus:before,.float-shadow:hover:before{opacity:1;-webkit-transform:translateY(5px);transform:translateY(5px)}@-webkit-keyframes hover{50%{-webkit-transform:translateY(-3px);transform:translateY(-3px)}100%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}}@keyframes hover{50%{-webkit-transform:translateY(-3px);transform:translateY(-3px)}100%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}}@-webkit-keyframes hover-shadow{0%{-webkit-transform:translateY(6px);transform:translateY(6px);opacity:.4}50%{-webkit-transform:translateY(3px);transform:translateY(3px);opacity:1}100%{-webkit-transform:translateY(6px);transform:translateY(6px);opacity:.4}}@keyframes hover-shadow{0%{-webkit-transform:translateY(6px);transform:translateY(6px);opacity:.4}50%{-webkit-transform:translateY(3px);transform:translateY(3px);opacity:1}100%{-webkit-transform:translateY(6px);transform:translateY(6px);opacity:.4}}.hover-shadow{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.hover-shadow:before{pointer-events:none;position:absolute;z-index:-1;content:'';top:100%;left:5%;height:10px;width:90%;opacity:0;background:-webkit-radial-gradient(center,ellipse,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 80%);background:radial-gradient(ellipse at center,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 80%);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform,opacity;transition-property:transform,opacity}.hover-shadow:active,.hover-shadow:focus,.hover-shadow:hover{-webkit-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-name:hover;animation-name:hover;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.hover-shadow:active:before,.hover-shadow:focus:before,.hover-shadow:hover:before{opacity:.4;-webkit-transform:translateY(6px);transform:translateY(6px);-webkit-animation-name:hover-shadow;animation-name:hover-shadow;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.shadow-radial{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.shadow-radial:after,.shadow-radial:before{pointer-events:none;position:absolute;content:'';left:0;width:100%;box-sizing:border-box;height:5px;opacity:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:opacity;transition-property:opacity}.shadow-radial:before{bottom:100%;background:-webkit-radial-gradient(50% 150%,ellipse,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 80%);background:radial-gradient(ellipse at 50% 150%,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 80%)}.shadow-radial:after{top:100%;background:-webkit-radial-gradient(50% -50%,ellipse,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 80%);background:radial-gradient(ellipse at 50% -50%,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 80%)}.shadow-radial:active:after,.shadow-radial:active:before,.shadow-radial:focus:after,.shadow-radial:focus:before,.shadow-radial:hover:after,.shadow-radial:hover:before{opacity:1}.bubble-top{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-top:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:top;transition-property:top;left:calc(50% - 10px);top:0;border-width:0 10px 10px;border-color:transparent transparent #e1e1e1}.bubble-top:active:before,.bubble-top:focus:before,.bubble-top:hover:before{top:-10px}.bubble-right{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-right:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:right;transition-property:right;top:calc(50% - 10px);right:0;border-width:10px 0 10px 10px;border-color:transparent transparent transparent #e1e1e1}.bubble-right:active:before,.bubble-right:focus:before,.bubble-right:hover:before{right:-10px}.bubble-bottom{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-bottom:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:bottom;transition-property:bottom;left:calc(50% - 10px);bottom:0;border-width:10px 10px 0;border-color:#e1e1e1 transparent transparent}.bubble-bottom:active:before,.bubble-bottom:focus:before,.bubble-bottom:hover:before{bottom:-10px}.bubble-left{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-left:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:left;transition-property:left;top:calc(50% - 10px);left:0;border-width:10px 10px 10px 0;border-color:transparent #e1e1e1 transparent transparent}.bubble-left:active:before,.bubble-left:focus:before,.bubble-left:hover:before{left:-10px}.bubble-float-top{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-float-top:before{position:absolute;z-index:-1;content:'';left:calc(50% - 10px);top:0;border-style:solid;border-width:0 10px 10px;border-color:transparent transparent #e1e1e1;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:top;transition-property:top}.bubble-float-top:active,.bubble-float-top:focus,.bubble-float-top:hover{-webkit-transform:translateY(5px) translateZ(0);transform:translateY(5px) translateZ(0)}.bubble-float-top:active:before,.bubble-float-top:focus:before,.bubble-float-top:hover:before{top:-10px}.bubble-float-right{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-float-right:before{position:absolute;z-index:-1;top:calc(50% - 10px);right:0;content:'';border-style:solid;border-width:10px 0 10px 10px;border-color:transparent transparent transparent #e1e1e1;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:right;transition-property:right}.bubble-float-right:active,.bubble-float-right:focus,.bubble-float-right:hover{-webkit-transform:translateX(-5px);transform:translateX(-5px)}.bubble-float-right:active:before,.bubble-float-right:focus:before,.bubble-float-right:hover:before{right:-10px}.bubble-float-bottom{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-float-bottom:before{position:absolute;z-index:-1;content:'';left:calc(50% - 10px);bottom:0;border-style:solid;border-width:10px 10px 0;border-color:#e1e1e1 transparent transparent;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:bottom;transition-property:bottom}.bubble-float-bottom:active,.bubble-float-bottom:focus,.bubble-float-bottom:hover{-webkit-transform:translateY(-5px) translateZ(0);transform:translateY(-5px) translateZ(0)}.bubble-float-bottom:active:before,.bubble-float-bottom:focus:before,.bubble-float-bottom:hover:before{bottom:-10px}.bubble-float-left{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-float-left:before{position:absolute;z-index:-1;content:'';top:calc(50% - 10px);left:0;border-style:solid;border-width:10px 10px 10px 0;border-color:transparent #e1e1e1 transparent transparent;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:left;transition-property:left}.bubble-float-left:active,.bubble-float-left:focus,.bubble-float-left:hover{-webkit-transform:translateX(5px);transform:translateX(5px)}.bubble-float-left:active:before,.bubble-float-left:focus:before,.bubble-float-left:hover:before{left:-10px}.curl-top-left{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.curl-top-left:before{pointer-events:none;position:absolute;content:'';height:0;width:0;top:0;left:0;background:#fff;background:linear-gradient(135deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');z-index:1000;box-shadow:1px 1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width,height;transition-property:width,height}.curl-top-left:active:before,.curl-top-left:focus:before,.curl-top-left:hover:before{width:25px;height:25px}.curl-top-right{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.curl-top-right:before{pointer-events:none;position:absolute;content:'';height:0;width:0;top:0;right:0;background:#fff;background:linear-gradient(225deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);box-shadow:-1px 1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width,height;transition-property:width,height}.curl-top-right:active:before,.curl-top-right:focus:before,.curl-top-right:hover:before{width:25px;height:25px}.curl-bottom-right{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.curl-bottom-right:before{pointer-events:none;position:absolute;content:'';height:0;width:0;bottom:0;right:0;background:#fff;background:linear-gradient(315deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);box-shadow:-1px -1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width,height;transition-property:width,height}.curl-bottom-right:active:before,.curl-bottom-right:focus:before,.curl-bottom-right:hover:before{width:25px;height:25px}.curl-bottom-left{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.curl-bottom-left:before{pointer-events:none;position:absolute;content:'';height:0;width:0;bottom:0;left:0;background:#fff;background:linear-gradient(45deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);box-shadow:1px -1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width,height;transition-property:width,height}.curl-bottom-left:active:before,.curl-bottom-left:focus:before,.curl-bottom-left:hover:before{width:25p
</style>
</head>
<body>
  <br><br>
<center> 
      <span style="color:#fff;font-size:24px;text-align:center;">Responsive Bootstrap Pricing Table</span>
      </center><br><br>
       <!-- PRICING TABLE STYLE 1-->
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-12 float-shadow">        
                    <div class="price_table_container">
                        <div class="price_table_heading">Starter</div>
                        <div class="price_table_body">
                            <div class="price_table_row cost warning-bg"><strong>$ 19</strong><span>/MONTH</span></div>
                            <div class="price_table_row">1 Website</div>
                            <div class="price_table_row">10 GB Storage</div>
                            <div class="price_table_row">10 GB Bandwidth</div>
                            <div class="price_table_row">10 Email Addresses</div>
                            <div class="price_table_row">Free Backup</div>
                            <div class="price_table_row">Full Time Support</div>                                                
                        </div>
                        <a href="#" class="btn btn-warning btn-lg btn-block">Sign Up</a>
                    </div>
                </div>
        
                <div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
                    <div class="recommended"><strong><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> RECOMMENDED</strong></div>                              
                    <div class="price_table_container">
                        <div class="price_table_heading">Basic</div>
                        <div class="price_table_body">
                            <div class="price_table_row cost primary-bg"><strong>$ 29</strong><span>/MONTH</span></div>
                            <div class="price_table_row">10 Websites</div>
                            <div class="price_table_row">100 GB Storage</div>
                            <div class="price_table_row">100 GB Bandwidth</div>
                            <div class="price_table_row">50 Email Addresses</div>
                            <div class="price_table_row">Free Backup</div>
                            <div class="price_table_row">Full Time Support</div>                                                
                        </div>
                        <a href="#" class="btn btn-primary btn-lg btn-block">Sign Up</a>
                    </div>
                </div>
        
                <div class="col-md-3 col-sm-6 col-xs-12 float-shadow">        
                    <div class="price_table_container">
                        <div class="price_table_heading">Premium</div>
                        <div class="price_table_body">
                            <div class="price_table_row cost success-bg"><strong>$ 39</strong><span>/MONTH</span></div>
                            <div class="price_table_row">100 Websites</div>
                            <div class="price_table_row">1 TB Storage</div>
                            <div class="price_table_row">1 TB Bandwidth</div>
                            <div class="price_table_row">100 Email Addresses</div>
                            <div class="price_table_row">Free Backup</div>
                            <div class="price_table_row">Full Time Support</div>                                                
                        </div>
                        <a href="#" class="btn btn-success btn-lg btn-block">Sign Up</a>
                    </div>
                </div>
        
                <div class="col-md-3 col-sm-6 col-xs-12 float-shadow">        
                    <div class="price_table_container">
                        <div class="price_table_heading">Master</div>
                        <div class="price_table_body">
                            <div class="price_table_row cost info-bg"><strong>$ 60</strong><span>/MONTH</span></div>
                            <div class="price_table_row">Unlimited Websites</div>
                            <div class="price_table_row">10 TB Storage</div>
                            <div class="price_table_row">100 TB Bandwidth</div>
                            <div class="price_table_row">1000 Email Addresses</div>
                            <div class="price_table_row">Free Backup</div>
                            <div class="price_table_row">Full Time Support</div>                                                
                        </div>
                        <a href="#" class="btn btn-info btn-lg btn-block">Sign Up</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- PRICING TABLE STYLE 1-->
</body>
</html>