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-md-12 col-lg-6">
<div class="card">
<div class="header">
<h2><strong>New</strong> Friends <small>Add new friend in last month</small></h2>
</div>
<div class="body">
<ul class="new_friend_list list-unstyled row">
<li class="col-lg-4 col-md-2 col-sm-6 col-4">
<a href="">
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" class="img-thumbnail" alt="User Image"/>
<h6 class="users_name">Jackson</h6>
<small class="join_date">Today</small>
</a>
</li>
<li class="col-lg-4 col-md-2 col-sm-6 col-4">
<a href="">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" class="img-thumbnail" alt="User Image"/>
<h6 class="users_name">Aubrey</h6>
<small class="join_date">Yesterday</small>
</a>
</li>
<li class="col-lg-4 col-md-2 col-sm-6 col-4">
<a href="">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" class="img-thumbnail" alt="User Image"/>
<h6 class="users_name">Oliver</h6>
<small class="join_date">08 Nov</small>
</a>
</li>
<li class="col-lg-4 col-md-2 col-sm-6 col-4">
<a href="">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="img-thumbnail" alt="User Image"/>
<h6 class="users_name">Isabella</h6>
<small class="join_date">12 Dec</small>
</a>
</li>
<li class="col-lg-4 col-md-2 col-sm-6 col-4">
<a href="">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="img-thumbnail" alt="User Image"/>
<h6 class="users_name">Jacob</h6>
<small class="join_date">12 Dec</small>
</a>
</li>
<li class="col-lg-4 col-md-2 col-sm-6 col-4">
<a href="">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-thumbnail" alt="User Image"/>
<h6 class="users_name">Matthew</h6>
<small class="join_date">17 Dec</small>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-12 col-lg-6">
<div class="card">
<div class="header">
<h2><strong>New</strong> Friends <small>Add new friend in last month</small></h2>
</div>
<div class="body">
<ul class="new_friend_list list-unstyled row">
<li class="col-lg-4 col-md-2 col-sm-6 col-4">
<a href="">
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" class="img-thumbnail" alt="User Image"/>
<h6 class="users_name">Jackson</h6>
<small class="join_date">Today</small>
</a>
</li>
<li class="col-lg-4 col-md-2 col-sm-6 col-4">
<a href="">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" class="img-thumbnail" alt="User Image"/>
<h6 class="users_name">Aubrey</h6>
<small class="join_date">Yesterday</small>
</a>
</li>
<li class="col-lg-4 col-md-2 col-sm-6 col-4">
<a href="">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-thumbnail" alt="User Image"/>
<h6 class="users_name">Oliver</h6>
<small class="join_date">08 Nov</small>
</a>
</li>
<li class="col-lg-4 col-md-2 col-sm-6 col-4">
<a href="">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="img-thumbnail" alt="User Image"/>
<h6 class="users_name">Isabella</h6>
<small class="join_date">12 Dec</small>
</a>
</li>
<li class="col-lg-4 col-md-2 col-sm-6 col-4">
<a href="">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" class="img-thumbnail" alt="User Image"/>
<h6 class="users_name">Jacob</h6>
<small class="join_date">12 Dec</small>
</a>
</li>
<li class="col-lg-4 col-md-2 col-sm-6 col-4">
<a href="">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="img-thumbnail" alt="User Image"/>
<h6 class="users_name">Matthew</h6>
<small class="join_date">17 Dec</small>
</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{
margin-top:20px;
background-color: #f4f6f9;
}
.card {
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
background: #fff;
border-radius: .1875rem;
margin-bottom: 30px;
border: 0;
display: inline-block;
position: relative;
width: 100%;
box-shadow: none;
}
.card .header {
color: #424242;
padding: 20px;
position: relative;
box-shadow: none;
}
.card .header h2 {
color: #757575;
position: relative;
}
.card .header h2:before {
background: #6572b8;
}
.card .header h2 {
font-size: 15px;
}
.card .header h2::before {
position: absolute;
width: 2px;
height: 18px;
left: -20px;
top: 0;
content: '';
}
.theme-purple .card .header h2 strong {
color: #6572b8;
}
.card .header h2 small {
color: #9e9e9e;
line-height: 15px;
}
.card .body {
color: #424242;
font-weight: 400;
padding: 20px;
}
.new_friend_list {
margin-bottom: 0px;
}
.new_friend_list li .users_name {
color: #424242;
text-transform: capitalize;
}
.new_friend_list li .users_name {
margin-top: 5px;
}
.new_friend_list li .users_name{
margin-bottom: 0px;
}
.new_friend_list li .join_date {
color: #757575;
}
a {
outline: none !important;
color: #007bff;
text-decoration: none;
background-color: transparent;
}
