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>
<div class="container bootstrap snippets bootdey">
<div class="row">
<div class="col-md-4">
<div class="card card-favorite">
<div class="card-img-container">
<a href="#/" style={{/*background-image:url('https://www.bootdey.com/image/400x200/EE82EE/000000')*/}} class="card-img"></a>
</div>
<div class="card-content">
<div class="card-meta">
<span class="meta-date meta-box">
Jan 11
</span>
<span class="meta-pulse meta-box">
<a href="#/" class="card-share-number sharrre">50 Shares</a>
</span>
</div>
<h2>
<a href="#/">
Lorem ipsum dolor sit amet, consectetur
</a>
</h2>
</div>
<span class="meta-tags">
<a href="#/" title="tags" class="tag">Php</a>
</span>
</div>
</div>
<div class="col-md-4">
<div class="card card-favorite">
<div class="card-img-container">
<a href="#/" style={{/*background-image:url('https://www.bootdey.com/image/400x200/FF6347/000000')*/}} class="card-img"></a>
</div>
<div class="card-content">
<div class="card-meta">
<span class="meta-date meta-box">
Jul 16
</span>
<span class="meta-pulse meta-box">
<a href="#/" class="card-share-number sharrre">800 Shares</a>
</span>
</div>
<h2>
<a href="#/">
Lorem ipsum dolor sit amet, consectetur
</a>
</h2>
</div>
<span class="meta-tags">
<a href="#/" title="tags" class="tag">Html</a>
</span>
</div>
</div>
<div class="col-md-4">
<div class="card card-favorite">
<div class="card-img-container">
<a href="#/" style={{/*background-image:url('https://www.bootdey.com/image/400x200/48D1CC/000000')*/}} class="card-img"></a>
</div>
<div class="card-content">
<div class="card-meta">
<span class="meta-date meta-box">
Feb 18
</span>
<span class="meta-pulse meta-box">
<a href="#/" class="card-share-number sharrre">53 Shares</a>
</span>
</div>
<h2>
<a href="#/">
Lorem ipsum dolor sit amet, consectetur
</a>
</h2>
</div>
<span class="meta-tags">
<a href="#/" title="tags" class="tag">Css</a>
</span>
</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 {
min-width: 0;
margin: 20px 10px;
width: 100%;
background: #0C0C0C;
color: #696969;
-webkit-transition: .3s ease all;
transition: .3s ease all;
border: none;
border-radius: 5px;
padding: 0;
margin-bottom: 30px;
}
.card .card-img-container .card-img {
background-size: cover;
background-position: top center;
display: block;
height: 175px;
}
.card .card-img {
height: 150px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.card .card-img-container {
position: relative;
overflow: hidden;
width: 100%;
}
.card .card-content {
padding: 20px 20px 40px;
text-align: center;
}
.card .card-meta {
font-size: 12px;
}
.card .meta-box {
margin-right: 20px;
}
.card .card-content h2 {
margin-top: 10px;
margin-bottom: 0;
font-size: 16px;
line-height: 1.4;
}
.card h2 a {
color: #D0D0D0;
-webkit-transition: .3s ease all;
transition: .3s ease all;
}
a:hover{
text-decoration:none;
}
.card:hover h2 a {
color: #FFF;
}
.card .meta-tags a:hover {
color: #FFF;
}
.card .meta-tags .tag {
background: #DD1B16;
color: #f9c7c6;
}
.card .meta-tags a:last-child {
margin-right: 0;
border-bottom-right-radius: 5px;
}
.card .meta-tags a:first-child {
border-top-left-radius: 5px;
}
.card .meta-tags a {
display: inline-block;
padding: 3px 8px;
color: #FFF;
-webkit-transition: .3s ease all;
transition: .3s ease all;
}