Hit enter after type your search item

A Bootstrap pricing table free template with CSS

The pricing table template using Bootstrap

In this tutorial, a pricing table using Bootstrap and custom CSS is created where you may display the product name or some heading, its features with the flexible number of lines, prominent display of price within a circle for each product or service by using CSS3 etc.

At the bottom, two buttons for placing the order or more info, sign up etc. are given to let users proceed. As such, this price table is based on Bootstrap framework, so it is being responsive. In larger screens, it may display four products or services. In tablets or relatively smaller screen, only two listings will be shown.

In smart phones or smaller screen, only a single product or service’s price table will display at a time. Have a look at the live demos and code online:

A demo of Bootstrap pricing table for products or services

See the demo by clicking the image or link below. The left part contains the code. For viewing demo, scroll to the right of the page:

Bootstrap price table

See online demo and code

Check and get the complete code in the demo page.

For changing the look of price table which is based on Bootstrap, you may change or add a few custom or Bootstrap classes. For example, the buttons are given the btn-danger and btn-info classes along with custom classes:


For its hover state, see the subsequent classes for both buttons:


For changing the properties of area showing services or product information, change the prod-ser-pricing and prod-ser-pricing:hover classes:

For changing the header color or other CSS properties, find the prod-ser-pricing .prod-ser-pricing-header class:


Another free template of the Bootstrap pricing table

By simply modifying a few above mentioned and other classes, look at the another template that you may use for presenting the services or products:

Bootstrap price table CSS

See online demo and code

Following is the markup of a single service box:


Get the complete code including CSS and dependent libraries in the demo page.

This div height required for enabling the sticky sidebar