How to create pricing table in bootstrap

BootstrapHow-ToBeginner · 4 min read

How to Create a Pricing Table in Bootstrap Quickly

To create a pricing table in Bootstrap, use the grid system to arrange card components side by side. Each card represents a pricing option with a header, price, features list, and a call-to-action button styled with Bootstrap classes.

📐

Syntax

A pricing table in Bootstrap typically uses the .container or .container-fluid for layout, .row to create horizontal groups, and .col classes to define columns. Inside each column, a .card component holds the pricing details.

.card-header: Title or plan name
.card-body: Contains price, features, and button
.btn: Bootstrap button for actions like 'Buy Now'

html

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <div class="card-header">Basic Plan</div>
        <div class="card-body">
          <h2>$9.99</h2>
          <ul>
            <li>Feature 1</li>
            <li>Feature 2</li>
          </ul>
          <button class="btn btn-primary">Buy Now</button>
        </div>
      </div>
    </div>
  </div>
</div>

Output

A single card with header 'Basic Plan', price '$9.99', two features listed, and a blue 'Buy Now' button inside a centered container.

💻

Example

This example shows a responsive pricing table with three plans side by side using Bootstrap 5. Each plan is a card with a header, price, features, and a button.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Pricing Table</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-5">
    <div class="row text-center">
      <div class="col-md-4 mb-4">
        <div class="card border-primary h-100">
          <div class="card-header bg-primary text-white">Basic</div>
          <div class="card-body">
            <h3 class="card-title">$9.99 / mo</h3>
            <ul class="list-unstyled mt-3 mb-4">
              <li>1 User</li>
              <li>10GB Storage</li>
              <li>Email Support</li>
            </ul>
            <button class="btn btn-primary">Sign Up</button>
          </div>
        </div>
      </div>
      <div class="col-md-4 mb-4">
        <div class="card border-success h-100">
          <div class="card-header bg-success text-white">Standard</div>
          <div class="card-body">
            <h3 class="card-title">$19.99 / mo</h3>
            <ul class="list-unstyled mt-3 mb-4">
              <li>5 Users</li>
              <li>50GB Storage</li>
              <li>Priority Email Support</li>
            </ul>
            <button class="btn btn-success">Sign Up</button>
          </div>
        </div>
      </div>
      <div class="col-md-4 mb-4">
        <div class="card border-warning h-100">
          <div class="card-header bg-warning text-dark">Premium</div>
          <div class="card-body">
            <h3 class="card-title">$29.99 / mo</h3>
            <ul class="list-unstyled mt-3 mb-4">
              <li>Unlimited Users</li>
              <li>150GB Storage</li>
              <li>Phone & Email Support</li>
            </ul>
            <button class="btn btn-warning text-dark">Sign Up</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A responsive page showing three colored pricing cards side by side with plan names, prices, features, and sign-up buttons.

⚠️

Common Pitfalls

Common mistakes when creating pricing tables in Bootstrap include:

Not using the grid system properly, causing cards to stack vertically on large screens.
Forgetting to add h-100 class to cards, which makes all cards equal height.
Using inline styles instead of Bootstrap classes, which reduces responsiveness.
Not including the Bootstrap CSS and JS files, so styles and components don't work.

html

<!-- Wrong: Cards stack vertically on large screens -->
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="card">Plan 1</div>
    </div>
    <div class="col-12">
      <div class="card">Plan 2</div>
    </div>
  </div>
</div>

<!-- Right: Use col-md-4 for three columns on medium+ screens -->
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="card">Plan 1</div>
    </div>
    <div class="col-md-4">
      <div class="card">Plan 2</div>
    </div>
  </div>
</div>

📊

Quick Reference

Use .container and .row for layout.
Use .col-md-4 for three equal columns on medium and larger screens.
Use .card components for each pricing option.
Use .card-header for plan names and .card-body for details.
Use Bootstrap buttons like .btn-primary for call-to-action.
Add h-100 to cards for equal height.

✅

Key Takeaways

Use Bootstrap grid with .row and .col-md-4 to arrange pricing cards side by side.

Wrap each pricing option in a .card with header, body, and button for clear structure.

Add h-100 class to cards to keep all cards the same height for a neat layout.

Always include Bootstrap CSS and JS links to ensure styles and components work correctly.

Avoid inline styles; rely on Bootstrap classes for responsive and consistent design.