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>
<div class="container bootstrap snippets bootdey">
<hr/>
<ol class="breadcrumb">
<li><a href="#/">Page name</a></li>
<li><a href="#/">Blog</a></li>
<li><a href="#/">Blog</a></li>
<li class="pull-right"><a href="" class="text-muted">
<i class="fa fa-refresh"></i></a>
</li>
</ol>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="well blog">
<a href="#/">
<div class="date primary">
<span class="blog-date">Oct</span>
<span class="blog-number">8</span>
</div>
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<div class="image">
<img src="https://www.bootdey.com/image/800x300/6495ED/000000" alt=""/>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="blog-details">
<h2>Post title 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique libero et est iaculis, id placerat nisi luctus. Aenean volutpat risus non fermentum feugiat. Etiam facilisis arcu ante, sed molestie diam mollis vel...
</p>
</div>
</div>
</div>
</a>
</div>
</div>
<div class
="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="well blog">
<a href="#/">
<div class="date">
<span class="blog-date">Sept</span>
<span class="blog-number">28</span>
</div>
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<div class="image">
<img src="https://www.bootdey.com/image/800x300/FF7F50/000000" alt=""/>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="blog-details">
<h2>Post title 2</h2>
<p>
Vestibulum commodo quis lacus vel eleifend. Donec sapien turpis, lobortis ut fringilla nec, congue vitae massa. Sed ullamcorper urna congue elit sodales feugiat ut sed nisl. Ut egestas a mauris non pharetra...
</p>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="well blog">
<a href="#/">
<div class="date success">
<span class="blog-date">Sept</span>
<span class="blog-number">23</span>
</div>
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<div class="image">
<img src="https://www.bootdey.com/image/800x300/9932CC/000000" alt=""/>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="blog-details">
<h2>Post title 3</h2>
<p>
Cras rhoncus elementum libero et rutrum. Sed lorem lectus, mollis pellentesque sollicitudin molestie, eleifend sed augue. Ut a consequat purus. Fusce sit amet turpis est...
</p>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="well blog">
<a href="#/">
<div class="date warning">
<span class="blog-date">Sept</span>
<span class="blog-number">14</span>
</div>
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<div class="image">
<img src="https://www.bootdey.com/image/800x300/FF69B4/000000" alt=""/>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="blog-details">
<h2>Post title 4</h2>
<p>
Quisque ac risus nibh. Ut nisi nisi, hendrerit quis malesuada vel, laoreet quis justo. In tincidunt eget est in rhoncus. Sed non tincidunt ipsum. Curabitur commodo tempus metus ut imperdiet. Mauris nec nulla...
</p>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="well blog info">
<a href="#/">
<div class="date">
<span class="blog-date">Sept</span>
<span class="blog-number">9</span>
</div>
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<div class="image">
<img src="https://www.bootdey.com/image/800x300/0B2AA/000000" alt=""/>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="blog-details">
<h2>Post title 5</h2>
<p>
Morbi tellus nisl, lacinia sit amet dui ut, suscipit pharetra tellus. Nulla in rutrum magna. Donec dui diam, feugiat rhoncus vehicula ut, mollis et turpis. Donec erat tortor, tincidunt in condimentum sed...
</p>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="well blog">
<a href="#/">
<div class="date danger">
<span class="blog-date">Sept</span>
<span class="blog-number">2</span>
</div>
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<div class="image">
<img src="https://www.bootdey.com/image/800x300/7B68EE/000000" alt=""/>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="blog-details">
<h2>Post title 6</h2>
<p>
Ut tempor ligula et suscipit aliquam. Quisque in venenatis massa. Fusce imperdiet erat ac magna aliquet aliquam. Morbi fermentum est felis. Duis ultricies, lectus at facilisis tristique...
</p>
</div>
</div>
</div>
</a>
</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;
}
p {
font-size: 14px;
color: #777;
}
.blog .image {
height: 250px;
overflow: hidden;
border-radius: 3px 0 0 3px;
}
.blog .image img {
width: 100%;
height: auto;
}
.blog .date {
top: -10px;
z-index: 99;
width: 65px;
right: -10px;
height: 65px;
padding: 10px;
position: absolute;
color:#FFFFFF;
font-weight:bold;
background: #5bc0de;
border-radius: 999px;
}
.blog .blog-details {
padding: 0 20px 0 0;
}
.blog {
padding: 0;
}
.well {
border: 0;
padding: 20px;
min-height: 63px;
background: #fff;
box-shadow: none;
border-radius: 3px;
position: relative;
max-height: 100000px;
border-bottom: 2px solid #ccc;
}
.blog .blog-details h2 {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.blog .date .blog-number {
color: #fff;
display: block;
font-size: 24px;
text-align: center;
} 
