"Pricing Table Example"
Bootstrap 2.3.2 Snippet by msurguy

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="span12"> <table class="table table-condensed table-hover"> <thead> <tr> <th> </th> <th>Fluid 512</th> <th>Fluid 1024</th> <th>Fluid 2048</th> <th>Fluid 4096</th> </tr> </thead> <tbody> <tr> <td>Ram</td> <td>512MB</td> <td>1024MB</td> <td>2048MB</td> <td>4096MB</td> </tr> <tr> <td>Disk Space</td> <td>25GB</td> <td>50GB</td> <td>100GB</td> <td>200GB</td> </tr> <tr> <td>CPU Cores</td> <td>1</td> <td>2</td> <td>4</td> <td>6</td> </tr> <tr> <td>Swap</td> <td>512MB</td> <td>1024MB</td> <td>1024MB</td> <td>2048MB</td> </tr> <tr> <td>Bandwidth</td> <td>200GB</td> <td>400GB</td> <td>800GB</td> <td>1600GB</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>Monthly</td> <td>$16.95/month</td> <td>$32.95/month</td> <td>$64.95/month</td> <td>$128.95/month</td> </tr> <tr> <td>Quarterly</td> <td>$16.44/month</td> <td>$31.96/month</td> <td>$63.00/month</td> <td>$125.08/month</td> </tr> <tr> <td>Yearly</td> <td>$15.26/month</td> <td>$29.66/month</td> <td>$58.46/month</td> <td>$116.06/month</td> </tr> <tr> <td> </td> <td><a class="btn btn-success" href="#"><i class="icon-shopping-cart icon-white"></i> Order »</a></td> <td><a class="btn btn-success" href="#"><i class="icon-shopping-cart icon-white"></i> Order »</a></td> <td><a class="btn btn-success" href="#"><i class="icon-shopping-cart icon-white"></i> Order »</a></td> <td><a class="btn btn-success" href="#"><i class="icon-shopping-cart icon-white"></i> Order »</a></td> </tr> </tbody> </table> </div> </div> </div>

Related: See More


Questions / Comments:

Nice and clean. Like it.

Callam Delaney (0) - 4 years ago - Reply 0


When you work with newer versions of Boostrap you can stil use this by replacing

<div class="span3">

with:

<div class="col-lg-4" align="center">

That worked for me, but I am not sure if it is the correct solution, so please correct me if I'm wrong here!

Marc (0) - 4 years ago - Reply 0


wheres the css?

matt suffoletto (0) - 4 years ago - Reply 0


Nice Snippett !, to improve the text and div should be in the centre as it looks more professional and eye catching suggested some CSS to do that:

<style>
.custom {text-align: center; margin-left: auto; margin-right: auto;}
</style>

Add the custom to a div and this would be a great ! (even better)

ConnerT (0) - 5 years ago - Reply 0


thanks! Maybe it's time to create a new snippet that has a fixed height ? How would you go about that?

maxsurguy (0) - 5 years ago - Reply 0


i will submit one based off this code, probably to add the margin-left and right attributes in CSS to make the wells line up, or add the "pre" tag within the div to align them up on the left, or i could change the wells to Thumbnails and span them all to 4 :) we will see, will try and get it published this week

ConnerT (0) - 5 years ago - Reply 0


Thank you!

maxsurguy (0) - 5 years ago - Reply 0


Done ! and submitted

Guest (0) - 5 years ago - Reply 0


Most welcome, i love this community and everyone loves some free HTML code :)

ConnerT (0) - 5 years ago - Reply 0


All Done Waiting for you to approve it :)

ConnerT (0) - 5 years ago - Reply 0


Sorry I took so long to post it, but it is posted now! Thank you for the submission!

maxsurguy (0) - 5 years ago - Reply 0


Can anyone tell me where I paste this code? Do I just put it in my static pages?

Luther Moore (0) - 5 years ago - Reply 0


Yes! you have to have Bootstrap included in the header though!

maxsurguy (0) - 5 years ago - Reply 0


Nice job

Musa Musa (0) - 5 years ago - Reply 0


cant understand that ppl argue with height here :D just add empty list items till u have 4 at all and u have the same height ^^

incredible understandable (0) - 5 years ago - Reply 0


Colin Viebrock (0) - 5 years ago - Reply 0


What about simple CSS, like
min-height: 480px;

pepperstreet (0) - 5 years ago - Reply 0


Anyway to highlight the most popular plan and compare features?

Michael Calkins (0) - 5 years ago - Reply 0


it would be better to highlight bronze plan.

Jawad (0) - 5 years ago - Reply 0