→ 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.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

addadfadadfadfadf
adfadfadf

Author:
Pranjal Adhikari

2 months ago

301

v.4.6
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

9 months ago

3.1k

v.5.3
Product Card with Modal

Author:
java stories story

2 weeks ago

517

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

Author:
Sofia Petrova

1 year ago

1.8k

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

Author:
Mason Ashford

9 months ago

809

v.5.3
for me
A modern and visually appealing card component with a gradient background and hover effect.

Author:
Jimmy Mercury

8 months ago

1.3k

v.5.3
Expanding Cards
Expanding Cards

Author:
Rami AlAjo

6 months ago

2.8k

v.4.6
Card Layout
Using masonry in cards layout

Author:
almounkez

8 months ago

2.9k

v.5.3
Glowing Card
glowing effect and smooth hover animation

Author:
Prajwal Hallale

1 year ago

2.5k

v.5.3
Product card component using Bootstrap 5

Author:
Mateo Rojas

8 months ago

1.7k

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.3k

v.4.6
Beautiful Pricing Cards

Author:
Anonymous

11 months ago

1.4k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent