<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row row-flex">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="price-table pt-bg-black">
<div>
<span>basic</span>
<span>Price $99.99/mo</span>
<span>Features included!</span>
</div>
<ul>
<li>Domain name</li>
<li>Social Media Integration</li>
<li>First Month Hosting</li>
<li>On Page SEO</li>
<li>24/6 Support</li>
</ul>
<a href="#">purchase</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="price-table pt-bg-green">
<div>
<span>basic</span>
<span>Price $99.99/mo</span>
<span>Features included!</span>
</div>
<ul>
<li>Domain name</li>
<li>Social Media Integration</li>
<li>First Month Hosting</li>
<li>On Page SEO</li>
<li>24/6 Support</li>
</ul>
<a href="#">purchase</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="price-table pt-bg-red">
<div>
<span>basic</span>
<span>Price $99.99/mo</span>
<span>Features included!</span>
</div>
<ul>
<li>Domain name</li>
<li>Social Media Integration</li>
<li>First Month Hosting</li>
<li>On Page SEO</li>
<li>24/6 Support</li>
</ul>
<a href="#">purchase</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="price-table pt-bg-blue">
<div>
<span>basic</span>
<span>Price $99.99/mo</span>
<span>Features included!</span>
</div>
<ul>
<li>Domain name</li>
<li>Social Media Integration</li>
<li>First Month Hosting</li>
<li>On Page SEO</li>
<li>24/6 Support</li>
</ul>
<a href="#">purchase</a>
</div>
</div>
</div>
</div>
/* PRICE TABLE */
.row-flex {
display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-moz-flex-wrap: wrap;
}
.price-table {
max-width: 400px;
min-height: 320px;
background-color: #fff;
border-radius: 0 0 0 25px;
border: 1px solid #ccc;
box-shadow: 5px 5px 8px #ccc;
display: block;
margin: 10px auto;
padding: 0 0 8px 0;
text-align: center;
}
.price-table span {
display: block;
}
.price-table span:first-child {
padding: 16px 0 0 0;
font-size: 2em;
text-transform: uppercase;
font-weight: bold;
}
.price-table span:nth-child(2) {
padding: 0 0 16px 0;
}
.price-table span:nth-child(3) {
padding: 8px 0;
font-weight: bold;
font-size: 1.2em;
}
.price-table > ul {
list-style: none;
display: block;
padding: 0;
margin: 0;
}
.price-table > ul > li {
display: block;
padding: 8px 0;
}
.price-table > ul > li:first-child {
border-top: 1px solid #ccc;
}
.price-table > ul > li {
border-bottom: 1px solid #ccc;
}
.price-table a,
.price-table a:active,
.price-table a:focus,
.price-table a:hover,
.price-table a:visited {
text-transform: uppercase;
display: inline-block;
padding: 8px 16px;
text-decoration: none;
font-weight: bold;
transition-duration: .2s;
}
/* Colors */
.pt-bg-black span:first-child {
background-color: #212121;
color: #fcfcfc;
}
.pt-bg-black span:nth-child(2) {
background-color: #212121;
color: #D5D8DC;
}
.pt-bg-black a {
border: 3px solid #212121;
color: #212121;
margin-top: 8px;
}
.pt-bg-black a:hover {
background-color: #212121;
color: #fff;
} /* End Color Black */
.pt-bg-green span:first-child {
background-color: #27AE60;
color: #fcfcfc;
}
.pt-bg-green span:nth-child(2) {
background-color: #27AE60;
color: #D5D8DC;
}
.pt-bg-green a {
border: 3px solid #27AE60;
color: #27AE60;
margin-top: 8px;
}
.pt-bg-green a:hover {
background-color: #27AE60;
color: #fff;
} /* End Color Green */
.pt-bg-red span:first-child {
background-color: #C0392B;
color: #fcfcfc;
}
.pt-bg-red span:nth-child(2) {
background-color: #C0392B;
color: #D5D8DC;
}
.pt-bg-red a {
border: 3px solid #C0392B;
color: #C0392B;
margin-top: 8px;
}
.pt-bg-red a:hover {
background-color: #C0392B;
color: #fff;
} /* End Color Red */
.pt-bg-blue span:first-child {
background-color: #2980B9;
color: #fcfcfc;
}
.pt-bg-blue span:nth-child(2) {
background-color: #2980B9;
color: #D5D8DC;
}
.pt-bg-blue a {
border: 3px solid #2980B9;
color: #2980B9;
margin-top: 8px;
}
.pt-bg-blue a:hover {
background-color: #2980B9;
color: #fff;
} /* End Color Blue */
/* END PRICE TABLE */