Demo code: Download
for running :]
<script type="text/babel">
'use strict';
var ThumbnailMatrixItem= React.createClass({
render: function() {
return (
<div className="col-lg-3 col-md-4 col-xs-6">
<a href="#" className="d-block mb-4 h-100">
<img className="img-fluid img-thumbnail" src={this.props.imgUrl}
alt="" />
</a>
</div>
);
}
});
var ThumbnailMatrix= React.createClass({
render: function() {
var productNodes= this.props.items.map(function (product) {
return (
<ThumbnailMatrixItem name={product.name} description={
product.description} price={product.price} imgUrl={product.imgUrl}>
</ThumbnailMatrixItem>
);
});
return (
<div className="container">
<h1 className="my-4 text-center text-lg-left">{this.props.title}</h1>
<div className="row text-center text-lg-left">
{productNodes}
</div>
</div>
);
}
});
ReactDOM.render(<ThumbnailMatrix title="Bootstrap Thumbnail Gallery" items={
productData}/>, document.getElementById('thumbnailGridDemo'));
//product data
var productData= [ {name: "Priduct 1", description: "product1 description goes here",imgUrl:"img/400x300.png", price: "$150"}, {name: "Product 2", description: "product2 description goes here",imgUrl:"img/400x300.png",price: "$50"}, {name: "Product 3", description: "product3 description goes here",imgUrl:"img/400x300.png",price: "$30"}, {name: "Priduct 41", description: "product1 description goes here",imgUrl:"img/400x300.png",price: "$150"},{name: "Product 52", description: "product2 description goes here",imgUrl:"img/400x300.png",price: "$50"}, {name: "Product 63", description: "product3 description goes here",imgUrl:"img/400x300.png",price: "$30"}, {name: "Priduct 71", description: "product1 description goes here",imgUrl:"img/400x300.png",price: "$150"}, {name: "Product 82", description: "product2 description goes here",imgUrl:"img/400x300.png",price: "$50"}, {name: "Product 93", description: "product3 description goes here",imgUrl:"img/400x300.png",price: "$30"}, {name: "Product 95", description: "product3 description goes here",imgUrl:"img/400x300.png",price: "$30"}, {name: "Product 96", description: "product3 description goes here",imgUrl:"img/400x300.png",price: "$30"}, {name: "Product 99", description: "product3 description goes here",imgUrl:"img/400x300.png",price: "$30"}, ];</script>
Dependencies: <script src="libs/jquery/3.3.1/jquery.min.js"></script> <script src="libs/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script> <script src="libs/react/0.14.2/react.js"></script> <script src="libs/react/0.14.2/react-dom.js"></script> <script src="libs/babel/babel-core/5.8.23/browser.min.js"></script>
