Pricing

Use Boomerang's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Style 1

This style uses SVG icons. We have included plenty of them and you can choose the one you need in the SVGs dedicated section.

Free

  • Responsive design
  • One page layout
  • Multi page layout
  • Premium plugins
$ 0 /mo Get started Learn more

Pro

  • Responsive design
  • One page layout
  • Multi page layout
  • Premium plugins
$ 69 /mo Get started Learn more

Example


<div class="card-top z-depth-3--hover">
    <div class="card-body text-center">
        <div class="icon-block--style-1-v5">
            <div class="block-icon block-icon-lg pt-4">
                <img src="path_to_icon">
            </div>
            <div class="block-content">
                <h3 class="heading heading-5 strong-600 text-uppercase">Pro</h3>
                <ul class="icons text-center mt-4">
                    <li class="c-gray-light strong-400">Responsive design</li>
                    <li class="c-gray-light strong-400">One page layout</li>
                    <li class="c-gray-light strong-400">Multi page layout</li>
                    <li class="c-gray-light strong-400">Premium plugins</li>
                </ul>

                <span class="price-tag price-tag--1">
                    <sup>$</sup>
                    <span class="strong-700">69</span>
                    <span class="price-type">/mo</span>
                </span>

                <a href="#" class="btn btn-styled btn-base-1 btn-circle btn-shadow text-uppercase strong-600 mt-3 px-5">Get started</a>
                <span class="clearfix"></span>
                <a href="#" class="link link-sm link--style-3 text-capitalize mt-2">Learn more</a>
            </div>
        </div>
    </div>
</div>

Style 2

Basic

$10 /mo

  • Responsive
    Yes
  • Layouts
    100+
  • Plugins
    No
  • Updates
    2 years

Basic

$20 /mo

  • Responsive
    Yes
  • Layouts
    100+
  • Plugins
    No
  • Updates
    2 years

Example


<div class="pricing-plans pricing-plans--style-1">
    <div class="row cols-xs-space cols-sm-space cols-md-space">
        <div class="col-md-6">
            <div class="block block-pricing">
                <div class="block-body">
                    <h2 class="plan-title heading-4 text-center strong-600">Basic</h2>
                    <h3 class="price-tag strong-600">
                        <sup>$</sup>10
                        <span class="price-type strong-400">/mo</span>
                    </h3>
                    <ul class="mt-4 list-border--dotted">
                        <li>
                            <div class="row">
                                <div class="col-6">
                                    <span class="alpha-6">Responsive</span>
                                </div>
                                <div class="col-6 text-right">
                                    <strong>Yes</strong>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="row">
                                <div class="col-6">
                                    <span class="alpha-6">Layouts</span>
                                </div>
                                <div class="col-6 text-right">
                                    <strong>100+</strong>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="row">
                                <div class="col-6">
                                    <span class="alpha-6">Plugins</span>
                                </div>
                                <div class="col-6 text-right">
                                    <strong>No</strong>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="row">
                                <div class="col-6">
                                    <span class="alpha-6">Updates</span>
                                </div>
                                <div class="col-6 text-right">
                                    <strong>2 years</strong>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="mt-4 text-center">
                        <button type="submit" class="btn btn-block btn-styled btn-lg btn-base-1 strong-600">
                            Select plan
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="block block-pricing active">
                <div class="block-body">
                    <h2 class="plan-title heading-4 text-center strong-600">Basic</h2>
                    <h3 class="price-tag strong-600">
                        <sup>$</sup>20
                        <span class="price-type strong-400">/mo</span>
                    </h3>
                    <ul class="mt-4 list-border--dotted">
                        <li>
                            <div class="row">
                                <div class="col-6">
                                    <span class="alpha-6">Responsive</span>
                                </div>
                                <div class="col-6 text-right">
                                    <strong>Yes</strong>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="row">
                                <div class="col-6">
                                    <span class="alpha-6">Layouts</span>
                                </div>
                                <div class="col-6 text-right">
                                    <strong>100+</strong>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="row">
                                <div class="col-6">
                                    <span class="alpha-6">Plugins</span>
                                </div>
                                <div class="col-6 text-right">
                                    <strong>No</strong>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="row">
                                <div class="col-6">
                                    <span class="alpha-6">Updates</span>
                                </div>
                                <div class="col-6 text-right">
                                    <strong>2 years</strong>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="mt-4 text-center">
                        <button type="submit" class="btn btn-block btn-styled btn-lg btn-base-1 strong-600">
                            Select plan
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Style 3

Choose between 5 main colors for this pricing style: .bg-base-* with values from 1 to 5.

Basic

  • Basic membership
  • $69
  • Some great feature
  • Another super feature
  • And more...
  • Select plan

Plus

  • Plus membership
  • $79
  • Some great feature
  • Another super feature
  • And more...
  • Select plan

Premium

  • This is really a good deal!
  • $89
  • Some great feature
  • Another super feature
  • And more...
  • Select plan

Example


<div class="promos bg-base-1">
    <div class="promo first">
        <h4 class="heading heading-5 strong-600">Basic</h4>
        <ul class="features">
            <li class="brief">Basic membership</li>
            <li class="price">$69</li>
            <li>Some great feature</li>
            <li>Another super feature</li>
            <li>And more...</li>
            <li class="buy">
                <a href="#" class="btn btn-base-5 btn-outline">
                    <span>Select plan</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="promo second">
        <h4 class="heading heading-5 strong-600">Plus</h4>
        <ul class="features">
            <li class="brief">Plus membership</li>
            <li class="price">$79</li>
            <li>Some great feature</li>
            <li>Another super feature</li>
            <li>And more...</li>
            <li class="buy">
                <a href="#" class="btn btn-base-5 btn-outline">
                    <span>Select plan</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="promo third scale">
        <h4 class="heading heading-5 strong-600">Premium</h4>
        <ul class="features">
            <li class="brief">This is really a good deal!</li>
            <li class="price">$89</li>
            <li>Some great feature</li>
            <li>Another super feature</li>
            <li>And more...</li>
            <li class="buy">
                <a href="#" class="btn btn-lg btn-base-5 btn-outline">
                    <span>Select plan</span>
                </a>
            </li>
        </ul>
    </div>
</div>

Style 4

Basic

$10

per month
  • Responsive design
  • Multi page layout
  • Premium plugins
  • Free updates

Basic

$10

per month
  • Responsive design
  • Multi page layout
  • Premium plugins
  • Free updates

Example


<div class="block block-pricing">
    <h2 class="plan-title heading heading-6 text-uppercase strong-600 text-center">Basic</h2>
    <h3 class="price-tag"><sup>$</sup>10</h3>
    <span class="price-tag-subtitle pb-4 text-normal">per month</span>
    <ul class="text-center border-top pt-1">
        <li class="text-line-through">Responsive design</li>
        <li class="text-line-through">Multi page layout</li>
        <li class="text-line-through">Premium plugins</li>
        <li class="active">Free updates</li>
    </ul>
    <div class="py-2 border-top text-center">
        <button type="submit" class="btn btn-styled btn-base-1 btn-icon-right">
            Select
            <i class="icon ion-arrow-right-c"></i>
        </button>
    </div>
</div>

Pricing tables

Use Boomerang's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Style 1

Use the Bootstrap grid system in order to add any number of colums you need. Learn more about how to use the grid system's classes on the official website.

Basic

$5

per month
  • Responsive design
  • One page layout

Professional

$10

per month
  • Responsive design
  • One page layout
  • Multi page layout
  • Premium plugins

Enterprise

$20

per month
  • Responsive design
  • One page layout
  • Multi page layout
  • Premium plugins

Example


<div class="pricing-plans pricing-plans--style-3">
    <div class="row row-no-padding">
        <div class="col-lg-4">
            <div class="block block-pricing">
                <div class="plan-title-wrapper">
                    <h2 class="plan-title heading heading-5 strong-600">Basic</h2>
                    <h3 class="price-tag"><sup>$</sup>5</h3>
                    <span class="price-tag-subtitle text-normal">per month</span>
                </div>

                <ul class="text-center">
                    <li>Responsive design</li>
                    <li>One page layout</li>
                </ul>
                <div class="py-3 text-center">
                    <button type="submit" class="btn btn-styled btn-base-1 btn-icon-right">
                        Select
                        <i class="icon ion-arrow-right-c"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="block block-pricing">
                <div class="plan-title-wrapper">
                    <h2 class="plan-title heading heading-5 strong-600">Professional</h2>
                    <h3 class="price-tag"><sup>$</sup>10</h3>
                    <span class="price-tag-subtitle text-normal">per month</span>
                </div>

                <ul class="text-center">
                    <li class="active">Responsive design</li>
                    <li class="active">One page layout</li>
                    <li class="active">Multi page layout</li>
                    <li class="active">Premium plugins</li>
                </ul>

                <div class="py-3 text-center">
                    <button type="submit" class="btn btn-styled btn-base-1 btn-icon-right">
                        Select
                        <i class="icon ion-arrow-right-c"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="block block-pricing">
                <div class="plan-title-wrapper">
                    <h2 class="plan-title heading heading-5 strong-600">Enterprise</h2>
                    <h3 class="price-tag"><sup>$</sup>20</h3>
                    <span class="price-tag-subtitle text-normal">per month</span>
                </div>

                <ul class="text-center">
                    <li class="active">Responsive design</li>
                    <li class="active">One page layout</li>
                    <li class="active">Multi page layout</li>
                    <li class="active">Premium plugins</li>
                </ul>

                <div class="py-3 text-center">
                    <button type="submit" class="btn btn-styled btn-base-1 btn-icon-right">
                        Select
                        <i class="icon ion-arrow-right-c"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>