https://github.com/mdbootstrap/bootstrap-product-cards

Responsive Product Cards built with the latest Bootstrap 5. Lots of examples of different designs for eCommerce components.
https://github.com/mdbootstrap/bootstrap-product-cards

bestseller-listing bootstrap bootstrap-cards bootstrap-template bootstrap5 cards comparison ecommerce product-cards responsive responsive-design

Last synced: 10 months ago
JSON representation

Responsive Product Cards built with the latest Bootstrap 5. Lots of examples of different designs for eCommerce components.

Host: GitHub
URL: https://github.com/mdbootstrap/bootstrap-product-cards
Owner: mdbootstrap
License: other
Created: 2021-08-13T06:52:56.000Z (over 4 years ago)
Default Branch: main
Last Pushed: 2022-01-27T13:05:59.000Z (about 4 years ago)
Last Synced: 2025-05-23T23:09:25.807Z (11 months ago)
Topics: bestseller-listing, bootstrap, bootstrap-cards, bootstrap-template, bootstrap5, cards, comparison, ecommerce, product-cards, responsive, responsive-design
Language: JavaScript
Homepage: https://mdbootstrap.com/docs/standard/extended/product-cards/
Size: 954 KB
Stars: 5
Watchers: 5
Forks: 5
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: License.pdf

Awesome Lists containing this project

README

Responsive Product Cards built with the latest Bootstrap 5. Lots of examples of different designs for eCommerce components.

Check out [Bootstrap Product Cards Documentation](https://mdbootstrap.com/docs/standard/extended/product-cards/) for detailed instructions & even more examples.

## Basic example

![Bootstrap 5 Product Cards](https://mdbootstrap.com/img/Marketing/github/product-cards/basic.png)

```html

Believing is seeing

Apple pro display XDR

Pro Display XDR$5,999

Pro stand$999

Vesa Mount Adapter$199

Total$7,197.00

```

## How to use?

1. Download MDB 5 - free UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)

## More examples

[Bootstrap Product comparison template:
![Bootstrap 5 Product Cards](https://mdbootstrap.com/img/Marketing/github/product-cards/section-2.png)](https://mdbootstrap.com/docs/standard/extended/product-cards/#section-2)

[Bootstrap Ecommerce category product list page:
![Bootstrap 5 Product Cards](https://mdbootstrap.com/img/Marketing/github/product-cards/section-3.png)](https://mdbootstrap.com/docs/standard/extended/product-cards/#section-3)

[Bootstrap Ecommerce product listing:
![Bootstrap 5 Product Cards](https://mdbootstrap.com/img/Marketing/github/product-cards/section-4.png)](https://mdbootstrap.com/docs/standard/extended/product-cards/#section-4)

[Bootstrap Quick buy product card:
![Bootstrap 5 Product Cards](https://mdbootstrap.com/img/Marketing/github/product-cards/section-5.png)](https://mdbootstrap.com/docs/standard/extended/product-cards/#section-5)

[Bootstrap Bestsellers listing:
![Bootstrap 5 Product Cards](https://mdbootstrap.com/img/Marketing/github/product-cards/section-6.png)](https://mdbootstrap.com/docs/standard/extended/product-cards/#section-6)

[Bootstrap Product cards listing:
![Bootstrap 5 Product Cards](https://mdbootstrap.com/img/Marketing/github/product-cards/section-7.png)](https://mdbootstrap.com/docs/standard/extended/product-cards/#section-7)

___

## More extended Bootstrap documentation