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

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

Scroll Animation
Scroll Animation

Author:
Rami AlAjo

8 months ago

2.3k

v.4.6
User Profile Card with Social Icons using Bootstrap 5 (without connect button)

Author:
Ranadhir Debnath

6 months ago

2.6k

v.5.3
Product card component using Bootstrap 5

Author:
Mateo Rojas

10 months ago

2k

v.5.3
Card Layout
Using masonry in cards layout

Author:
almounkez

9 months ago

3.2k

v.5.3
User Profile Card with Bootstrap
How to Use: Replace Image URL: Update the src attribute of the img tag to the actual URL of the user’s image. Update Text: Change the text inside the h5 and p elements to reflect the user’s actual name and biography

Author:
zobaidul kaziex

1 year ago

2.4k

v.4.6
Music speakers status

Author:
Jonathan

5 months ago

690

v.5.3
Sound Board
Sound Board

Author:
Rami AlAjo

8 months ago

1.1k

v.4.6
Pricing Cards

Author:
Anonymous

11 months ago

4.7k

v.5.3
Split Landing Page
Split Landing Page

Author:
Rami AlAjo

8 months ago

1.2k

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

Author:
Jimmy Mercury

9 months ago

1.4k

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

v.4.6
Product Modal with JS

Author:
java stories story

1 month ago

439

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent