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">
<div class="row ">
<div class="col-md-6">
<div class="media blog-media">
<a href="#/"><img class="d-flex" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Generic placeholder image"/></a>
<div class="circle">
<h5 class="day">14</h5>
<span class="month">sep</span>
</div>
<div class="media-body">
<a href=""><h5 class="mt-0">Standard Blog Post</h5></a> Sodales aliquid, in eget ac cupidatat velit autem numquam ullam ducimus occaecati placeat error.
<a href="#/" class="post-link">Read More</a>
<ul>
<li>by: Admin</li>
<li class="text-right"><a href="#/">07 comments</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="media blog-media">
<a href="#/"><img class="d-flex" src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="Generic placeholder image"/></a>
<div class="circle">
<h5 class="day">12</h5>
<span class="month">sep</span>
</div>
<div class="media-body">
<a href=""><h5 class="mt-0">perferendis labore</h5></a> Sodales aliquid, in eget ac cupidatat velit autem numquam ullam ducimus occaecati placeat error.
<a href="#/" class="post-link">Read More</a>
<ul>
<li>by: Admin</li>
<li class="text-right"><a href="#/">04 comments</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="media blog-media">
<a href="#/"><img class="d-flex" src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="Generic placeholder image"/></a>
<div class="circle">
<h5 class="day">09</h5>
<span class="month">sep</span>
</div>
<div class="media-body">
<a href=""><h5 class="mt-0">deleniti incdunt magni</h5></a> Sodales aliquid, in eget ac cupidatat velit autem numquam ullam ducimus occaecati placeat error.
<a href="#/" class="post-link">Read More</a>
<ul>
<li>by: Admin</li>
<li class="text-right"><a href="#/">10 comments</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="media blog-media">
<a href="#/"><img class="d-flex" src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="Generic placeholder image"/></a>
<div class="circle">
<h5 class="day">04</h5>
<span class="month">sep</span>
</div>
<div class="media-body">
<a href=""><h5 class="mt-0">Explicabo magnam </h5></a> Sodales aliquid, in eget ac cupidatat velit autem numquam ullam ducimus occaecati placeat error.
<a href="#/" class="post-link">Read More</a>
<ul>
<li>by: Admin</li>
<li class="text-right"><a href="#/">06 comments</a></li>
</ul>
</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{
background:#eee;
margin-top:20px;
}
.home-blog {
padding-top: 80px;
padding-bottom: 80px
}
.media.blog-media {
margin-top: 30px;
position: relative;
display: block
}
@media (min-width:992px) {
.media.blog-media {
display: table
}
}
.media.blog-media .circle {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: rgba(0, 0, 0, .5);
white-space: nowrap;
position: absolute;
padding: 0;
top: 20px;
left: 20px;
text-align: center;
box-shadow: none;
-webkit-transform: translateX(0);
transform: translateX(0);
color: #fff;
transition: background-color .3s ease
}
.media.blog-media .circle .day {
color: #fff;
transition: color .25s ease;
font-weight: 500;
font-size: 28px;
line-height: 1;
margin-top: 12px
}
.media.blog-media .circle .month {
text-transform: uppercase;
font-size: 14px
}
.media.blog-media>a {
position: relative;
display: block
}
@media (min-width:992px) {
.media.blog-media>a {
display: table-cell;
vertical-align: top;
min-width: 200px
}
}
@media (min-width:1200px) {
.media.blog-media>a {
min-width: 230px
}
}
.media.blog-media>a:before {
position: absolute;
content: '';
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
transition: opacity .3s, -webkit-transform .3s ease;
transition: transform .3s ease, opacity .3s;
transition: transform .3s ease, opacity .3s, -webkit-transform .3s ease;
background: rgba(12, 198, 82, .7)
}
.media.blog-media>a img {
width: 100%
}
.media.blog-media:hover>a:before {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
.media.blog-media:hover .circle {
background-color: rgba(255, 255, 255, .9)
}
.media.blog-media:hover .circle .day,
.media.blog-media:hover .circle .month {
color: #222
}
.media.blog-media:hover .media-body h5 {
color: #0cc652
}
.media.blog-media:hover .media-body a.post-link {
color: #0cc652;
text-decoration: underline
}
.media.blog-media .media-body {
border: 1px solid #efeff3;
padding: 30px 30px 10px;
font-size: 14px;
background: #fff;
border-top: none
}
@media (min-width:992px) {
.media.blog-media .media-body {
padding: 15px 20px 10px;
border-top: 1px solid #efeff3;
border-left: none;
display: table-cell;
vertical-align: top
}
}
@media (min-width:1200px) {
.media.blog-media .media-body {
padding: 30px 20px 10px
}
}
.media.blog-media .media-body h5 {
transition: color .3s ease;
margin-bottom: 15px
}
@media (min-width:992px) {
.media.blog-media .media-body h5 {
font-size: 15px
}
}
@media (min-width:1200px) {
.media.blog-media .media-body h5 {
margin-bottom: 15px;
font-size: 18px
}
}
.media.blog-media .media-body a.post-link {
display: block;
color: #222;
font-size: 11px;
padding: 23px 0;
text-transform: uppercase;
font-weight: 400
}
@media (min-width:992px) {
.media.blog-media .media-body a.post-link {
padding: 7px 0
}
}
@media (min-width:1200px) {
.media.blog-media .media-body a.post-link {
padding: 23px 0
}
}
.media.blog-media .media-body ul {
position: relative;
padding: 10px 0 0
}
.media.blog-media .media-body ul li {
display: inline-block;
width: 49%;
position: relative
}
.media.blog-media .media-body ul li:before {
position: absolute;
content: '';
top: 5px;
left: 0;
width: 1px;
height: 14px;
background: #eeeef2
}
.media.blog-media .media-body ul li:first-child:before {
visibility: hidden
}
.media.blog-media .media-body ul:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 1px;
background: #eeeef2
}
@media (min-width:992px) {
.home-blog {
padding-top: 100px;
padding-bottom: 100px
}
}
.home-blog .section-title {
padding-bottom: 15px
}
.home-blog .media {
margin-top: 50px
}
@media (min-width:768px) {
.home-blog .media {
margin-top: 30px
}
}
@media (min-width:768px) {
.blog-left-sidebar .media.blog-media,
.blog-right-sidebar .media.blog-media {
display: table
}
}
@media (min-width:768px) {
.blog-left-sidebar .media.blog-media>a,
.blog-right-sidebar .media.blog-media>a {
display: table-cell;
vertical-align: top;
min-width: 250px
}
}
@media (min-width:768px) {
.blog-left-sidebar .media.blog-media .media-body,
.blog-right-sidebar .media.blog-media .media-body {
border-top: 1px solid #efeff3;
border-left: none;
display: table-cell;
vertical-align: top
}
}
.blog-left-sidebar .media.blog-media .media-body a.post-link,
.blog-right-sidebar .media.blog-media .media-body a.post-link {
padding: 22px 0
}
@media (min-width:1200px) {
.blog-left-sidebar .media.blog-media>a,
.blog-right-sidebar .media.blog-media>a {
min-width: 250px
}
}
.blog-post .media.blog-media {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.blog-post .bredcrumb h2 {
margin-bottom: 0
}
.blog-post .media.blog-media .media-body ul li {
font-size: 13px;
width: auto;
padding-right: 14px
}
.blog-post .media.blog-media .media-body ul li i {
display: none
}
@media (min-width:768px) {
.blog-post .media.blog-media .media-body ul li i {
display: inline-block
}
}
@media (min-width:768px) {
.blog-post .media.blog-media .media-body ul li {
font-size: 14px;
width: 49%;
padding-right: unset
}
}
.blog-post .media.blog-media .media-body ul li:before {
left: -8px
}
@media (min-width:768px) {
.blog-post .media.blog-media .media-body ul li:before {
left: 0
}
}
.blog-post-contents {
padding: 80px 0
}
@media (min-width:992px) {
.blog-post-contents {
padding: 100px 0
}
}
.blog-post-contents .media.blog-media {
margin-top: 0
}
.blog-post-contents .media.blog-media .media-body {
padding: 30px;
border: 1px solid #eeeef2;
border-top: none
}
.blog-post-contents .media.blog-media .media-body p {
padding-bottom: 15px
}
.blog-post-contents .media.blog-media .media-body ul {
padding-top: 15px
}
.blog-post-contents .media.blog-media:hover .circle {
background-color: rgba(255, 255, 255, .7)
}
.blog-post-contents .media.blog-media:hover .circle .day,
.blog-post-contents .media.blog-media:hover .circle .month {
opacity: 1
}