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">
<div class="row bootstrap snippets bootdeys">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="card">
<div class="thumbnail">
<img width="360" height="270" src="https://www.bootdey.com/image/350x260/40E0D0/000000" alt="thumbnail"/>
<a href="#/" class="thumb-cover"></a>
<div class="details">
<div class="authors-container">
<div class="author">
<a class="card-user account-photo account-product-owner">
<div class="mask">
<img class="photo" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Thumb"/>
</div>
</a>
</div>
</div>
<div class="numbers">
<b class="downloads"><i class="fa fa-arrow-circle-o-down"></i> 3,461</b>
<b class="comments-icon"><i class="fa fa-comment"></i> 42</b>
</div>
<div class="clearfix"></div>
</div>
<b class="actions">
<a class="btn btn-neutral btn-round btn-fill" href="#/">More Details</a>
<a class="btn btn-neutral btn-round" href="#/">Live Preview</a>
</b>
</div>
<div class="card-info">
<a href="#/">
<h3>Product 1
<div class="time pull-right">Free</div>
</h3>
<div class="circle-red"><i class="fa fa-circle-o"></i></div>
<p>Smaill description</p>
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="card">
<div class="thumbnail">
<img width="360" height="270" src="https://www.bootdey.com/image/350x260/008080/000000" alt="thumbnail"/>
<a href="#/" class="thumb-cover"></a>
<div class="details">
<div class="authors-container">
<div class="author">
<a class="card-user account-photo account-product-owner">
<div class="mask">
<img class="photo" src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="Thumb"/>
</div>
</a>
</div>
</div>
<div class="numbers">
<b class="downloads"><i class="fa fa-arrow-circle-o-down"></i> 162</b>
<b class="comments-icon"><i class="fa fa-comment"></i> 23</b>
</div>
<div class="clearfix"></div>
</div>
<b class="actions">
<a class="btn btn-neutral btn-round btn-fill" href="#/">More Details</a>
<a class="btn btn-neutral btn-round" href="#/">Live Preview</a>
</b>
</div>
<div class="card-info">
<a href="#/">
<h3>Product 2<div class="time pull-right">$19</div></h3>
<div class="circle-blue"><i class="fa fa-circle-o"></i></div>
<p>Small description</p>
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="card">
<div class="thumbnail">
<img width="360" height="270" src="https://www.bootdey.com/image/350x260/4682B4/000000" alt="thumbnail"/>
<a href="#/" class="thumb-cover"></a>
<div class="details">
<div class="authors-container">
<div class="author">
<a class="card-user account-photo account-product-owner">
<div class="mask">
<img class="photo" src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="Thumb"/>
</div>
</a>
</div>
</div>
<div class="numbers">
<b class="downloads"><i class="fa fa-arrow-circle-o-down"></i> 621</b>
<b class="comments-icon"><i class="fa fa-comment"></i> 27</b>
</div>
<div class="clearfix"></div>
</div>
<b class="actions">
<a class="btn btn-neutral btn-round btn-fill" href="#/">More Details</a>
<a class="btn btn-neutral btn-round" href="#/">Live Preview</a>
</b>
</div>
<div class="card-info">
<a href="#/">
<h3>Product 3
<div class="time pull-right">$39</div>
</h3>
<div class="circle-red"><i class="fa fa-circle-o"></i></div>
<p>Small description</p>
</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 :
body{
margin-top:20px;
}
.card {
border-radius: 12px;
position: relative;
margin-bottom: 60px;
}
.card .thumbnail {
border: 0 none;
padding: 0;
margin: 0;
min-height: 270px;
position: relative;
background: transparent;
}
.card .thumbnail>img {
border-radius: 12px 12px;
box-shadow: 0 25px 20px -21px rgba(0,0,0,0.57);
}
.card .thumb-cover {
padding: 15px 20px;
height: 100%;
top: 0;
position: absolute;
opacity: 0;
display: block;
width: 100%;
background-color: rgba(0,0,0,0.75);
z-index: 3;
content: "";
left: 0;
border-radius: 12px;
}
.card .details {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…IgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.36) 62%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0.75)), color-stop(62%, rgba(0,0,0,0.36)), color-stop(100%, rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.36) 62%, rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.36) 62%, rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.36) 62%, rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.36) 62%, rgba(0,0,0,0) 100%);
top: 0;
display: block;
height: 60px;
padding: 10px 15px 0;
position: absolute;
width: 100%;
z-index: 1032;
border-radius: 12px 12px 0 0;
}
.card .authors-container {
display: inline-block;
width: 38px;
}
.authors-container .author:nth-child(1) {
z-index: 100;
}
.authors-container .author {
float: left;
position: relative;
transition: opacity 0.25s;
-webkit-transition: opacity 0.25s;
}
.card .author>.account-photo.account-product-owner {
border-color: #ff9500;
}
.card .authors-container>.author>.account-photo {
width: 36px;
height: 36px;
}
.authors-container>.author>.account-photo {
width: 55px;
height: 55px;
border-width: 2px;
}
.authors-container .author:nth-child(2) {
z-index: 99;
margin-left: -20px;
}
.account-photo.account-product-owner {
border-color: rgba(255,149,0,0.55);
}
.account-photo {
position: relative;
width: 70px;
height: 70px;
display: block;
margin: 0 auto;
border-radius: 50%;
border: 3px solid rgba(0,158,255,0.65);
border-color: #ccc;
}
.account-photo .mask {
width: 100%;
height: 100%;
overflow: hidden;
display: block;
border-radius: 50%;
}
.card .thumbnail img {
width: 100%;
}
.card .numbers {
color: #FFFFFF;
float: right;
margin-top: 6px;
}
.card .numbers .downloads, .card .numbers .comments-icon {
margin-left: 6px;
font-size: 15px;
font-weight: 500;
}
.card:hover .thumb-cover, .card:hover .actions {
opacity: 1;
}
.card .thumb-cover {
padding: 15px 20px;
height: 96%;
top: 0;
position: absolute;
opacity: 0;
display: block;
width: 100%;
background-color: rgba(0,0,0,0.75);
z-index: 3;
content: "";
left: 0;
border-radius: 12px;
}
.card .actions {
position: absolute;
z-index: 3;
top: 50%;
text-align: center;
width: 100%;
height: 0;
opacity: 0;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
}
.card-info h3 {
margin-top: 10px;
margin-bottom: 5px;
font-size: 18px;
}
.card-info [class^='circle-'] {
float: left;
margin-right: 5px;
}
.card-info p {
font-size: 14px;
margin: 0;
color: #666666;
}
.card-info {
padding: 15px;
border-radius: 0 0 12px 12px;
}
.card-info a:not(.btn) {
color: #434343;
}
.circle-red i {
color: #FF3B30;
}
.card .time {
color: #777777;
font-size: 15px;
margin-top: 2px;
text-transform: uppercase;
}
a, a:hover, a:focus, .btn:focus, .btn:hover, .btn:active, .btn:active:focus, .btn:active.focus, .btn.active:focus, .btn.active.focus {
text-decoration: none;
outline: 0;
outline-color: transparent;
outline-style: none;
}
.card .actions .btn {
top: 50%;
position: relative;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
.btn-neutral.btn-fill {
color: #666666;
background-color: white;
opacity: 1;
filter: alpha(opacity=100);
}
.btn-neutral {
border-color: white;
color: white;
}
.btn-neutral:not(.btn-fill):hover {
color: white;
}
.btn-round {
border-width: 1px;
border-radius: 30px !important;
opacity: 0.79;
padding: 9px 18px;
}