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>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container bootstrap snippets bootdey">
<div class="row">
<div class="post-list">
<div class="row">
<div class="col-sm-2">
<div class="picture">
<img alt="Opt wizard thumbnail" src="https://bootdey.com/img/Content/user_1.jpg"/>
</div>
</div>
<div class="col-sm-6">
<h4>
<a hre="#" class="username">Deyson Bejarano</a>
<label class="label label-info">#BootdeyFromDeyDey</label>
</h4>
<h5>
<i class="fa fa-calendar"></i>
Aug 06, 12:48
</h5>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit lectus, efficitur eu eros vel, luctus aliquet est. Sed sit amet ligula non mauris porta dignissim..</p>
</div>
<div class="col-sm-4" data-no-turbolink="">
<a class="btn btn-info btn-download btn-round pull-right makeLoading" href="#/">
<i class="fa fa-share"></i> View
</a>
</div>
</div>
</div>
<div class="post-list">
<div class="row">
<div class="col-sm-2">
<div class="picture">
<img alt="Opt wizard thumbnail" src="https://bootdey.com/img/Content/user_2.jpg"/>
</div>
</div>
<div class="col-sm-6">
<h4>
<a hre="#" class="username">Starla muscle</a>
<label class="label label-info">#responsive</label>
</h4>
<h5>
<i class="fa fa-calendar"></i>
Aug 06, 12:48
</h5>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit lectus, efficitur eu eros vel, luctus aliquet est. Sed sit amet ligula non mauris porta dignissim....</p>
</div>
<div class="col-sm-4" data-no-turbolink="">
<a class="btn btn-info btn-download btn-round pull-right makeLoading" href="#/">
<i class="fa fa-share"></i> View
</a>
</div>
</div>
</div>
<div class="post-list">
<div class="row">
<div class="col-sm-2">
<div class="picture">
<img alt="Opt wizard thumbnail" src="https://bootdey.com/img/Content/user_3.jpg"/>
</div>
</div>
<div class="col-sm-6">
<h4>
<a hre="#" class="username">Barbao"s slim</a>
<label class="label label-info">#BootdeyRules</label>
</h4>
<h5>
<i class="fa fa-calendar"></i>
Aug 06, 12:48
</h5>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit lectus, efficitur eu eros vel, luctus aliquet est. Sed sit amet ligula non mauris porta dignissim....</p>
</div>
<div class="col-sm-4" data-no-turbolink="">
<a class="btn btn-info btn-download btn-round pull-right makeLoading" href="#/">
<i class="fa fa-share"></i> View
</a>
</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;}
.post-list {
position: relative;
padding: 5px 0;
}
.post-list .picture {
max-width: 400px;
overflow: hidden;
height: auto;
border-radius: 6px;
}
.post-list .label{
font-weight:normal;
}
.post-list .picture {
max-width: 210px;
}
.post-list .picture img {
width: 100%;
}
.post-list h4 {
font-size: 20px;
}
.post-list h5 {
color: #888;
}
.post-list p {
float: left;
}
.post-list:after {
height: 1px;
background: #EEEEEE;
width: 83.3333%;
bottom: 0;
right: 0;
content: "";
display: block;
position: absolute;
}
.post-list .btn-download {
margin-top: 45px;
}
.btn-info {
color: #1084FF;
border-color: #269abc;
}
.btn-round {
border-width: 1px;
border-radius: 30px !important;
opacity: 0.79;
padding: 9px 18px;
}
.btn {
border-width: 2px;
background-color: rgba(0,0,0,0);
font-weight: 400;
opacity: 0.8;
padding: 7px 16px;
}