Day 30: Creating a Responsive Pricing Page Layout with Bootstrap

Today, I explored how to create a simple yet effective pricing page layout using only Bootstrap components and utilities. The challenge was to build this layout without adding any custom CSS, relying solely on Bootstrap's powerful grid system, flex layout, and utility classes.

What I Learned

Bootstrap Grid & Flex Layout: The grid system in Bootstrap made it easy to structure the page, ensuring that the cards (pricing plans) are responsive and well-aligned across different screen sizes. I used col-sm-5 and col-md-3 classes to define the width of each card on small and medium screens.
Card Components: Bootstrap's card component is incredibly versatile. I used it to display each pricing plan, making sure to include a header for the plan name, a body for the price and features, and a button to sign up or contact for more information.
Utilities for Spacing: The mb-3 (margin-bottom), me-3 (margin-end), and text-center classes were essential for spacing and alignment, ensuring the layout looked clean and professional.
Responsive Design on Screen Sizes Up to "md" (≥ 768px): The layout looks great on screen sizes up to "md" (≥ 768px), with cards resizing and aligning perfectly to ensure a seamless experience across various devices. This responsiveness is key for providing a consistent user experience, regardless of the device used.

Check How the Pricing Page Adapts Seamlessly on Screens up to 'md' (≥ 768px)

Code Snippet

Here’s the code I used to create this layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Bootstrap Pricing Page</title>
</head>
<body>
    <h1 class="text-center">Pricing</h1>
    <p class="text-center">Please checkout the most effective payment models</p>
    <div class="row text-center justify-content-evenly">
        <!-- First Card: Free Plan -->
        <div class="card col-sm-5 col-md-3 mb-3 me-3">
          <div class="card-header">
            <h4>Free</h4>
          </div>
          <div class="card-body">
            <h1 class="card-title">$0/mo</h1>
            <ul class="list-unstyled">
              <li>10 Users included</li>
              <li>2GB of Cloud Space</li>
              <li>E-mail Support</li>
            </ul>
            <a href="#" class="btn btn-outline-primary">Sign up for free</a>
          </div>
        </div>

        <!-- Second Card: Pro Plan -->
        <div class="card col-sm-5 col-md-3 mb-3 me-3">
          <div class="card-header">
            <h4>Pro</h4>
          </div>
          <div class="card-body">
            <h1 class="card-title">$15 / mo</h1>
            <ul class="list-unstyled">
              <li>20 users included</li>
              <li>10 GB of storage</li>
              <li>Priority email support</li>
            </ul>
            <a href="#" class="btn btn-primary">Get started</a>
          </div>
        </div>

        <!-- Third Card: Enterprise Plan -->
        <div class="card col-sm-5 col-md-3 mb-3 me-3">
            <div class="card-header">
              <h4>Enterprise</h4>
            </div>
            <div class="card-body">
              <h1 class="card-title">$29 / mo</h1>
              <ul class="list-unstyled">
                <li>30 users included</li>
                <li>50 GB of storage</li>
                <li>Phone & email support</li>
              </ul>
              <a href="#" class="btn btn-primary">Contact Us</a>
            </div>
          </div>
      </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> 
</body>
</html>

Conclusion

This exercise reinforced the power of Bootstrap in creating responsive and visually appealing layouts without needing custom styles. Whether you're building a simple page or a complex application, Bootstrap provides the tools you need to make it look professional with minimal effort.

Feel free to use this code as a starting point for your projects, and let me know how it goes!