Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.
@push('head')
<style>
body {
background-image: linear-gradient(180deg, #eee, #fff 100px, #fff);
}
.container {
max-width: 960px;
}
.pricing-header {
max-width: 700px;
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.b-example-divider {
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -.125em;
fill: currentColor;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
</style>
@endpush
<div class="container py-3">
<header>
<div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
<x-headline class="my-0 me-md-auto fw-normal" tag="h5" text="Company name"/>
<nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
@php
$example = [
[
'class' => 'me-3 py-2 text-dark text-decoration-none',
'text' => 'Features',
'href' => '#',
],
[
'class' => 'me-3 py-2 text-dark text-decoration-none',
'text' => 'Enterprise',
'href' => '#',
],
[
'class' => 'me-3 py-2 text-dark text-decoration-none',
'text' => 'Support',
'href' => '#',
],
[
'class' => 'py-2 text-dark text-decoration-none',
'text' => 'Pricing',
'href' => '#',
],
]
@endphp
@foreach($example as $item)
<x-link :all="$item"/>
@endforeach
</nav>
</div>
<div class="pricing-header p-3 pb-md-4 mx-auto text-center">
<x-headline class="display-4 fw-normal" text="Pricing" tag="h1"/>
<p class="fs-5 text-muted">
Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.
</p>
</div>
</header>
<main>
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
<div class="col">
<x-card class="mb-4 rounded-3 shadow-sm">
<x-slot name="header">
<x-headline class="my-0 font-weight-normal" text="Free"/>
</x-slot>
<x-slot name="body">
<x-headline tag="h1" class="pricing-card-title" text="$0 <small class='text-muted'>/ mo</small>"/>
<ul class="list-unstyled mt-3 mb-4">
<li>10 users included</li>
<li>2 GB of storage</li>
<li>Email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
</x-slot>
</x-card>
</div>
<div class="col">
<x-card class="mb-4 rounded-3 shadow-sm">
<x-slot name="header">
<x-headline class="my-0 font-weight-normal" text="Pro"/>
</x-slot>
<x-slot name="body">
<x-headline tag="h1" class="pricing-card-title" text="$15 <small class='text-muted'>/ mo</small>"/>
<ul class="list-unstyled mt-3 mb-4">
<li>20 users included</li>
<li>10 GB of storage</li>
<li>Priority email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
</x-slot>
</x-card>
</div>
<div class="col">
<x-card :all="[
'class' => 'mb-4 rounded-3 shadow-sm border-primary',
'header' => [
'headline' => [
'class' => 'my-0 font-weight-normal',
'text' => 'Enterprice'
]
],
'body' => [
'headline' => [
'tag' => 'h1',
'class' => 'pricing-card-title',
'text' => '$29 <small class=\'text-muted fw-light\'>/mo</small>'
]
]
]">
<x-slot name="body">
<ul class="list-unstyled mt-3 mb-4">
<li>30 users included</li>
<li>15 GB of storage</li>
<li>Phone and email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
</x-slot>
</x-card>
</div>
</div>
</main>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
<div class="row">
<div class="col-12 col-md">
<h5>Features</h5>
@php
$example = [
[
'class' => 'text-muted',
'text' => 'Cool stuff',
'href' => '#',
],
[
'class' => 'text-muted',
'text' => 'Random feature',
'href' => '#',
],
[
'class' => 'text-muted',
'text' => 'Team feature',
'href' => '#',
],
[
'class' => 'text-muted',
'text' => 'Stuff for developers',
'href' => '#',
],
[
'class' => 'text-muted',
'text' => 'Another one',
'href' => '#',
],
[
'class' => 'text-muted',
'text' => 'Last time',
'href' => '#',
],
]
@endphp
<ul class="list-unstyled">
@foreach($example as $item)
<li>
<x-link :all="$item"/>
</li>
@endforeach
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
@php
$example = [
[
'text' => 'Resource',
'href' => '#',
],
[
'text' => 'Resource name',
'href' => '#',
],
[
'text' => 'Another resource',
'href' => '#',
],
[
'text' => 'Final resource',
'href' => '#',
],
]
@endphp
<ul class="list-unstyled">
@foreach($example as $item)
<li>
<x-link :all="$item" class="text-muted"/>
</li>
@endforeach
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
@php
$example = [
[
'text' => 'Team',
'href' => '#',
],
[
'text' => 'Locations',
'href' => '#',
],
[
'text' => 'Privacy',
'href' => '#',
],
[
'text' => 'Terms',
'href' => '#',
],
]
@endphp
<ul class="list-unstyled">
@foreach($example as $item)
<li>
<x-link :all="$item" class="text-muted"/>
</li>
@endforeach
</ul>
</div>
</div>
</footer>
</div>