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">
<div class="row">
<div class="col-lg-6">
<div class="articles card">
<div class="card-close">
<div class="dropdown">
<button type="button" id="closeCard4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle"><i class="fa fa-ellipsis-v"></i></button>
<div aria-labelledby="closeCard4" class="dropdown-menu dropdown-menu-right has-shadow"><a href="#/" class="dropdown-item remove"> <i class="fa fa-times"></i>Close</a><a href="#/" class="dropdown-item edit"> <i class="fa fa-gear"></i>Edit</a></div>
</div>
</div>
<div class="card-header d-flex align-items-center">
<h2 class="h3">Trending Articles </h2>
<div class="badge badge-rounded bg-green">4 New </div>
</div>
<div class="card-body no-padding">
<div class="item d-flex align-items-center">
<div class="image"><img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="..." class="img-fluid rounded-circle"/></div>
<div class="text"><a href="#/">
<h3 class="h5">Lorem Ipsum Dolor</h3></a><small>Posted on 5th June 2017 by Aria Smith. </small></div>
</div>
<div class="item d-flex align-items-center">
<div class="image"><img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="..." class="img-fluid rounded-circle"/></div>
<div class="text"><a href="#/">
<h3 class="h5">Lorem Ipsum Dolor</h3></a><small>Posted on 5th June 2017 by Frank Williams. </small></div>
</div>
<div class="item d-flex align-items-center">
<div class="image"><img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="..." class="img-fluid rounded-circle"/></div>
<div class="text"><a href="#/">
<h3 class="h5">Lorem Ipsum Dolor</h3></a><small>Posted on 5th June 2017 by Ashley Wood. </small></div>
</div>
<div class="item d-flex align-items-center">
<div class="image"><img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="..." class="img-fluid rounded-circle"/></div>
<div class="text"><a href="#/">
<h3 class="h5">Lorem Ipsum Dolor</h3></a><small>Posted on 5th June 2017 by Jason Doe. </small></div>
</div>
<div class="item d-flex align-items-center">
<div class="image"><img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="..." class="img-fluid rounded-circle"/></div>
<div class="text"><a href="#/">
<h3 class="h5">Lorem Ipsum Dolor</h3></a><small>Posted on 5th June 2017 by Sam Martinez. </small></div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="articles card">
<div class="card-close">
<div class="dropdown">
<button type="button" id="closeCard4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle"><i class="fa fa-ellipsis-v"></i></button>
<div aria-labelledby="closeCard4" class="dropdown-menu dropdown-menu-right has-shadow"><a href="#/" class="dropdown-item remove"> <i class="fa fa-times"></i>Close</a><a href="#/" class="dropdown-item edit"> <i class="fa fa-gear"></i>Edit</a></div>
</div>
</div>
<div class="card-header d-flex align-items-center">
<h2 class="h3">Trending Articles </h2>
<div class="badge badge-rounded bg-green">4 New </div>
</div>
<div class="card-body no-padding">
<div class="item d-flex align-items-center">
<div class="image"><img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="..." class="img-fluid rounded-circle"/></div>
<div class="text"><a href="#/">
<h3 class="h5">Lorem Ipsum Dolor</h3></a><small>Posted on 5th June 2017 by Aria Smith. </small></div>
</div>
<div class="item d-flex align-items-center">
<div class="image"><img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="..." class="img-fluid rounded-circle"/></div>
<div class="text"><a href="#/">
<h3 class="h5">Lorem Ipsum Dolor</h3></a><small>Posted on 5th June 2017 by Frank Williams. </small></div>
</div>
<div class="item d-flex align-items-center">
<div class="image"><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="..." class="img-fluid rounded-circle"/></div>
<div class="text"><a href="#/">
<h3 class="h5">Lorem Ipsum Dolor</h3></a><small>Posted on 5th June 2017 by Ashley Wood. </small></div>
</div>
<div class="item d-flex align-items-center">
<div class="image"><img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="..." class="img-fluid rounded-circle"/></div>
<div class="text"><a href="#/">
<h3 class="h5">Lorem Ipsum Dolor</h3></a><small>Posted on 5th June 2017 by Jason Doe. </small></div>
</div>
<div class="item d-flex align-items-center">
<div class="image"><img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="..." class="img-fluid rounded-circle"/></div>
<div class="text"><a href="#/">
<h3 class="h5">Lorem Ipsum Dolor</h3></a><small>Posted on 5th June 2017 by Sam Martinez. </small></div>
</div>
</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;
background:#eee;
}
.articles a {
text-decoration: none !important;
display: block;
margin-bottom: 0;
color: #555
}
.articles .badge {
font-size: 0.7em;
padding: 5px 10px;
line-height: 1;
margin-left: 10px
}
.articles .item {
padding: 20px
}
.articles .item:nth-of-type(even) {
background: #fafafa
}
.articles .item .image {
min-width: 50px;
max-width: 50px;
height: 50px;
margin-right: 15px
}
.articles .item img {
padding: 3px;
border: 1px solid #28a745
}
.articles .item h3 {
color: #555;
font-weight: 400;
margin-bottom: 0
}
.articles .item small {
color: #aaa;
font-size: 0.75em
}
.card-close {
position: absolute;
top: 15px;
right: 15px
}
.card-close .dropdown-toggle {
color: #999;
background: none;
border: none
}
.card-close .dropdown-toggle:after {
display: none
}
.card-close .dropdown-menu {
border: none;
min-width: auto;
font-size: 0.9em;
border-radius: 0;
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1), -2px -2px 3px rgba(0, 0, 0, 0.1);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1), -2px -2px 3px rgba(0, 0, 0, 0.1)
}
.card-close .dropdown-menu a {
color: #999 !important
}
.card-close .dropdown-menu a:hover {
background: #796AEE;
color: #fff !important
}
.card-close .dropdown-menu a i {
margin-right: 10px;
-webkit-transition: none;
transition: none
}
