<section class="py-12 py-sm-24 py-md-32 bg-info-light">
<div class="container">
<div class="mw-6xl mx-auto">
<div class="row">
<div class="col-12 col-lg-6 mb-16 mb-lg-0">
<div class="mw-md mx-auto">
<h2 class="mb-24 mb-md-52" >Pick a plan</h2>
<p class="fw-semibold fs-8 mb-6" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elemen.</p>
<p class="text-secondary mb-0" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volut pat tempor condimentum commodo tincidunt sit dictumst. Eu placerat arcu at sem vitae eros, purus non, eu. Adipiscing vitae amet nunc volutpat sit. Enim eu integer duis arcu.</p>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="position-relative mw-md mx-auto"><img class="img-fluid position-absolute top-50 start-0 ms-n40 translate-middle-y" src="flaro-assets/images/pricing/gradient5.svg" alt=""/>
<div class="mw-md rounded-4 overflow-hidden shadow-lg position-relative z-10">
<div class="p-8 position-relative overflow-hidden"><img class="img-fluid position-absolute top-0 start-0 -bottom-2 opacity-25" src="flaro-assets/images/pricing/gradient.svg" alt="" style="min-width: 700px;"/>
<h6 class="fs-9 text-uppercase text-secondary mb-6" >Features included:</h6>
<ul class="list-unstyled">
<li class="mb-4">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg><span class="ms-2 fw-semibold" >3 Team Members</span>
</li>
<li class="mb-4">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg><span class="ms-2 fw-semibold" >1200+ UI Blocks</span>
</li>
<li class="mb-4">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg><span class="ms-2 fw-semibold" >10 GB Cloud Storage</span>
</li>
<li class="mb-4">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg><span class="ms-2 fw-semibold" >Individual Email Account</span>
</li>
<li>
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg><span class="ms-2 fw-semibold" >Premium Support</span>
</li>
</ul>
</div>
<div class="pt-8 px-8 pb-10 bg-white">
<div class="row mb-8 align-items-start justify-content-between">
<div class="col-12 col-sm mb-4 mb-sm-0">
<h6 class="fs-9 text-uppercase text-secondary mb-2" >Pro Package</h6>
<p class="fw-semibold mb-0" >Best for Startups & Small Businesses</p>
</div>
<div class="col-12 col-sm-auto"><span class="fs-4 fw-bold lh-sm" >$49</span><span class="fs-8 fw-bold text-secondary-dark lh-sm" >/mo</span><span class="d-block fw-medium text-secondary-dark" >Billed anually</span></div>
</div><a class="btn btn-primary w-100 shadow" href="#" >Start 14 days free trial</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Framework
Bootstrap
UI Library
All Libraries
Components
- About us 5
- Alert 85
- Application 63
- Banners 15
- Blog 93
- Breadcrumbs 4
- Call to action 113
- Careers 16
- Contact 52
- Content 62
- Cookies 53
- Download 5
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 58
- Features 160
- Footers 68
- Graphs 18
- HTTP codes 65
- Hero section 106
- How it works 53
- Logo clouds 89
- Modals 6
- Navbar 68
- Navigation (horizontal) 107
- Navigation (vertical) 6
- Newsletter 58
- Portfolio 39
- Pricing 58
- Projects 14
- Reviews 5
- Rich text 3
- Services 5
- Sign in / Sign up 99
- Stats 89
- Tables 57
- Team 56
- Testimonials 58
- Toasts 6
- Users 25
A well-designed price list determines the conversion rate. That's why in Shuffle Editor we give you access to very many variants of thoughtfully designed Bootstrap pricing components.
Each Bootstrap pricing component variant is a UI library component. We select the best designers to create our libraries, and the code underneath them is created by our in-house development team. Therefore, our libraries meet your needs, allowing you to create complete and functional Bootstrap UI templates.
Get access to all Bootstrap pricing components, code and our editor. Try the demo for free!
