→ 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

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

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

Author:
Sofia Petrova

3 months ago

212

v.5.3
Beautiful Pricing Cards

Author:
Anonymous

1 month ago

104

v.5.3
Pricing cards

Author:
Prajwal Hallale

7 months ago

239

v.5.3
Pricing cards

Author:
Kemaya m

7 months ago

360

v.4.6
Simple pricing plan cards
3 pricing plan cards

Author:
Anonymous

7 months ago

221

v.4.6
Minimal pricing cards

Author:
Sofia Petrova

3 months ago

231

v.5.3
Animated Pricing Card with Bootstrap 5

Author:
Reza Farhadi

2 months ago

135

v.5.3
Simple Pricing Card Component

Author:
Anonymous

3 weeks ago

62

v.5.3
Pricing Card
with the most popular tag

Author:
Sofia Petrova

3 months ago

234

v.5.3
Pricing Page with Bootstrap and Icons
HTML: Navbar: Provides navigation links, including a link to the Pricing page. Pricing Section: Contains three columns, each representing a pricing plan with a card layout. Icons: Font Awesome icons are used for visual representation (e.g., stars and check circles). CSS: Card Styling: Adds border, shadow, and hover effects to the pricing cards. Plan-Specific Styles: Different border colors for each pricing plan (Free, Gold, Platinum). Button Styles: Different button colors to match the card styles. JavaScript: No custom JavaScript is required for this static pricing page, but you can add interactivity if needed. How to Use: Customize Content: Update the plan names, prices, features, and button actions as needed. Replace Icons: Choose different Font Awesome icons if desired by updating the <i> elements.

Author:
zobaidul kaziex

2 months ago

160

v.4.6
Search bar with search icon in bootstrap 5

Author:
Juniper

3 weeks ago

86

v.5.3
FAQ accordion
The accordion component is a vertically stacked set of items

Author:
Prajwal Hallale

7 months ago

807

v.5.3

Didn't find component you were looking for?

Search from 200+ componenent