How to create price table list using html css and bootstrap 5
By Guest |
Jan 18, 2022 |
General
How to create Price Table list using html, css and bootstrap 5
In this post, you will learn about how to create a responsive pricing table list using html, css and bootstrap 5.
Bootstrap CDN link as been added in Step 1.
How To Create a Responsive Pricing Table
Step 1: Add HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cloud Hosting</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="section">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<div class="section-title">
<h2>YOUR PRICING TABLE LIST - YOUR CHOICE</h2>
</div>
<p class="mt-2">Best and Cheap Website Pricing Plans</p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="package-box">
<div class="package-header package-bg-blue">
<h4 class="package-heading">Shared Hosting</h4>
<h5 class="package-price"> $0.65/MONTH </h5>
</div>
<div class="package-body">
<ul>
<li><i>→</i>Host Websites <span class="li-value">1</span></li>
<li><i>→</i>Disk Space <span class="li-value">5 GB </span></li>
<li><i>→</i>Bandwidth <span class="li-value">Unlimited</span></li>
<li><i>→</i>Database <span class="li-value">3</span></li>
<li><i>→</i>Email Account <span class="li-value">3</span></li>
<li><i>→</i>Control Panel <span class="li-value">Yes</span></li>
<li><i>→</i>Sub Domain <span class="li-value">Unlimited</span></li>
<li><i>→</i>SSL Certificate <span class="li-value">Free</span></li>
<li><i>→</i>Softaculous <span class="li-value">Free</span></li>
<li><i>→</i>Parked Domain <span class="li-value">Unlimited</span></li>
</ul>
<div class="text-center">
<a href="" class="package-btn">Add to Cart</a>
<a href="" class="package-btn">View More</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="package-box">
<div class="package-header package-bg-green">
<h4 class="package-heading">RESELLER HOSTING</h4>
<h5 class="package-price"> $0.65/MONTH </h5>
</div>
<div class="package-body">
<ul>
<li><i>→</i>Host Websites <span class="li-value">1</span></li>
<li><i>→</i>Disk Space <span class="li-value">5 GB </span></li>
<li><i>→</i>Bandwidth <span class="li-value">Unlimited</span></li>
<li><i>→</i>Database <span class="li-value">3</span></li>
<li><i>→</i>Email Account <span class="li-value">3</span></li>
<li><i>→</i>Control Panel <span class="li-value">Yes</span></li>
<li><i>→</i>Sub Domain <span class="li-value">Unlimited</span></li>
<li><i>→</i>SSL Certificate <span class="li-value">Free</span></li>
<li><i>→</i>Softaculous <span class="li-value">Free</span></li>
<li><i>→</i>Parked Domain <span class="li-value">Unlimited</span></li>
</ul>
<div class="text-center">
<a href="" class="package-btn">Add to Cart</a>
<a href="" class="package-btn">View More</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="package-box">
<div class="package-header package-bg-skyblue">
<h4 class="package-heading">CLOUD VPS L1</h4>
<h5 class="package-price"> $0.65/MONTH </h5>
</div>
<div class="package-body">
<ul>
<li><i>→</i>Host Websites <span class="li-value">1</span></li>
<li><i>→</i>Disk Space <span class="li-value">5 GB </span></li>
<li><i>→</i>Bandwidth <span class="li-value">Unlimited</span></li>
<li><i>→</i>Database <span class="li-value">3</span></li>
<li><i>→</i>Email Account <span class="li-value">3</span></li>
<li><i>→</i>Control Panel <span class="li-value">Yes</span></li>
<li><i>→</i>Sub Domain <span class="li-value">Unlimited</span></li>
<li><i>→</i>SSL Certificate <span class="li-value">Free</span></li>
<li><i>→</i>Softaculous <span class="li-value">Free</span></li>
<li><i>→</i>Parked Domain <span class="li-value">Unlimited</span></li>
</ul>
<div class="text-center">
<a href="" class="package-btn">Add to Cart</a>
<a href="" class="package-btn">View More</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="package-box">
<div class="package-header package-bg-orange">
<h4 class="package-heading">DEDICATED SERVER</h4>
<h5 class="package-price"> $0.65/MONTH </h5>
</div>
<div class="package-body">
<ul>
<li><i>→</i>Host Websites <span class="li-value">1</span></li>
<li><i>→</i>Disk Space <span class="li-value">5 GB </span></li>
<li><i>→</i>Bandwidth <span class="li-value">Unlimited</span></li>
<li><i>→</i>Database <span class="li-value">3</span></li>
<li><i>→</i>Email Account <span class="li-value">3</span></li>
<li><i>→</i>Control Panel <span class="li-value">Yes</span></li>
<li><i>→</i>Sub Domain <span class="li-value">Unlimited</span></li>
<li><i>→</i>SSL Certificate <span class="li-value">Free</span></li>
<li><i>→</i>Softaculous <span class="li-value">Free</span></li>
<li><i>→</i>Parked Domain <span class="li-value">Unlimited</span></li>
</ul>
<div class="text-center">
<a href="" class="package-btn">Add to Cart</a>
<a href="" class="package-btn">View More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Step 2: Add CSS:
.section{
padding: 40px 0px;
}
.package-bg-blue{
background-color: #03a9f4!important;
}
.package-bg-green{
background-color: #4caf50!important;
}
.package-bg-skyblue{
background-color: #00bcd4!important;
}
.package-bg-orange{
background-color: #ff9800!important;
}
.package-box{
border: 1px solid #c4c4c4;
margin: 4% 0 0;
text-align: center;
}
.package-box .package-header{
padding: 14px 10px;
}
.package-box .package-header .package-heading{
text-align: center;
margin-bottom: 6px;
color: #fff;
text-transform: uppercase;
font-size: 22px;
}
.package-box .package-header .package-price{
text-align: center;
margin-bottom: 4px;
color: #fff;
}
.package-box .package-body{
margin: 0;
padding: 5% 5%;
text-align: left;
}
.package-box .package-body ul{
padding: 0px !important;
display: block;
}
.package-box .package-body ul li {
list-style-type: none;
border-bottom: 1px solid #ccc;
padding: 2% 0 2% 8px;
font-size: 14px;
font-weight: 600;
color: #444444;
background-position: left 8px;
background-repeat: no-repeat;
}
.package-box .package-body ul li i{
padding: 2px 5px;
font-size: 14px;
color: #ffffff;
background-color: #00bcd4;
border-radius: 50px;
margin-right: 8px;
}
.package-box .package-body ul li .li-value {
float: right;
padding: 0.15rem 0.3rem;
width: 65px;
background: 0 0;
color: #444;
font-weight: 700;
text-align: center;
font-size: 13px;
}
.package-box .package-btn{
padding: 4px 14px;
background-color: #fc4903;
color: #fff;
font-size: 16px;
font-weight: 600;
margin: 2px 4px;
text-decoration: none;
}
Thank you.