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 start2. 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 again3. 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 bootdeys">
<div class="col-md-4">
<div class="card card-background">
<div class="image" style={{/*background-image: url(https://www.bootdey.com/image/266x200/87CEEB); background-size: cover; background-position: 50% 50%;*/}}>
<div class="filter"></div>
</div>
<div class="content">
<h5 class="price">user profile description
<a href="#/" class="pull-right">
<i class="fa fa-heart"></i>3.3.5
</a>
</h5>
</div>
<div class="footer">
<div class="author">
<a href="#/">
<span>Dey-Dey</span>
</a>
</div>
<div class="stats pull-right">
<i class="fa fa-eye"></i> 253
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-background">
<div class="image" style={{/*background-image: url(https://www.bootdey.com/image/266x200/4169E1); background-size: cover; background-position: 50% 50%;*/}}>
<div class="filter"></div>
</div>
<div class="content">
<h5 class="price">user profile description
<a href="#/" class="pull-right">
<i class="fa fa-heart"></i>3.3.5
</a>
</h5>
</div>
<div class="footer">
<div class="author">
<a href="#/">
<span>Dey-Dey</span>
</a>
</div>
<div class="stats pull-right">
<i class="fa fa-eye"></i> 253
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-background">
<div class="image" style={{/*background-image: url(https://www.bootdey.com/image/266x200/663399); background-size: cover; background-position: 50% 50%;*/}}>
<div class="filter"></div>
</div>
<div class="content">
<h5 class="price">user profile description
<a href="#/" class="pull-right">
<i class="fa fa-heart"></i>3.3.5
</a>
</h5>
</div>
<div class="footer">
<div class="author">
<a href="#/">
<span>Dey-Dey</span>
</a>
</div>
<div class="stats pull-right">
<i class="fa fa-eye"></i> 253
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-background">
<div class="image" style={{/*background-image: url(https://www.bootdey.com/image/266x200/DA70D6); background-size: cover; background-position: 50% 50%;*/}}>
<div class="filter"></div>
</div>
<div class="content">
<h5 class="price">user profile description
<a href="#/" class="pull-right">
<i class="fa fa-heart"></i>3.3.5
</a>
</h5>
</div>
<div class="footer">
<div class="author">
<a href="#/">
<span>Dey-Dey</span>
</a>
</div>
<div class="stats pull-right">
<i class="fa fa-eye"></i> 253
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-background">
<div class="image" style={{/*background-image: url(https://www.bootdey.com/image/266x200/FFA500); background-size: cover; background-position: 50% 50%;*/}}>
<div class="filter"></div>
</div>
<div class="content">
<h5 class="price">user profile description
<a href="#/" class="pull-right">
<i class="fa fa-heart"></i>3.3.5
</a>
</h5>
</div>
<div class="footer">
<div class="author">
<a href="#/">
<span>Dey-Dey</span>
</a>
</div>
<div class="stats pull-right">
<i class="fa fa-eye"></i> 253
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-background">
<div class="image" style={{/*background-image: url(https://www.bootdey.com/image/266x200/FF4500); background-size: cover; background-position: 50% 50%;*/}}>
<div class="filter"></div>
</div>
<div class="content">
<h5 class="price">user profile description
<a href="#/" class="pull-right">
<i class="fa fa-heart"></i>3.3.5
</a>
</h5>
</div>
<div class="footer">
<div class="author">
<a href="#/">
<span>Dey-Dey</span>
</a>
</div>
<div class="stats pull-right">
<i class="fa fa-eye"></i> 253
</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;
background:#f9f9f9;
}
.card {
border-radius: 6px;
background-color: #FFFFFF;
margin-bottom: 20px;
box-shadow: 0 25px 20px -21px rgba(0,0,0,0.57);
margin-top:30px;
}
.card-background {
position: relative;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.card-background .image {
border-radius: 6px;
}
.card .image {
width: 100%;
overflow: hidden;
height: 260px;
border-radius: 6px 6px 0 0;
position: relative;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card .image img {
width: 100%;
}
.card-background .filter {
opacity: 0.20;
filter: alpha(opacity=20.00000000000001);
border-radius: 6px;
}
.card .filter {
position: absolute;
z-index: 2;
background-color: rgba(0, 0, 0, 0.68);
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
.card-background:hover .filter {
opacity: 0.65;
filter: alpha(opacity=65);
}
.card-background .content, .card-background .footer {
position: absolute;
z-index: 3;
top: 0;
left: 0;
width: 100%;
}
.card .content {
padding: 15px 15px 10px 15px;
}
.card-background .price {
margin: 0;
color: #ffffff;
font-weight:normal;
}
.card-background .title {
margin-top: 30px;
font-weight: 400;
}
.card-background .title, .card-background .stats,
.card-background .category,
.card-background .description,
.card-background small, .card-background a {
color: #ffffff;
}
.card .title {
margin: 0 0 10px 0;
color: #333333;
font-weight: 300;
}
.card-background .footer {
bottom: 0;
top: auto;
padding: 10px 15px;
width: 100%;
line-height: 40px;
color: #ffffff;
}
.card .footer div {
display: inline-block;
}
.card .author {
font-size: 12px;
text-transform: uppercase;
}
