So you have a website that uses Twitter’s Bootstrap and you sell products and or services. You are looking to create a plan pricing table that is also 100% responsive for mobile devices. Well, you’ve come to the right place. Let me show you how-to create a plan pricing table using Twitter’s Bootstrap.What I’m going to show you is really not a table, but columns, that give the effect of a table. It uses the column, well, labels and button CSS classes to create something beautiful – it will impress your potential clients!

The CSS

Guess what? This code snippet does not use custom CSS or CSS overrides, so there is no CSS to add! Just use the HTML below.

The HTML Coding

Add the following to your website to create the pricing table:

<div class="container"> <div class="row"> <div class="col-lg-3"> <div class="well"> <h2 class="muted">First</h2> <p><span class="label label-danger">POPULAR</span></p> <p> - Something cool<br /> - Something noteworthy<br /> - Something awesome<br /> </p> <p>This plan is good for this and you should get it for that or explain why the plan would be good for that person. You can also list features that come in all plans or whatever else you want.</p> <hr> <h3>$5.00 / month</h3> <hr> <p><a href="#">Select plan</a></p> </div> </div> <div class="col-lg-3"> <div class="well"> <h2 class="text-success">Second</h2> <p><span class="label label-success">POPULAR</span></p> <p> - Something cool<br /> - Something noteworthy<br /> - Something awesome<br /> </p> <p>This plan is good for this and you should get it for that or explain why the plan would be good for that person. You can also list features that come in all plans or whatever else you want.</p> <hr> <h3>$10.00 / month</h3> <hr> <p><a class="btn btn-success" href="#">Select plan</a></p> </div> </div> <div class="col-lg-3"> <div class="well"> <h2 class="text-info">Third</h2> <p><span class="label label-info">POPULAR</span></p> <p> - Something cool<br /> - Something noteworthy<br /> - Something awesome<br /> </p> <p>This plan is good for this and you should get it for that or explain why the plan would be good for that person. You can also list features that come in all plans or whatever else you want.</p> <hr> <h3>$15.00 / month</h3> <hr> <p><a class="btn btn-info btn-lg" href="#">Select plan</a></p> </div> </div> </div> </div>

HTML Explanation

Now let me explain how you can customize the pricing table. If you want a more in-depth explanation of the different Bootstrap CSS classes, please visit their documentation website here.

There are three (3) columns in the example. With Bootstrap, you can have a total of 12 columns, though the more columns, the smaller the columns will become, so I would recommend no more than four (4) columns. You’ll need to change the following CSS class: col-lg-3. To figure out the number, replace the 3, by diving the amount of columns you will use into 12, which is the max you can use. There is no half, so you’ll need to round up.

The plan names use the heading <h2></h2>. The class of the heading is based upon the text class: text-. The button uses the .btn class and related .btn classes for styling and sizing.

Adding GLYPHICONS

GLYPHICONS is a library of precisely prepared monochromatic icons and symbols that is included with Bootstrap. You can use it in the pricing table to add a little something – a graphic. There are 200 of them in total. You can see Bootstrap’s documentation page to see what GLYPHICONS are available.

The HTML to use them is:

<span class="glyphicon glyphicon-ok"></span>

In this example, the GLYPHICON will be a checkmark. You can put the GLYPHICON in the buttons or instead using a - on the left side of the feature.