Categories
Bootstrap Examples

Creating a Simple Pricing Table Using Bootstrap 5 Grid

Bootstrap 5 Pricing Table Example
Bootstrap 5 Pricing Table Example

Creating a Simple Pricing Table using Bootstrap 5 Grid will give you overview and confidence to properly understand and use Bootstrap 5 Grid. Pricing Table is one of the most widely used Component in any SaaS website. You have to show different pricing models to demonstrate how different packages could be subscribed or utilized. Let’s get dive into the world of Web development and the Frontend development with HTML/CSS. Specifically, we are talking about the Bootstrap 5 framework.

Start with Fresh Bootstrap 5 template

First of all start with a fresh bootstrap 5 template or include the bootstrap 5 into your HTML file with the global CDN. You can check out the different Bootstrap installation methods from their official documentation page. Here is what we get as a starting template from the official Website. 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>Code language: HTML, XML (xml)

Create a Basic Bootstrap 5 Grid

Now let’s create a Basic Grid Structure to be used as our Pricing Plan. Let’s assume we are including three kind of Plans here.

  • Basic Plan
  • Standard Plan
  • Premium Plan

So, it is very clear that we have to create a 3 column grid here. We can create a basic 3 column grid in Bootstrap 5 as follows. This example is taken from the official Bootstrap 5 Grid system Documentation. 

<div class="container my-5">
  <div class="row text-center">
    <div class="col">
      Column 1
    </div>
    <div class="col">
      Column 2
    </div>
    <div class="col">
      Column 3
    </div>
  </div>
</div>Code language: HTML, XML (xml)

We create a simple Container with margin on y axis of 5. Inside that container we will create a row. In this row we used the class text-center to make our text to be centered align. Inside that simple 3 columns with class col.

Create Pricing Plan Cards

Now we will create the Pricing Plan Cards inside these three columns. We will be using following classes for this,

  • col-md-4 mb-4: This class is used to define a column that spans 4 columns on medium devices and has a bottom margin of 4.
  • card shadow-sm: This class is used to create a card element with a slight shadow effect.
  • card-header bg-primary text-white: This class is used to create a card header with a primary background color and white text.
  • card-body: This class is used to define the content area of the card.
  • card-title pricing-card-title: This class is used to style the title of the pricing card.
  • text-muted: This class is used to apply a muted color to the text.
  • list-unstyled mt-3 mb-4: This class is used to create an unstyled list with a top margin of 3 and a bottom margin of 4.
  • btn btn-lg btn-outline-primary: This class is used to create a large outline button with a primary color.

Based on Above mentioned classes the card code for a basic plan will look like this. 

 <!-- Basic Plan -->
            <div class="col-md-4 mb-4">
                <div class="card shadow-sm">
                    <div class="card-header bg-primary text-white">
                        <h4>Basic Plan</h4>
                    </div>
                    <div class="card-body">
                        <h3 class="card-title pricing-card-title">$9.99 <small class="text-muted">/ month</small></h3>
                        <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="btn btn-lg btn-outline-primary">Subscribe</button>
                    </div>
                </div>
            </div>
Code language: HTML, XML (xml)

Final Code for Pricing Tables

Now that we have completed our Bootstrap 5 grid structure for 3 column layout as well as the basic Card for our Pricing Table, we can easily combine them together to make them finalized Pricing Table. Here is our final complete code. 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Simple Pricing Table</title>
  </head>
  <body>
    <h1>Simple Bootstrap 5 Pricing Table Example 01</h1>

 
       

    <div class="container my-5">
        <div class="row text-center">
            <!-- Basic Plan -->
            <div class="col-md-4 mb-4">
                <div class="card shadow-sm">
                    <div class="card-header bg-primary text-white">
                        <h4>Basic Plan</h4>
                    </div>
                    <div class="card-body">
                        <h3 class="card-title pricing-card-title">$9.99 <small class="text-muted">/ month</small></h3>
                        <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="btn btn-lg btn-outline-primary">Subscribe</button>
                    </div>
                </div>
            </div>
            <!-- Standard Plan -->
            <div class="col-md-4 mb-4">
                <div class="card shadow-sm">
                    <div class="card-header bg-success text-white">
                        <h4>Standard Plan</h4>
                    </div>
                    <div class="card-body">
                        <h3 class="card-title pricing-card-title">$19.99 <small class="text-muted">/ month</small></h3>
                        <ul class="list-unstyled mt-3 mb-4">
                            <li>50 users included</li>
                            <li>10 GB of storage</li>
                            <li>Priority email support</li>
                            <li>Help center access</li>
                        </ul>
                        <button type="button" class="btn btn-lg btn-outline-success">Subscribe</button>
                    </div>
                </div>
            </div>
            <!-- Premium Plan -->
            <div class="col-md-4 mb-4">
                <div class="card shadow-sm">
                    <div class="card-header bg-danger text-white">
                        <h4>Premium Plan</h4>
                    </div>
                    <div class="card-body">
                        <h3 class="card-title pricing-card-title">$29.99 <small class="text-muted">/ month</small></h3>
                        <ul class="list-unstyled mt-3 mb-4">
                            <li>Unlimited users</li>
                            <li>100 GB of storage</li>
                            <li>Phone & email support</li>
                            <li>Help center access</li>
                        </ul>
                        <button type="button" class="btn btn-lg btn-outline-danger">Subscribe</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>Code language: HTML, XML (xml)

And here is how It looks like.

Simple Bootstrap 5 Pricing Table Example HTML/CSS
Simple Bootstrap 5 Pricing Table Example

Customizing the Layout

Now that we have our pricing table we can easily change the number of columns or pricing details and/or color schemes by adjusting the classes and values in the HTML structure. We can add CSS to style specific elements further if we want.

By Abdul Rehman

My name is Abdul Rehman and I love to do Reasearch in Embedded Systems, Artificial Intelligence, Computer Vision and Engineering related fields. With 10+ years of experience in Research and Development field in Embedded systems I touched lot of technologies including Web development, and Mobile Application development. Now with the help of Social Presence, I like to share my knowledge and to document everything I learned and still learning.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.