Bulma PricingTable

A complete pricing table extension for Bulma.

The Pricing Table extension provides a complete solution for displaying pricing plans. It supports multiple layouts including horizontal, comparative, and active states to highlight specific plans.

Basic Pricing Table

Standard pricing plans with an active state to highlight the best value.

Starter
$0/mo
1 Project
1GB Storage
Communnity Support
Professional
$29/mo
20 Projects
50GB Storage
Priority Support
Business
$99/mo
Unlimited Projects
Unlimited Storage
24/7 Support
<div class="pricing-table">
    <div class="pricing-plan">
        <div class="plan-header">Starter</div>
        <div class="plan-price"><span class="plan-price-amount"><span class="plan-price-currency">$</span>0</span>/mo</div>
        <div class="plan-items">...</div>
        <div class="plan-footer"><button class="button is-fullwidth">Choose</button></div>
    </div>
    <!-- Highlight with is-active -->
    <div class="pricing-plan is-active">...</div>
</div>

Comparative Layout

Plan items align horizontally across plans for easy feature comparison. Use is-comparative on the table.

Basic
$10
Yes
No
No
Plus
$25
Yes
Yes
No
Pro
$50
Yes
Yes
Yes
<div class="pricing-table is-comparative">
    <div class="pricing-plan">
        <div class="plan-item" data-feature="Custom Label">Feature Value</div>
    </div>
</div>

Horizontal Layout

Use is-horizontal to stack plans vertically (effective on desktop).

Monthly Plan
$19/mo
Access to all features
Individual support
Annual Plan (Best Deal)
$159/yr
Save 30% over monthly
VIP Support priority
<div class="pricing-table is-horizontal">
    <div class="pricing-plan">...</div>
</div>