→ 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

1.4k

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

Simple pricing plan cards
3 pricing plan cards

Author:
Anonymous

1 year ago

1.4k

v.4.6
Responsive Card Grid
A responsive grid of cards with hover effects

Author:
Prajwal Hallale

1 year ago

5.6k

v.5.3
Category Tab

Author:
java stories story

4 months ago

947

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 year ago

4.6k

v.5.3
Pricing Cards

Author:
Anonymous

1 year ago

5.8k

v.5.3
Featured Product Card

Author:
Prajwal Hallale

1 year ago

2.5k

v.5.3
Sign in form with bootstrap 5
Beautiful sign-in card with Bootstrap 5

Author:
Prajwal Hallale

1 year ago

8k

v.5.3
HTML and JavaScript for Product Showcase Page
JavaScript: Pagination Handling: The script fetches images based on the current page and updates the pagination controls dynamically. Product Cards: Each product is displayed as a card with an image, title, description, and price

Author:
zobaidul kaziex

1 year ago

1.7k

v.4.6
product list

Author:
java stories story

5 months ago

2.2k

v.5.3
addadfadadfadfadf
adfadfadf

Author:
Pranjal Adhikari

6 months ago

740

v.4.6
minimal pricing cards example

Author:
Anonymous

1 year ago

1.2k

v.5.3
Product Card
A product card layout for an e-commerce website with an image at the top

Author:
Juan Martinez

1 year ago

15.5k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent