Pricing Table Section

431 ViewsFreeFrontend.dev

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>

Related Code Examples

Pricing Table Example

This pricing table example gives you a great way to showcase the different plans you offer, allowing potential customers to […]

2 Plan Pricing Table

This code snippet contains a pricing table with two plans, designed for Bootstrap. It includes a list of features for […]

Single Plan Pricing Table

This code snippet from FreeFrontend.dev provides a single plan pricing table for showcasing a single product or service. The table […]

Pricing Table Page Block

This code snippet provides a page block for creating a pricing table with 4 plans, each with their own list […]

Pricing Table Section

This code snippet is a great choice for quickly and easily creating a pricing table section for your website. It […]

Pricing Table with Images

This code snippet from FreeFrontend.dev provides an easy-to-use method to create a pricing table with 3 plans. Each plan includes […]