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="row">
<div class="panel panel-default widget">
<div class="panel-heading">
<span class="glyphicon glyphicon-comment"></span>
<h3 class="panel-title">
Recent Comments</h3>
<span class="label label-info">
78</span>
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-xs-2 col-md-1">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-circle img-responsive img-user" alt="" /></div>
<div class="col-xs-10 col-md-11">
<div>
<a href="#/">
Google Style Login Page Design Using Bootstrap</a>
<div class="mic-info">
By: <a href="#/">Bhaumik Patel</a> on 2 Aug 2013
</div>
</div>
<div class="comment-text">
Awesome design
</div>
<div class="action">
<button type="button" class="btn btn-primary btn-xs" title="Edit">
<span class="glyphicon glyphicon-pencil"></span>
</button>
<button type="button" class="btn btn-success btn-xs" title="Approved">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button type="button" class="btn btn-danger btn-xs" title="Delete">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-xs-2 col-md-1">
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" class="img-circle img-responsive img-user" alt="" /></div>
<div class="col-xs-10 col-md-11">
<div>
<a href="#/">Admin Panel Quick Shortcuts</a>
<div class="mic-info">
By: <a href="#/">Bhaumik Patel</a> on 11 Nov 2013
</div>
</div>
<div class="comment-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
</div>
<div class="action">
<button type="button" class="btn btn-primary btn-xs" title="Edit">
<span class="glyphicon glyphicon-pencil"></span>
</button>
<button type="button" class="btn btn-success btn-xs" title="Approved">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button type="button" class="btn btn-danger btn-xs" title="Delete">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-xs-2 col-md-1">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" class="img-circle img-responsive img-user" alt="" /></div>
<div class="col-xs-10 col-md-11">
<div>
<a href="#/">Cool Sign Up</a>
<div class="mic-info">
By: <a href="#/">Bhaumik Patel</a> on 11 Nov 2013
</div>
</div>
<div class="comment-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
</div>
<div class="action">
<button type="button" class="btn btn-primary btn-xs" title="Edit">
<span class="glyphicon glyphicon-pencil"></span>
</button>
<button type="button" class="btn btn-success btn-xs" title="Approved">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button type="button" class="btn btn-danger btn-xs" title="Delete">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</div>
</div>
</li>
</ul>
<a href="#/" class="btn btn-info btn-sm btn-block" role="button"><span class="glyphicon glyphicon-refresh"></span> More</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 {
padding-top: 30px;
background: #eee;
}
.widget .panel-body {
padding: 0px;
}
.widget .list-group {
margin-bottom: 0;
}
.widget .panel-title {
display: inline;
}
.widget .label-info {
float: right;
}
.widget li.list-group-item {
border-radius: 0;
border: 0;
border-top: 1px solid #ddd;
}
.widget li.list-group-item:hover {
background-color: rgba(86, 61, 124, 0.1);
}
.widget .mic-info {
color: #666666;
font-size: 11px;
}
.widget .action {
margin-top: 5px;
}
.widget .comment-text {
font-size: 12px;
}
.widget .btn-block {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.img-user {
width: 80px;
height: auto;
}
