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">
<div class="col-md-4 popular-post">
<h3 class="text-center text-danger"><b>Popular posts</b></h3>
<article class="clearfix item item-odd">
<div class="teaser">
<div class="article-image">
<a class="image-link article-link" href="#/">
<img class="img-circle img-responsive img-thumbnail" src="https://www.bootdey.com/image/200x200/6495ED/000000"/>
<span class="overlay article-overlay"></span>
</a>
</div>
<div class="article-info">
<div class="article-category">
<a href="#/" class="text-danger">Category</a>
</div>
<h2 class="article-title">
<a class="article-link" href="#/">
Popular post full title you can use this
<span class="overlay article-overlay"></span>
</a>
</h2>
<div class="article-summary">
Bootdey is a gallery of free bootstrap snippets bootdeys, this is a description for no use lorem ipsum
</div>
</div>
</div>
</article>
<article class="clearfix item item-odd">
<div class="teaser">
<div class="article-image">
<a class="image-link article-link" href="#/">
<img class="img-circle img-responsive img-thumbnail" src="https://www.bootdey.com/image/200x200/9932CC/000000"/>
<span class="overlay article-overlay"></span>
</a>
</div>
<div class="article-info">
<div class="article-category">
<a href="#/" class="text-danger">Category</a>
</div>
<h2 class="article-title">
<a class="article-link" href="#/">
Popular post full title you can use this
<span class="overlay article-overlay"></span>
</a>
</h2>
<div class="article-summary">
Bootdey is a gallery of free bootstrap snippets bootdeys, this is a description for no use lorem ipsum
</div>
</div>
</div>
</article>
</div>
<div class="col-md-8">
<article>
<div class="line-item hf-item-odd clearfix">
<div class="content-image">
<a class="image-link article-link" href="#/">
<img class="img-thumbnail" src="https://www.bootdey.com/image/250x150/00CED1/000000"/>
<span class="overlay article-overlay"></span>
</a>
</div>
<div class="hf-info">
<div class="hf-category">
<a href="#/" class="text-danger">Category</a>
</div>
<h2 class="post-title">
<a class="article-link" href="#/">
Post title Bootstrap Html Css Js Snippet
<span class="overlay article-overlay"></span>
</a>
</h2>
<div class="summary">
Bootdey is a gallery of free bootstrap snippets bootdeys, this is a description for no use lorem ipsum all time...
</div>
</div>
</div>
</article>
<article>
<div class="line-item hf-item-odd clearfix">
<div class="content-image">
<a class="image-link article-link" href="#/">
<img class="img-thumbnail" src="https://www.bootdey.com/image/250x150/FF00FF/000000"/>
<span class="overlay article-overlay"></span>
</a>
</div>
<div class="hf-info">
<div class="hf-category">
<a href="#/" class="text-danger">Category</a>
</div>
<h2 class="post-title">
<a class="article-link" href="#/">
Post title Bootstrap Html Css Js Snippet
<span class="overlay article-overlay"></span>
</a>
</h2>
<div class="summary">
Bootdey is a gallery of free bootstrap snippets bootdeys, this is a description for no use lorem ipsum all time...
</div>
</div>
</div>
</article>
<article>
<div class="line-item hf-item-odd clearfix">
<div class="content-image">
<a class="image-link article-link" href="#/">
<img class="img-thumbnail" src="https://www.bootdey.com/image/250x150/4B0082/000000"/>
<span class="overlay article-overlay"></span>
</a>
</div>
<div class="hf-info">
<div class="hf-category">
<a href="#/" class="text-danger">Category</a>
</div>
<h2 class="post-title">
<a class="article-link" href="#/">
Post title Bootstrap Html Css Js Snippet
<span class="overlay article-overlay"></span>
</a>
</h2>
<div class="summary">
Bootdey is a gallery of free bootstrap snippets bootdeys, this is a description for no use lorem ipsum all time...
</div>
</div>
</div>
</article>
<article>
<div class="line-item hf-item-odd clearfix">
<div class="content-image">
<a class="image-link article-link" href="#/">
<img class="img-thumbnail" src="https://www.bootdey.com/image/250x150/20B2AA/000000"/>
<span class="overlay article-overlay"></span>
</a>
</div>
<div class="hf-info">
<div class="hf-category">
<a href="#/" class="text-danger">Category</a>
</div>
<h2 class="post-title">
<a class="article-link" href="#/">
Post title Bootstrap Html Css Js Snippet
<span class="overlay article-overlay"></span>
</a>
</h2>
<div class="summary">
Bootdey is a gallery of free bootstrap snippets bootdeys, this is a description for no use lorem ipsum all time...
</div>
</div>
</div>
</article>
</div>
</div>
</div>
);
}
export default App;4. Now we need to add below code into our my-awesome-project/src/App.css file :
.popular-post{
background:#DDDDDD;
}
.line-item {
background: url("https://bootdey.com/img/Content/border-top-dotted.gif") repeat-x scroll left top rgba(0, 0, 0, 0);
margin: 0 0 0 30px;
padding: 25px 0 15px;
}
.content-image {
float: right;
margin-bottom: 10px;
margin-left: 25px;
margin-top: 5px;
}
.post-title {
margin-bottom: 7px;
margin-top: 3px;
}
.post-title, post-title a {
font-size: 18px;
line-height: 20px;
}
.summary {
color: #666;
font-size: 14px;
line-height: 18px;
margin-bottom: 8px;
}
.teaser {
margin-bottom: 32px;
margin-top: 19px;
text-align: center;
}
.article-info {
padding: 0 29px;
}
.item-odd .article-category {
margin-top: 8px;
}
.article-title {
margin-bottom: 7px;
margin-top: 3px;
}
.article-title, .subfeatured .article-title a {
font-size: 18px;
font-weight: normal;
line-height: 20px;
}
.article-summary {
color: #666;
font-size: 14px;
line-height: 16px;
max-height: 64px;
overflow: hidden;
} 
