Bootstrap - Pricing Demo

What is Pricing?

Before we dive into creating a pricing demo using Bootstrap, let's take a moment to understand what pricing actually means in the context of web design and business.

Bootstrap-Pricing Demo

Pricing is a crucial element of any product or service offering. It's the way businesses communicate the value of their offerings to potential customers. In web design, a pricing section or page is where you showcase different plans or packages, typically in a clear, comparative format.

Think of it like a menu at a restaurant. You want customers to easily see what's available and at what cost, so they can make an informed decision. That's exactly what we're going to create with Bootstrap!

Why Use Bootstrap for Pricing?

Bootstrap is a powerful front-end framework that makes creating responsive, professional-looking websites a breeze. It's especially useful for pricing sections because:

It offers pre-designed components that are perfect for displaying pricing information.
It's responsive out of the box, meaning your pricing section will look great on all devices.
It's customizable, allowing you to match your brand's look and feel.

Now, let's roll up our sleeves and start building our pricing demo!

Setting Up the Bootstrap Environment

First things first, we need to set up our Bootstrap environment. Don't worry if this sounds complicated – it's actually quite simple!

Create a new HTML file and paste the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Pricing Demo</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- Your content will go here -->

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

This sets up a basic HTML structure and includes Bootstrap's CSS and JavaScript files from a CDN (Content Delivery Network). It's like laying the foundation for our house – now we're ready to start building!

Creating the Pricing Section

Now, let's create our pricing section. We'll use Bootstrap's card component to create three pricing tiers: Basic, Pro, and Enterprise.

Add the following code inside the <body> tags:

<div class="container py-5">
    <h1 class="text-center mb-5">Our Pricing Plans</h1>
    <div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
        <div class="col">
            <div class="card mb-4 rounded-3 shadow-sm">
                <div class="card-header py-3">
                    <h4 class="my-0 fw-normal">Basic</h4>
                </div>
                <div class="card-body">
                    <h1 class="card-title pricing-card-title">$0<small class="text-muted fw-light">/mo</small></h1>
                    <ul class="list-unstyled mt-3 mb-4">
                        <li>10 users included</li>
                        <li>2 GB of storage</li>
                        <li>Email support</li>
                        <li>Help center access</li>
                    </ul>
                    <button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign up for free</button>
                </div>
            </div>
        </div>
        <!-- Repeat this structure for Pro and Enterprise plans -->
    </div>
</div>

Let's break this down:

We're using a container to center our content and add some padding.
The row and col classes create a responsive grid system.
Each pricing tier is represented by a card component.
We use Bootstrap's utility classes like text-center, mb-4, etc., to style our elements without writing custom CSS.

Customizing the Appearance

Bootstrap is great out of the box, but let's add some custom touches to make our pricing demo pop!

Add this <style> tag in the <head> section:

<style>
    .pricing-card-title {
        font-size: 2.5rem;
    }
    .card-header {
        background-color: #f8f9fa;
    }
    .btn-outline-primary:hover {
        background-color: #007bff;
        color: white;
    }
</style>

This custom CSS will:

Make the price larger
Give the card header a light background
Change the button color on hover

Adding Interactivity

Let's add a little interactivity to our pricing demo. We'll make the "Pro" plan stand out when hovered over.

Add this JavaScript at the end of your <body> tag:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const proCard = document.querySelectorAll('.card')[1];
        proCard.addEventListener('mouseover', function() {
            this.style.transform = 'scale(1.05)';
            this.style.transition = 'transform 0.3s ease';
        });
        proCard.addEventListener('mouseout', function() {
            this.style.transform = 'scale(1)';
        });
    });
</script>

This script will slightly enlarge the "Pro" card when the mouse hovers over it, creating a subtle but engaging effect.

Responsive Design

One of the best things about Bootstrap is its built-in responsiveness. Our pricing demo will automatically adjust to look great on all screen sizes. However, we can enhance this further.

Add these classes to your row div:

<div class="row row-cols-1 row-cols-md-3 mb-3 text-center g-4">

The g-4 class adds gutters between our columns, and row-cols-1 row-cols-md-3 ensures that on small screens, our cards stack vertically, while on medium screens and larger, they display in three columns.

Conclusion

Congratulations! You've just created a professional-looking pricing demo using Bootstrap. Let's recap what we've learned:

We set up a Bootstrap environment.
We created a responsive pricing section using Bootstrap's grid and card components.
We customized the appearance with some simple CSS.
We added interactivity with JavaScript.
We ensured our design is responsive and looks great on all devices.

Remember, practice makes perfect. Try modifying this demo – change colors, add more tiers, or include different features. The more you play with Bootstrap, the more comfortable you'll become with its powerful features.

Happy coding, and may your pricing demos always convert!

Method	Description
Setting Up Bootstrap	Include Bootstrap CSS and JS files in your HTML
Creating Pricing Cards	Use Bootstrap's card component to display pricing tiers
Responsive Grid	Utilize Bootstrap's grid system for responsive layout
Custom Styling	Add custom CSS to enhance Bootstrap's default styles
Interactivity	Use JavaScript to add hover effects and animations
Responsive Design	Ensure layout adjusts for different screen sizes

Credits: Image by storyset

Previous Tutorial:

Bootstrap-Sign In Demo

Next Tutorial:

Bootstrap-Checkout Demo