A free Bootstrap product listing template with HTML and CSS

The product listing template based on Bootstrap

In this post, the Bootstrap classes are used along with custom CSS for creating the product listing page for an e-commerce website.

The features include displaying the product image along with optional “Special” or Hot” etc. tags. A small product description along with its category is also displayed.

Watch Video of this Tutorial for quick idea

With each product, the current star rating is displayed. You may use this with the database to allow users rate the product upfront.

The typical “Add to cart” and “More info” buttons are also given that uses Bootstrap’s btn-info and btn-danger classes.

A demo of listing with six products

See the following demo and get the complete code by clicking the link or image below. The left pane contains the code; navigate to the right for properly displaying the product listings.

Bootstrap product listing

See online demo and code

The CSS:

 

The Markup for Bootstrap product listings:

 

Practically, you will most probably pull the data from the database for the product listings. In that case, place the loop just above the comment:

<div class=”col-xs-12 col-md-6″>

<!– First product box start here–>

to the end of respective </div>.

A demo with animated Add to cart and More Info buttons

In this demo, a few animations are added in the product listings. First of all, by using the rotate CSS 3 property, as you bring the mouse over any image, it will rotate to 360 degrees. You may change this by accessing the rotprod:hover class in the <style> section.

Secondly, in the “Add to cart” and “More info” buttons, the effects are added to the Bootstrap buttons by using custom CSS with font-awesome icons. As a user brings the mouse over any button, the button will animate with certain CSS properties and respective icon; a basket for “Add to Cart” and “i” for “More info” button will appear with animation.

In the <style> section, btn-cart and btn-info are dealing with these buttons effects. Have a look at the demo and code:

Bootstrap product listing animations

See online demo and code

The complete CSS used in the above demo is:

 

Get the complete code from the demo page.

And this is how it will appear in the smart phones or other small screens:

Bootstrap product responsive