Tags: knowledgebase

Create a three box responsive pricing table with details, costs and button links to redirect to the correct subscription form.

The code is created with bootstrap so the styling is built in.

Our Plans & Pricing

Review our various plans, features and pricing. There is something here for everyone!

Basic

$0/mo

Weekly newsletter
Member Discounts
Training Courses

Standard

$15/mo

Weekly Newsletters
Member Discounts
Intermediate Courses
5 Hours Tutoring

Premium

$29/mo

Weekly Newsletter
Member Discounts
Advanced Courses
Facebook Group Access

How to Add a Pricing Table Your Site

Open the edit screen for your site and click on in the WYSWIYG editor to switch off the rich text editor.
Copy and paste the code below.
Substitute each HEADER with the plan name.
Update the pricing with the cost of the plan.
Substitute each BENEFIT with a describer of the plan.
Substitute each BUTTON with the text to show on the button.
Each pricing 'card' header, benefit and button are identified with a prepended matching letter.

<div class="pricing-header p-3 pb-md-4 mx-auto text-center">
      <h1 class="display-4 fw-normal">PRICE HEADER</h1>
      <p class="fs-5 text-muted">PLAN TEXT DESCRIPTION</p>
    </div>
   <div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
      <div class="col my-2">
        <div class="card mb-4 h-100 rounded-3 shadow-sm">
          <div class="card-header py-3">
            <h4 class="my-0 fw-normal">A-HEADER</h4>
          </div>
          <div class="card-body d-flex flex-column">
            <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>A-BENEFIT</li>
              <li>A-BENEFIT</li>
              <li>A-BENEFIT</li>
              <li>A-BENEFIT</li>
            </ul>
            <button type="button" class="mt-auto w-100 btn btn-lg btn-outline-primary">
              A-BUTTON
            </button>
          </div>
        </div>
      </div>
      <div class="col my-2">
        <div class="card mb-4 h-100 rounded-3 shadow-sm">
          <div class="card-header py-3">
            <h4 class="my-0 fw-normal">B-HEADER</h4>
          </div>
          <div class="card-body d-flex flex-column">
            <h1 class="card-title pricing-card-title">
              $15
              <small class="text-muted fw-light">
                /mo
              </small></h1>
            <ul class="list-unstyled mt-3 mb-4">
              <li>B-BENEFIT</li>
              <li>B-BENEFIT</li>
              <li>B-BENEFIT</li>
              <li>B-BENEFIT</li>
            </ul>
            <button type="button" class="mt-auto w-100 btn btn-lg btn-primary">B-BUTTON</button>
          </div>
        </div>
      </div>
      <div class="col my-2">
        <div class="card h-100 mb-4 rounded-3 shadow-sm border-primary">
          <div class="card-header py-3 border-primary" style="color: #ffffff; background: #007bff;">
            <h4 class="my-0 fw-normal">C-HEADER</h4>
          </div>
          <div class="card-body d-flex flex-column">
            <h1 class="card-title pricing-card-title">
              $29
              <small class="text-muted fw-light">
                /mo
              </small></h1>
            <ul class="list-unstyled mt-3 mb-4">
              <li>C-BENEFIT</li>
              <li>C-BENEFIT</li>
              <li>C-BENEFIT</li>
              <li>C-BENEFIT</li>
            </ul>
            <button type="button" class="mt-auto w-100 btn btn-lg btn-primary">C-BUTTON</button>
          </div>
        </div>
      </div>
    </div>

Bootstrap Snippet: Pricing Table