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="panel-body inf-content">
<div class="row">
<div class="col-md-4">
<img alt="" style={{/*width:600px;*/}} title="" class="img-circle img-thumbnail isTooltip" src="https://bootdey.com/img/Content/avatar/avatar7.png" data-original-title="Usuario"/>
<ul title="Ratings" class="list-inline ratings text-center">
<li><a href="#/"><span class="glyphicon glyphicon-star"></span></a></li>
<li><a href="#/"><span class="glyphicon glyphicon-star"></span></a></li>
<li><a href="#/"><span class="glyphicon glyphicon-star"></span></a></li>
<li><a href="#/"><span class="glyphicon glyphicon-star"></span></a></li>
<li><a href="#/"><span class="glyphicon glyphicon-star"></span></a></li>
</ul>
</div>
<div class="col-md-6">
<strong>Information</strong><br/>
<div class="table-responsive">
<table class="table table-user-information">
<tbody>
<tr>
<td>
<strong>
<span class="glyphicon glyphicon-asterisk text-primary"></span>
Identificacion
</strong>
</td>
<td class="text-primary">
123456789
</td>
</tr>
<tr>
<td>
<strong>
<span class="glyphicon glyphicon-user text-primary"></span>
Name
</strong>
</td>
<td class="text-primary">
Bootdey
</td>
</tr>
<tr>
<td>
<strong>
<span class="glyphicon glyphicon-cloud text-primary"></span>
Lastname
</strong>
</td>
<td class="text-primary">
Bootstrap
</td>
</tr>
<tr>
<td>
<strong>
<span class="glyphicon glyphicon-bookmark text-primary"></span>
Username
</strong>
</td>
<td class="text-primary">
bootnipets
</td>
</tr>
<tr>
<td>
<strong>
<span class="glyphicon glyphicon-eye-open text-primary"></span>
Role
</strong>
</td>
<td class="text-primary">
Admin
</td>
</tr>
<tr>
<td>
<strong>
<span class="glyphicon glyphicon-envelope text-primary"></span>
Email
</strong>
</td>
<td class="text-primary">
[email protected]
</td>
</tr>
<tr>
<td>
<strong>
<span class="glyphicon glyphicon-calendar text-primary"></span>
created
</strong>
</td>
<td class="text-primary">
20 jul 20014
</td>
</tr>
<tr>
<td>
<strong>
<span class="glyphicon glyphicon-calendar text-primary"></span>
Modified
</strong>
</td>
<td class="text-primary">
20 jul 20014 20:00:00
</td>
</tr>
</tbody>
</table>
</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 :
.inf-content{
border:1px solid #DDDDDD;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.3);
} 
