Bootstrap 5 Responsive Service Pricing Table Block
Bootstrap 5 Responsive Service Pricing Table Block
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Bootstrap 5 Service Pricing Table Block</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<section class="py-5">
<div class="container">
<div class="row justify-content-center text-center mb-2 mb-lg-4">
<div class="col-12 col-lg-8 col-xxl-7 text-center mx-auto">
<span class="text-muted">Pricing Table</span>
<h2 class="display-5 fw-bold">Our Pricing</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta harum ipsum venenatis metus sem veniam eveniet aperiam suscipit.</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="card text-center border-0">
<div class="card-body py-5">
<div class="mb-3 mx-auto">
<svg class="bi bi-rocket" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M8 8c.828 0 1.5-.895 1.5-2S8.828 4 8 4s-1.5.895-1.5 2S7.172 8 8 8Z"></path>
<path d="M11.953 8.81c-.195-3.388-.968-5.507-1.777-6.819C9.707 1.233 9.23.751 8.857.454a3.495 3.495 0 0 0-.463-.315A2.19 2.19 0 0 0 8.25.064.546.546 0 0 0 8 0a.549.549 0 0 0-.266.073 2.312 2.312 0 0 0-.142.08 3.67 3.67 0 0 0-.459.33c-.37.308-.844.803-1.31 1.57-.805 1.322-1.577 3.433-1.774 6.756l-1.497 1.826-.004.005A2.5 2.5 0 0 0 2 12.202V15.5a.5.5 0 0 0 .9.3l1.125-1.5c.166-.222.42-.4.752-.57.214-.108.414-.192.625-.281l.198-.084c.7.428 1.55.635 2.4.635.85 0 1.7-.207 2.4-.635.067.03.132.056.196.083.213.09.413.174.627.282.332.17.586.348.752.57l1.125 1.5a.5.5 0 0 0 .9-.3v-3.298a2.5 2.5 0 0 0-.548-1.562l-1.499-1.83ZM12 10.445v.055c0 .866-.284 1.585-.75 2.14.146.064.292.13.425.199.39.197.8.46 1.1.86L13 14v-1.798a1.5 1.5 0 0 0-.327-.935L12 10.445ZM4.75 12.64C4.284 12.085 4 11.366 4 10.5v-.054l-.673.82a1.5 1.5 0 0 0-.327.936V14l.225-.3c.3-.4.71-.664 1.1-.861.133-.068.279-.135.425-.199ZM8.009 1.073c.063.04.14.094.226.163.284.226.683.621 1.09 1.28C10.137 3.836 11 6.237 11 10.5c0 .858-.374 1.48-.943 1.893C9.517 12.786 8.781 13 8 13c-.781 0-1.517-.214-2.057-.607C5.373 11.979 5 11.358 5 10.5c0-4.182.86-6.586 1.677-7.928.409-.67.81-1.082 1.096-1.32.09-.076.17-.135.236-.18Z"></path>
<path d="M9.479 14.361c-.48.093-.98.139-1.479.139-.5 0-.999-.046-1.479-.139L7.6 15.8a.5.5 0 0 0 .8 0l1.079-1.439Z"></path></svg>
</div>
<h5 class="fw-bold">Standard</h5>
<div class="display-3 fw-bold mt-4 text-primary">
$19
</div>
<ul class="list-unstyled mt-4">
<li class="mb-3">1 Domain</li>
<li class="mb-3">1,000 Visitors</li>
<li class="mb-3">24/7 Support</li>
</ul><a class="btn btn-primary btn-lg mt-4" href="">Learn more</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card text-center border-0">
<div class="card-body py-5">
<div class="mb-3 mx-auto">
<svg class="bi bi-magic" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"></path></svg>
</div>
<h5 class="fw-bold">Plus</h5>
<div class="display-3 fw-bold mt-4 text-primary">
$26
</div>
<ul class="list-unstyled mt-4">
<li class="mb-3">10 Domains</li>
<li class="mb-3">10,000 Visitors</li>
<li class="mb-3">24/7 Support</li>
</ul><a class="btn btn-primary btn-lg mt-4" href="">Learn more</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card text-center border-0">
<div class="card-body bg-light py-5">
<div class="mb-3 mx-auto">
<svg class="bi bi-buildings" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022ZM6 8.694 1 10.36V15h5V8.694ZM7 15h2v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.309l-7 3.5V15Z"></path>
<path d="M2 11h1v1H2v-1Zm2 0h1v1H4v-1Zm-2 2h1v1H2v-1Zm2 0h1v1H4v-1Zm4-4h1v1H8V9Zm2 0h1v1h-1V9Zm-2 2h1v1H8v-1Zm2 0h1v1h-1v-1Zm2-2h1v1h-1V9Zm0 2h1v1h-1v-1ZM8 7h1v1H8V7Zm2 0h1v1h-1V7Zm2 0h1v1h-1V7ZM8 5h1v1H8V5Zm2 0h1v1h-1V5Zm2 0h1v1h-1V5Zm0-2h1v1h-1V3Z"></path></svg>
</div>
<h5 class="fw-bold">Pro</h5>
<div class="display-3 fw-bold mt-4 text-primary">
$34
</div>
<ul class="list-unstyled mt-4">
<li class="mb-3">Unlimited Domains</li>
<li class="mb-3">Unlimited Visitors</li>
<li class="mb-3">24/7 Support</li>
</ul><a class="btn btn-primary btn-lg mt-4" href="">Learn more</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card text-center border-0">
<div class="card-body py-5">
<div class="mb-3 mx-auto">
<svg class="bi bi-graph-up-arrow" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h1v15h15v1H0V0Zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5Z" fill-rule="evenodd"></path></svg>
</div>
<h5 class="fw-bold">Ultimate</h5>
<div class="display-3 fw-bold mt-4 text-primary">
$49
</div>
<ul class="list-unstyled mt-4">
<li class="mb-3">Unmetered Domains</li>
<li class="mb-3">Unmetered Visitors</li>
<li class="mb-3">24/7 Support</li>
</ul><a class="btn btn-primary btn-lg mt-4" href="">Learn more</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-5">
<div class="container">
<div class="row justify-content-center text-center mb-2 mb-lg-4">
<div class="col-12 col-lg-8 col-xxl-7 text-center mx-auto">
<span class="text-muted">Pricing Table</span>
<h2 class="display-5 fw-bold">Our Pricing</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta harum ipsum venenatis metus sem veniam eveniet aperiam suscipit.</p>
</div>
</div>
<div class="card border-0 mb-3">
<div class="card-body bg-light text-center py-4">
<div class="row align-items-center">
<div class="col-md-3">
<h5 class="fw-bold mb-0">Basic</h5>
<div class="display-3 fw-bold mt-1">
$19
</div>
<div>
Monthly
</div>
</div>
<div class="col-md-3">
<ul class="list-unstyled mt-4 mt-md-3">
<li class="mb-3">1 Domain</li>
<li class="mb-3">1,000 Visitors</li>
<li class="mb-3">24/7 Support</li>
</ul>
</div>
<div class="col-md-3">
<ul class="list-unstyled mt-3">
<li class="mb-3">Free Control Panel</li>
<li class="mb-3">Free 1-Click Installs</li>
<li class="mb-3">Free Let's Encrypt</li>
</ul>
</div>
<div class="col-md-3">
<a class="btn btn-primary btn-lg" href="">Get Started</a>
</div>
</div>
</div>
</div>
<div class="card border-0 mb-3">
<div class="card-body bg-light text-center py-4">
<div class="row align-items-center">
<div class="col-md-3">
<h5 class="fw-bold mb-0">Standard</h5>
<div class="display-3 fw-bold mt-1 text-primary">
$26
</div>
<div>
Monthly
</div>
</div>
<div class="col-md-3">
<ul class="list-unstyled mt-4 mt-md-3">
<li class="mb-3">10 Domains</li>
<li class="mb-3">10,000 Visitors</li>
<li class="mb-3">24/7 Support</li>
</ul>
</div>
<div class="col-md-3">
<ul class="list-unstyled mt-3">
<li class="mb-3">Free Control Panel</li>
<li class="mb-3">Free 1-Click Installs</li>
<li class="mb-3">Free Let's Encrypt</li>
</ul>
</div>
<div class="col-md-3">
<a class="btn btn-primary btn-lg" href="">Get Started</a>
</div>
</div>
</div>
</div>
<div class="card border-0 mb-3">
<div class="card-body bg-light text-center py-4">
<div class="row align-items-center">
<div class="col-md-3">
<h5 class="fw-bold mb-0">Pro</h5>
<div class="display-3 fw-bold mt-1">
$34
</div>
<div>
Monthly
</div>
</div>
<div class="col-md-3">
<ul class="list-unstyled mt-4 mt-md-3">
<li class="mb-3">Unlimited Domains</li>
<li class="mb-3">Unlimited Visitors</li>
<li class="mb-3">24/7 Support</li>
</ul>
</div>
<div class="col-md-3">
<ul class="list-unstyled mt-3">
<li class="mb-3">Free Control Panel</li>
<li class="mb-3">Free 1-Click Installs</li>
<li class="mb-3">Free Let's Encrypt</li>
</ul>
</div>
<div class="col-md-3">
<a class="btn btn-primary btn-lg" href="">Get Started</a>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</body>
</html>
/* Doesn't require any CSS. */
//Doesn't require any JS.
This Bootstrap 5 snippet provides a modern and visually appealing component for showcasing your service's pricing tiers. It's designed to present plan details clearly and effectively, ensuring a compelling display across all devices.
Key Features
- Responsive Design: The pricing table adapts seamlessly to different screen sizes, ensuring optimal readability and presentation on desktops, tablets, and mobile devices.
- Clear Tier Presentation: Each pricing tier is structured to clearly articulate its features, price, and benefits, making it easy for users to compare plans. The layout also alternates to provide a more dynamic and engaging visual.
- Modern & Clean Styling: The design utilizes Bootstrap's clean and modern styling, with subtle icons and a clear call-to-action button for each plan.
- Customizable: Easily modify the appearance of the pricing cards, fonts, colors, and content using Bootstrap's extensive utility classes to match your brand.
Implementation
- Include Bootstrap 5: Ensure you have Bootstrap 5's CSS and JavaScript files linked in your project.
- Create the HTML Structure: Set up the basic HTML structure for the pricing table, using Bootstrap's grid system (row, col) to arrange individual pricing cards. The layout is divided into two sections for an organized display.
- Apply Bootstrap Classes: Utilize Bootstrap 5's CSS classes for styling, such as
container,card,card-body,text-center,mb-,p-, and responsive grid classes (col-md-4, col-lg-3). - Populate Content: Fill each pricing card with relevant content, including a compelling heading, a concise description of the features, the price, and an appropriate call-to-action button.
Latest Snippets
View All
Owl Carousel Responsive CSS-Only Team Section Showcase
Tailwind CSS Subscribe Container with Integrated Footer
Responsive Bootstrap 5 Detailed Features Section
Responsive CSS-Only Glassmorphism Login Form with background image
Responsive Tailwind CSS Hero Section and Adaptive Navbar
Responsive Bootstrap 5 Compact FAQ Accordion Display
Responsive CSS Only Services Section with Hover Effects
Responsive Tailwind CSS Team Members Display Showcase
Responsive Bootstrap 5 Clear Process Flow Component
Responsive Interactive Login & Register Form with CSS & JS Transitions
Developer-Focused Tailwind Hero with Live Sample Code Block
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
