→ Anonymous
→ Pricing Cards

Pricing Cards

This bootstrap css example is contributed by Anonymous, on 02-Nov-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are Service rates, Subscription plans

Tags: Pricing

Author Anonymous

149

v.5.3

Fork Fullscreen

<div class="bg-light">
    <div class="container py-5">
        <div class="row text-center mb-5">
            <div class="col">
                <h2 class="display-4 fw-bold">Choose Your Plan</h2>
                <p class="text-muted">Select the perfect plan for your needs</p>
            </div>
        </div>
        <div class="row row-cols-1 row-cols-md-3 g-4">
            
            <div class="col">
                <div class="card h-100 pricing-card shadow-sm">
                    <div class="card-body p-5">
                        <h5 class="card-title text-muted text-uppercase mb-4">Starter</h5>
                        <h1 class="display-5 mb-4">$19<small class="text-muted fw-light">/mo</small></h1>
                        <ul class="list-unstyled feature-list">
                            <li><i class="bi bi-check2 text-primary me-2"></i>5 Projects</li>
                            <li><i class="bi bi-check2 text-primary me-2"></i>10GB Storage</li>
                            <li><i class="bi bi-check2 text-primary me-2"></i>Basic Support</li>
                        </ul>
                        <button class="btn btn-outline-primary btn-lg w-100 mt-4">Get Started</button>
                    </div>
                </div>
            </div>

<div class="col">
                <div class="card h-100 pricing-card shadow position-relative">
                    <span class="badge gradient-custom text-white popular-badge px-4 py-2">Popular</span>
                    <div class="card-body p-5">
                        <h5 class="card-title text-primary text-uppercase mb-4">Professional</h5>
                        <h1 class="display-5 mb-4">$49<small class="text-muted fw-light">/mo</small></h1>
                        <ul class="list-unstyled feature-list">
                            <li><i class="bi bi-check2 text-primary me-2"></i>15 Projects</li>
                            <li><i class="bi bi-check2 text-primary me-2"></i>50GB Storage</li>
                            <li><i class="bi bi-check2 text-primary me-2"></i>Priority Support</li>
                            <li><i class="bi bi-check2 text-primary me-2"></i>Advanced Features</li>
                        </ul>
                        <button class="btn gradient-custom text-white btn-lg w-100 mt-4">Get Started</button>
                    </div>
                </div>
            </div>

<div class="col">
                <div class="card h-100 pricing-card shadow-sm">
                    <div class="card-body p-5">
                        <h5 class="card-title text-muted text-uppercase mb-4">Enterprise</h5>
                        <h1 class="display-5 mb-4">$99<small class="text-muted fw-light">/mo</small></h1>
                        <ul class="list-unstyled feature-list">
                            <li><i class="bi bi-check2 text-primary me-2"></i>Unlimited Projects</li>
                            <li><i class="bi bi-check2 text-primary me-2"></i>1TB Storage</li>
                            <li><i class="bi bi-check2 text-primary me-2"></i>24/7 Support</li>
                            <li><i class="bi bi-check2 text-primary me-2"></i>Custom Features</li>
                        </ul>
                        <button class="btn btn-outline-primary btn-lg w-100 mt-4">Get Started</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

Simple pricing plan cards
3 pricing plan cards

Author:
Anonymous

8 months ago

260

v.4.6
Pricing Cards
Three pricing tiers (Basic, Pro, and Enterprise) using Bootstrap's card component.

Author:
Sofia Petrova

5 months ago

297

v.5.3
Pricing cards

Author:
Prajwal Hallale

9 months ago

297

v.5.3
Premium Gradient Pricing Card
An eye-catching subscription component with interactive hover effects and clear feature presentation

Author:
Mason Ashford

1 month ago

94

v.5.3
Pricing Card
with the most popular tag

Author:
Sofia Petrova

5 months ago

334

v.5.3
Pricing card
Product pricing card made with bootstrap 5

Author:
Omar Khaled

1 week ago

45

v.5.3
Minimal pricing cards

Author:
Sofia Petrova

5 months ago

282

v.5.3
Beautiful Pricing Cards

Author:
Anonymous

2 months ago

200

v.5.3
Professional Bootstrap Pricing Table
Beautiful pricing component built with Bootstrap 5.3, featuring interactive hover effects, mobile-responsive layout, and professional design elements.

Author:
Mason Ashford

1 month ago

165

v.5.3
Simple Pricing Card Component

Author:
Anonymous

2 months ago

153

v.5.3
Animated Pricing Card with Bootstrap 5

Author:
Reza Farhadi

3 months ago

198

v.5.3
minimal pricing cards example

Author:
Anonymous

6 days ago

26

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent