Pricing Table Section


This code snippet is a great choice for quickly and easily creating a pricing table section for your website. It features three plans, stacked one on top of the other, that span the full width of the page. For each plan, there is a list of features and a call to action. The code is structured in a way that makes it easy to customize and adjust to your needs.

<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>
To top