→ zobaidul kaziex
→ Pricing Page with Bootstrap and Icons

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.

This bootstrap css example is contributed by zobaidul kaziex, on 05-Sep-2024. Component is made with bootstrap css v.4.6. It is responsive. similar terms for this example are Service rates, Subscription plans

Tags: Card Pricing

Author zobaidul kaziex

2.1k

v.4.6

Fork Fullscreen

<section class="container my-5">
        <h2 class="text-center mb-4">Our Pricing Plans</h2>
        <div class="row text-center">
            
            <div class="col-md-4 p-5">
                <div class="pricing-card free">
                    <i class="fas fa-star fa-3x text-success"></i>
                    <h3>Free</h3>
                    <div class="price">$0 <small>/ month</small></div>
                    <ul class="features">
                        <li><i class="fas fa-check-circle"></i> Basic Features</li>
                        <li><i class="fas fa-check-circle"></i> 5 GB Storage</li>
                        <li><i class="fas fa-times-circle"></i> Premium Support</li>
                    </ul>
                    <a href="#" class="btn btn-success">Sign Up</a>
                </div>
            </div>
            
            <div class="col-md-4 p-5">
                <div class="pricing-card gold">
                    <i class="fas fa-star fa-3x text-warning"></i>
                    <h3>Gold</h3>
                    <div class="price">$29 <small>/ month</small></div>
                    <ul class="features">
                        <li><i class="fas fa-check-circle"></i> Advanced Features</li>
                        <li><i class="fas fa-check-circle"></i> 50 GB Storage</li>
                        <li><i class="fas fa-check-circle"></i> Priority Support</li>
                    </ul>
                    <a href="#" class="btn btn-warning text-dark">Sign Up</a>
                </div>
            </div>
            
            <div class="col-md-4 p-5">
                <div class="pricing-card platinum">
                    <i class="fas fa-star fa-3x text-secondary"></i>
                    <h3>Platinum</h3>
                    <div class="price">$99 <small>/ month</small></div>
                    <ul class="features">
                        <li><i class="fas fa-check-circle"></i> All Features</li>
                        <li><i class="fas fa-check-circle"></i> 200 GB Storage</li>
                        <li><i class="fas fa-check-circle"></i> 24/7 Support</li>
                    </ul>
                    <a href="#" class="btn btn-secondary text-white">Sign Up</a>
                </div>
            </div>
        </div>
    </section>

More Examples

skill info

Author:
Gana JNsksk

3 months ago

325

v.4.6
Product Card with Modal

Author:
java stories story

11 months ago

2.6k

v.5.3
contact us page
do not copy

Author:
Fitar Ahmed

3 months ago

783

v.4.6
Pricing Cards with Hover Effects
Clean and elegant pricing comparison component with Bootstrap 5.3

Author:
Isaac Winslow

1 year ago

2.1k

v.5.3
Our Clients

Author:
Gana JNsksk

3 months ago

583

v.4.6
Featured Product Card

Author:
Prajwal Hallale

2 years ago

3.7k

v.5.3
E-Commarce

Author:
Anonymous

2 weeks ago

107

v.5.3
Personal Portfolio About Section

Author:
Creative Araf

1 month ago

254

v.5.3
E- Commarce full website

Author:
Zahid Hasan Riyad

2 weeks ago

129

v.5.3
Restaurant Reservation section

Author:
Creative Araf

1 month ago

99

v.5.3
Work Experience Section

Author:
Tanvir fahad

3 months ago

441

v.4.6
Pricing cards

Author:
Prajwal Hallale

2 years ago

2.4k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent