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>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<div class="container bootdey">
<div class="panel panel-default panel-order">
<div class="panel-heading">
<strong>Order history</strong>
<div class="btn-group pull-right">
<div class="btn-group">
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">Filter history <i class="fa fa-filter"></i></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#/">Approved orders</a></li>
<li><a href="#/">Pending orders</a></li>
</ul>
</div>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-1"><img src="https://bootdey.com/img/Content/user_3.jpg" class="media-object img-thumbnail" /></div>
<div class="col-md-11">
<div class="row">
<div class="col-md-12">
<div class="pull-right"><label class="label label-danger">rejected</label></div>
<span><strong>Order name</strong></span> <span class="label label-info">group name</span><br />
Quantity : 2, cost: $323.13 <br />
<a data-placement="top" class="btn btn-success btn-xs glyphicon glyphicon-ok" href="#/" title="View"></a>
<a data-placement="top" class="btn btn-danger btn-xs glyphicon glyphicon-trash" href="#/" title="Danger"></a>
<a data-placement="top" class="btn btn-info btn-xs glyphicon glyphicon-usd" href="#/" title="Danger"></a>
</div>
<div class="col-md-12">order made on: 05/31/2014 by <a href="#/">Jane Doe </a></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1"><img src="https://bootdey.com/img/Content/user_1.jpg" class="media-object img-thumbnail" /></div>
<div class="col-md-11">
<div class="row">
<div class="col-md-12">
<div class="pull-right"><label class="label label-info">pending</label></div>
<span><strong>Order name</strong></span> <span class="label label-info">group name</span><br />
Quantity : 12, cost: $12623.13<br />
<a data-placement="top" class="btn btn-success btn-xs glyphicon glyphicon-ok" href="#/" title="View"></a>
<a data-placement="top" class="btn btn-danger btn-xs glyphicon glyphicon-trash" href="#/" title="Danger"></a>
<a data-placement="top" class="btn btn-info btn-xs glyphicon glyphicon-usd" href="#/" title="Danger"></a>
</div>
<div class="col-md-12">order made on: 06/12/2014 by <a href="#/">Jane Doe </a></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1"><img src="https://bootdey.com/img/Content/user_3.jpg" class="media-object img-thumbnail" /></div>
<div class="col-md-11">
<div class="row">
<div class="col-md-12">
<div class="pull-right"><label class="label label-success">Approved</label></div>
<span><strong>Order name</strong></span> <span class="label label-info">group name</span><br />
Quantity : 4, cost: $523.13<br />
<a data-placement="top" class="btn btn-success btn-xs glyphicon glyphicon-ok" href="#/" title="View"></a>
<a data-placement="top" class="btn btn-danger btn-xs glyphicon glyphicon-trash" href="#/" title="Danger"></a>
<a data-placement="top" class="btn btn-info btn-xs glyphicon glyphicon-usd" href="#/" title="Danger"></a>
</div>
<div class="col-md-12">order made on: 06/20/2014 by <a href="#/">Jane Doe</a></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1"><img src="https://bootdey.com/img/Content/user_2.jpg" class="media-object img-thumbnail" /></div>
<div class="col-md-11">
<div class="row">
<div class="col-md-12">
<div class="pull-right"><label class="label label-info">pending</label></div>
<span><strong>Order name</strong></span> <span class="label label-info">group name</span><br />
Quantity : 4, cost: $523.13<br />
<a data-placement="top" class="btn btn-success btn-xs glyphicon glyphicon-ok" href="#/" title="View"></a>
<a data-placement="top" class="btn btn-danger btn-xs glyphicon glyphicon-trash" href="#/" title="Danger"></a>
<a data-placement="top" class="btn btn-info btn-xs glyphicon glyphicon-usd" href="#/" title="Danger"></a>
</div>
<div class="col-md-12">order made on: 06/20/2014 by <a href="#/">Jane Doe</a></div>
</div>
</div>
</div>
</div>
<div class="panel-footer">Put here some note for example: bootdey si a gallery of free bootstrap snippets bootdeys</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{
background:#eee;
}
.panel-order .row {
border-bottom: 1px solid #ccc;
}
.panel-order .row:last-child {
border: 0px;
}
.panel-order .row .col-md-1 {
text-align: center;
padding-top: 15px;
}
.panel-order .row .col-md-1 img {
width: 50px;
max-height: 50px;
}
.panel-order .row .row {
border-bottom: 0;
}
.panel-order .row .col-md-11 {
border-left: 1px solid #ccc;
}
.panel-order .row .row .col-md-12 {
padding-top: 7px;
padding-bottom: 7px;
}
.panel-order .row .row .col-md-12:last-child {
font-size: 11px;
color: #555;
background: #efefef;
}
.panel-order .btn-group {
margin: 0px;
padding: 0px;
}
.panel-order .panel-body {
padding-top: 0px;
padding-bottom: 0px;
}
.panel-order .panel-deading {
margin-bottom: 0;
} 
