1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:
npx create-react-app my-awesome-project
cd my-awesome-project
npm start
2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:
npm install [email protected] --save
npm start //For start project again
3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container bootstrap snippets bootdey">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="wp-block product">
<figure>
<img alt="" src="https://www.bootdey.com/image/450x180/E6E6FA/000000" class="img-responsive img-center"/>
</figure>
<h2 class="product-title"><a href="">Nikon Coolpix L320</a></h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisg elitm Ut tincidunt purus iaculis
</p>
<div class="wp-block-footer">
<span class="price pull-left">$233.33</span>
<a href="#/" class="btn btn-sm btn-info btn-icon btn-cart pull-right">
<i class="fa fa-cart-plus"></i>
<span>Add to cart</span>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="wp-block product">
<figure>
<img alt="" src="https://www.bootdey.com/image/450x180/87CEFA/000000" class="img-responsive img-center"/>
</figure>
<h2 class="product-title"><a href="">Nikon Coolpix L320</a></h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisg elitm Ut tincidunt purus iaculis
</p>
<div class="wp-block-footer">
<span class="price pull-left">$233.33</span>
<a href="#/" class="btn btn-sm btn-info btn-icon btn-cart pull-right">
<i class="fa fa-cart-plus"></i>
<span>Add to cart</span>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="wp-block product">
<figure>
<img alt="" src="https://www.bootdey.com/image/450x180/FFB6C1/000000" class="img-responsive img-center"/>
</figure>
<h2 class="product-title"><a href="">Nikon Coolpix L320</a></h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisg elitm Ut tincidunt purus iaculis
</p>
<div class="wp-block-footer">
<span class="price pull-left">$233.33</span>
<a href="#/" class="btn btn-sm btn-info btn-icon btn-cart pull-right">
<i class="fa fa-cart-plus"></i>
<span>Add to cart</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default App;
4. Now we need to add below code into our my-awesome-project/src/App.css file :
.wp-block {
margin: 0 0 15px 0;
padding:15px;
-webkit-transition: all .3s linear;
transition: all .3s linear;
position: relative;
cursor: default;
border-radius: 2px;
}
.wp-block.product {
background: #fff;
padding: 15px;
margin-bottom: 20px;
border: 1px solid #e0eded;
}
.wp-block:before, .wp-block:after {
display: table;
content: "";
}
.wp-block.product figure {
padding-bottom: 15px;
border-bottom: 1px solid #e0eded;
}
.img-center {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-block.product .product-title {
margin: 10px 0 0 0;
padding: 0;
border-bottom: 0;
}
h2 {
font-size: 25px;
}
.wp-block.product .product-title a {
font-size: 16px;
font-weight: 600;
color: #333;
}
.wp-block.product p {
color: #616161;
}
.wp-block.product .wp-block-footer {
border-top: 1px solid #e0eded;
padding-top: 15px;
padding-bottom:25px;
}
.wp-block.product .price {
padding: 4px 0;
font-size: 13px;
font-weight: 600;
color: #333;
}
.btn-base {
color: #fff !important;
background-color: #3498db;
border: 1px solid;
border-color: #258cd1;
}
.btn-icon {
position: relative;
}
.btn-icon.btn-sm span, .btn-icon.btn-sm input {
padding-left: 35px;
}
.btn {
border-radius: 0;
border: 0;
border-bottom: 4px solid #CCCCCC;
margin:0;
-webkit-box-shadow: 0 5px 5px -6px rgba(0,0,0,.3);
-moz-box-shadow: 0 5px 5px -6px rgba(0,0,0,.3);
box-shadow: 0 5px 5px -6px rgba(0,0,0,.3);
}
.btn-info {
background-color: #39b3d7;
border-color: #348fd2;
text-shadow: 1px 1px 0 #238ed5;
}