Bootstrap Pricing Tables - Component Snippets
Pricing tables are a great way of presenting the customer with the various plans and prices for a product or service. They present information in an easy-to-read and quick-to-process format and also serve as a comparison tool. The table displays what is available, how much it costs, and what benefits come with each plan, making it easier for customers to decide which one is right for them.
Pricing Style 1
<!--====== PRICING STYLE ONE START ======-->
<section class="pricing-area pricing-one">
<div class="container">
<div class="row justify-content-center">
<div class="col-xxl-6 col-xl-7 col-lg-8">
<div class="section-title text-center">
<h2 class="mb-3 fw-bold">Our Pricing</h2>
<p class="text-lg">
Morem ipsum dolor sit amet consectetur, adipisicing elit. Illum
quam suscipit distinctio optio, quaerat consequatur labore
pariatur rerum.
</p>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-4 col-md-7 col-sm-9">
<div class="pricing-style-one">
<div class="pricing-header text-center">
<h5 class="sub-title">Basic</h5>
<span class="price">$199</span>
<h5 class="year">Per year</h5>
</div>
<div class="pricing-list">
<ul>
<li>
<i class="lni lni-checkmark-circle"></i> Carefully crafted
components
</li>
<li>
<i class="lni lni-checkmark-circle"></i> Amazing page
examples
</li>
<li>
<i class="lni lni-checkmark-circle"></i> Super friendly
support team
</li>
<li>
<i class="lni lni-checkmark-circle"></i> Awesome Support
</li>
</ul>
</div>
<div class="pricing-btn rounded-buttons text-center">
<a
class="btn primary-btn rounded-full"
href="javascript:void(0)"
>
GET STARTED
</a>
</div>
<div class="bottom-shape">
<svg
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 350 112.35"
>
<defs>
<style>
.color-1 {
fill: #2bdbdc;
isolation: isolate;
}
.cls-1 {
opacity: 0.1;
}
.cls-2 {
opacity: 0.2;
}
.cls-3 {
opacity: 0.4;
}
.cls-4 {
opacity: 0.6;
}
</style>
</defs>
<title>bottom-part1</title>
<g>
<g data-name="Group 747">
<path
data-name="Path 294"
class="cls-1 color-1"
d="M0,24.21c120-55.74,214.32,2.57,267,0S349.18,7.4,349.18,7.4V82.35H0Z"
transform="translate(0 0)"
/>
<path
data-name="Path 297"
class="cls-2 color-1"
d="M350,34.21c-120-55.74-214.32,2.57-267,0S.82,17.4.82,17.4V92.35H350Z"
transform="translate(0 0)"
/>
<path
data-name="Path 296"
class="cls-3 color-1"
d="M0,44.21c120-55.74,214.32,2.57,267,0S349.18,27.4,349.18,27.4v74.95H0Z"
transform="translate(0 0)"
/>
<path
data-name="Path 295"
class="cls-4 color-1"
d="M349.17,54.21c-120-55.74-214.32,2.57-267,0S0,37.4,0,37.4v74.95H349.17Z"
transform="translate(0 0)"
/>
</g>
</g>
</svg>
</div>
</div>
<!-- single pricing -->
</div>
<div class="col-lg-4 col-md-7 col-sm-9">
<div class="pricing-style-one">
<div class="pricing-header text-center">
<h5 class="sub-title">Pro</h5>
<span class="price">$399</span>
<h5 class="year">Per year</h5>
</div>
<div class="pricing-list">
<ul>
<li>
<i class="lni lni-checkmark-circle"></i> Carefully crafted
components
</li>
<li>
<i class="lni lni-checkmark-circle"></i> Amazing page
examples
</li>
<li>
<i class="lni lni-checkmark-circle"></i> Super friendly
support team
</li>
<li>
<i class="lni lni-checkmark-circle"></i> Awesome Support
</li>
</ul>
</div>
<div class="pricing-btn rounded-buttons text-center">
<a
class="btn primary-btn rounded-full"
href="javascript:void(0)"
>
GET STARTED
</a>
</div>
<div class="bottom-shape">
<svg
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 350 112.35"
>
<defs>
<style>
.color-1 {
fill: #2bdbdc;
isolation: isolate;
}
.cls-1 {
opacity: 0.1;
}
.cls-2 {
opacity: 0.2;
}
.cls-3 {
opacity: 0.4;
}
.cls-4 {
opacity: 0.6;
}
</style>
</defs>
<title>bottom-part1</title>
<g>
<g data-name="Group 747">
<path
data-name="Path 294"
class="cls-1 color-1"
d="M0,24.21c120-55.74,214.32,2.57,267,0S349.18,7.4,349.18,7.4V82.35H0Z"
transform="translate(0 0)"
/>
<path
data-name="Path 297"
class="cls-2 color-1"
d="M350,34.21c-120-55.74-214.32,2.57-267,0S.82,17.4.82,17.4V92.35H350Z"
transform="translate(0 0)"
/>
<path
data-name="Path 296"
class="cls-3 color-1"
d="M0,44.21c120-55.74,214.32,2.57,267,0S349.18,27.4,349.18,27.4v74.95H0Z"
transform="translate(0 0)"
/>
<path
data-name="Path 295"
class="cls-4 color-1"
d="M349.17,54.21c-120-55.74-214.32,2.57-267,0S0,37.4,0,37.4v74.95H349.17Z"
transform="translate(0 0)"
/>
</g>
</g>
</svg>
</div>
</div>
<!-- single pricing -->
</div>
<div class="col-lg-4 col-md-7 col-sm-9">
<div class="pricing-style-one">
<div class="pricing-header text-center">
<h5 class="sub-title">Enterprise</h5>
<span class="price">$699</span>
<h5 class="year">Per year</h5>
</div>
<div class="pricing-list">
<ul>
<li>
<i class="lni lni-checkmark-circle"></i> Carefully crafted
components
</li>
<li>
<i class="lni lni-checkmark-circle"></i> Amazing page
examples
</li>
<li>
<i class="lni lni-checkmark-circle"></i> Super friendly
support team
</li>
<li>
<i class="lni lni-checkmark-circle"></i> Awesome Support
</li>
</ul>
</div>
<div class="pricing-btn rounded-buttons text-center">
<a
class="btn primary-btn rounded-full"
href="javascript:void(0)"
>
GET STARTED
</a>
</div>
<div class="bottom-shape">
<svg
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 350 112.35"
>
<defs>
<style>
.color-1 {
fill: #2bdbdc;
isolation: isolate;
}
.cls-1 {
opacity: 0.1;
}
.cls-2 {
opacity: 0.2;
}
.cls-3 {
opacity: 0.4;
}
.cls-4 {
opacity: 0.6;
}
</style>
</defs>
<title>bottom-part1</title>
<g>
<g data-name="Group 747">
<path
data-name="Path 294"
class="cls-1 color-1"
d="M0,24.21c120-55.74,214.32,2.57,267,0S349.18,7.4,349.18,7.4V82.35H0Z"
transform="translate(0 0)"
/>
<path
data-name="Path 297"
class="cls-2 color-1"
d="M350,34.21c-120-55.74-214.32,2.57-267,0S.82,17.4.82,17.4V92.35H350Z"
transform="translate(0 0)"
/>
<path
data-name="Path 296"
class="cls-3 color-1"
d="M0,44.21c120-55.74,214.32,2.57,267,0S349.18,27.4,349.18,27.4v74.95H0Z"
transform="translate(0 0)"
/>
<path
data-name="Path 295"
class="cls-4 color-1"
d="M349.17,54.21c-120-55.74-214.32,2.57-267,0S0,37.4,0,37.4v74.95H349.17Z"
transform="translate(0 0)"
/>
</g>
</g>
</svg>
</div>
</div>
<!-- single pricing -->
</div>
</div>
<!-- row -->
</div>
<!-- container -->
</section>
<!--====== PRICING STYLE ONE ENDS ======-->/* ===== Buttons Css ===== */
.pricing-style-one .primary-btn {
background: var(--primary);
color: var(--white);
box-shadow: var(--shadow-2);
}
.pricing-style-one .active.primary-btn, .pricing-style-one .primary-btn:hover, .pricing-style-one .primary-btn:focus {
background: var(--primary-dark);
color: var(--white);
box-shadow: var(--shadow-4);
}
.pricing-style-one .deactive.primary-btn {
background: var(--gray-4);
color: var(--dark-3);
pointer-events: none;
}
/*===== PRICING STYLE ONE =====*/
.pricing-one {
padding: 100px 0;
}
.pricing-style-one {
box-shadow: var(--shadow-4);
padding: 45px 30px;
border-radius: 8px;
position: relative;
z-index: 1;
overflow: hidden;
background-color: var(--white);
margin-top: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.pricing-style-one {
padding: 35px 30px;
}
}
.pricing-style-one .sub-title {
font-size: 16px;
color: var(--black);
position: relative;
padding: 6px 20px;
display: inline-block;
border: 2px solid var(--primary);
border-radius: 30px;
}
.pricing-style-one .price {
display: block;
font-size: 55px;
font-weight: 600;
line-height: 80px;
margin-top: 25px;
color: var(--black);
}
@media (max-width: 767px) {
.pricing-style-one .price {
font-size: 45px;
margin-top: 16px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.pricing-style-one .price {
font-size: 50px;
margin-top: 20px;
}
}
.pricing-style-one .year {
color: var(--dark-3);
margin-top: 3px;
}
.pricing-style-one .pricing-list {
margin-top: 40px;
}
.pricing-style-one .pricing-list li {
color: var(--dark-3);
margin-top: 16px;
}
.pricing-style-one .pricing-list li i {
color: var(--primary);
margin-right: 8px;
}
.pricing-style-one .pricing-btn {
margin-top: 42px;
}
.pricing-style-one .bottom-shape {
position: absolute;
bottom: -20px;
left: 0;
width: 101%;
z-index: -1;
}Pricing Style 2
Pricing Style 3
Pricing Style 4
Pricing Style 5
Pricing Style 6
Pricing Style 7
Pricing Style 8
Pricing Style 9
Pricing Style 10
Pricing Style 11
Pricing Style 12
Pricing Style 13
Pricing Style 14
Pricing Style 15
