NiceSnippets.com
Price List Design Using HTML, CSS and Bootstrap 4
New Price list design example usign html,css and bootstrap 4. this price card design in rounde shape. this design also call pricing table design with bootstrap 4. bootstrap pricing table template free. price list design examples in html,css and bootstrap 4.
We allows to free snippets of bootstrap 4 pricing cards , you can download full code of bootstrap pricing table design layout. Here in this post i will give you example of bootstrap pricing table example snippet and you will get simple code of html, css and jquery. In price list design template free download snippet i give you three tab with html, css and js, you can easily get code of business price list design layout.
<!DOCTYPE html>
<html>
<head>
<title>Price List Design</title>
<link rel="stylesheet" type="text/css" href="custom.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body>
<div class="container main-section text-center">
<div class="row">
<div class="col-lg-3 col-12 text-white pt-4">
<div class="row">
<div class="col-lg-12">
<p class="p-0 m-0">STARTER</p>
<hr class="header-border bg-white">
</div>
<div class="col-lg-12 text-center pb-5 pr-3">
<div class="price-part rounded-circle bg-white ml-4">
<h1 class="text-dark"><sup>$</sup>25</h1>
<span class="text-dark">monthly</span>
</div>
<div class="box bg-danger rounded">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-12 text-white pt-4">
<div class="row">
<div class="col-lg-12">
<p class="p-0 m-0">STANDARD</p>
<hr class="header-border bg-white">
</div>
<div class="col-lg-12 text-center pb-5 pr-3">
<div class="price-part rounded-circle bg-white ml-4">
<h1 class="text-dark"><sup>$</sup>50</h1>
<span class="text-dark">monthly</span>
</div>
<div class="box bg-info rounded">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-12 text-white pt-4">
<div class="row">
<div class="col-lg-12">
<p class="p-0 m-0">PROFESSIONAL</p>
<hr class="header-border bg-white">
</div>
<div class="col-lg-12 text-center pb-5 pr-3">
<div class="price-part rounded-circle bg-white ml-4">
<h1 class="text-dark"><sup>$</sup>70</h1>
<span class="text-dark">monthly</span>
</div>
<div class="box bg-warning rounded">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-12 text-white pt-4">
<div class="row">
<div class="col-lg-12">
<p class="p-0 m-0">ENTERPRISE</p>
<hr class="header-border bg-white">
</div>
<div class="col-lg-12 text-center pb-5 pr-3">
<div class="price-part rounded-circle bg-white ml-4">
<h1 class="text-dark"><sup>$</sup>95</h1>
<span class="text-dark">monthly</span>
</div>
<div class="box bg-success rounded">
<i class="fa fa-check" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.main-section{
background-color:#F22C8A;
margin-top: 120px;
}
.header-border{
width:20%;
color:#000;
}
.price-part{
position: relative;
height:200px;
width:200px;
padding-top:50px;
z-index:1001;
border:10px solid rgba(249, 150, 196,0.6);
background-clip: padding-box;
}
.box{
position: absolute;
padding:0px 2px 20px 2px;
left:43%;
width:10%;
bottom:20px;
z-index: 0;
}
