→ 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

326

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

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

4 months ago

1.4k

v.4.6
Pricing card
Product pricing card made with bootstrap 5

Author:
Omar Khaled

1 month ago

122

v.5.3
Product card component using Bootstrap 5

Author:
Mateo Rojas

1 month ago

149

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

4 months ago

257

v.4.6
Pricing cards

Author:
Prajwal Hallale

10 months ago

367

v.5.3
Card Layout
Using masonry in cards layout

Author:
almounkez

4 weeks ago

184

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

Author:
Juan Martinez

6 months ago

1.5k

v.5.3
Bootstrap Product Card

Author:
Anonymous

6 months ago

545

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

Author:
Sofia Petrova

6 months ago

434

v.5.3
Glowing Card
glowing effect and smooth hover animation

Author:
Prajwal Hallale

10 months ago

556

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

Author:
Jimmy Mercury

2 weeks ago

116

v.5.3
minimal pricing cards example

Author:
Anonymous

1 month ago

98

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent