An HTML 5 / CSS 3 products display with Bootstrap template

Special Products template

The products / catalogue / special offers template can be used in your Bootstrap-based project to display items with price tag along with an order/buy button.

Bootstrap product display

Live demo Download Code

This template is built by using HTML 5, CSS 3 and contained in Bootstrap-based div elements that use its classes.

Normally, it will display three products and it will adjust as device width reduces, for example, in smartphones it will display single product.

In addition, the wow animation, which is a jQuery plug-in is also used to display products section with an animation. I used pulse value; you may use different values as shown in this page.

To use this template, simply copy the section from products.html page and paste into the area where you want to use it.

You also need to use the products.css file or simply copy/paste the required classes in your main CSS file.

I have also used this code in the multi-product Bootstrap carousel with a different scheme. You can see its demo here.

To see this free product demo in a single page website, check it in choco-bar free Bootstrap theme. To view that section, either scroll to “Our specialties” section or click on the “Specialties” menu item at the top navigation.

For text, the template is using Google font: Poiret One for all text information while sub-heading is assigned the Indie Flower font. Both of these are included in the <head> section. You may replace with your web page’s style if you want to.

Live demo

PS: If you like it, then share that link wherever you can: in social media, stackoverflow or other programming forums.