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 start
2. 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 again
3. 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" href="https://daneden.github.io/animate.css/animate.min.css"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-12 bootstrap snippets bootdeys">
<div class="x_panel">
<div class="x_content">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12" style={{/*text-align:center;*/}}>
<ul class="pagination pagination-split">
<li><a href="#/">A</a>
</li>
<li><a href="#/">B</a>
</li>
<li><a href="#/">C</a>
</li>
<li><a href="#/">D</a>
</li>
<li><a href="#/">E</a>
</li>
<li>...</li>
<li><a href="#/">W</a>
</li>
<li><a href="#/">X</a>
</li>
<li><a href="#/">Y</a>
</li>
<li><a href="#/">Z</a>
</li>
</ul>
</div>
<div class="clearfix"></div>
<div class="col-md-4 col-sm-4 col-xs-12 animated fadeInDown">
<div class="well profile_view">
<div class="col-sm-12">
<h4 class="brief"><i>Digital Strategist</i></h4>
<div class="left col-xs-7">
<h2>Nicole Pearson</h2>
<p><strong>About: </strong> Web Designer / UI. </p>
<ul class="list-unstyled">
<li><i class="fa fa-phone"></i> Address: </li>
</ul>
</div>
<div class="right col-xs-5 text-center">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-circle img-responsive"/>
</div>
</div>
<div class="col-xs-12 bottom text-center">
<div class="col-xs-12 col-sm-6 emphasis">
<p class="ratings">
<a>4.0</a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star-o"></span></a>
</p>
</div>
<div class="col-xs-12 col-sm-6 emphasis">
<button type="button" class="btn btn-success btn-xs">
<i class="fa fa-user"></i>
<i class="fa fa-comments-o"></i>
</button>
<button type="button" class="btn btn-primary btn-xs">
<i class="fa fa-user"></i> View Profile
</button>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 animated fadeInDown">
<div class="well profile_view">
<div class="col-sm-12">
<h4 class="brief"><i>Digital Strategist</i></h4>
<div class="left col-xs-7">
<h2>Nicole Pearson</h2>
<p><strong>About: </strong> Web Designer / UI. </p>
<ul class="list-unstyled">
<li><i class="fa fa-phone"></i> Address: </li>
</ul>
</div>
<div class="right col-xs-5 text-center">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="img-circle img-responsive"/>
</div>
</div>
<div class="col-xs-12 bottom text-center">
<div class="col-xs-12 col-sm-6 emphasis">
<p class="ratings">
<a>4.0</a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star-o"></span></a>
</p>
</div>
<div class="col-xs-12 col-sm-6 emphasis">
<button type="button" class="btn btn-success btn-xs">
<i class="fa fa-user"></i>
<i class="fa fa-comments-o"></i>
</button>
<button type="button" class="btn btn-primary btn-xs">
<i class="fa fa-user"></i> View Profile
</button>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 animated fadeInDown">
<div class="well profile_view">
<div class="col-sm-12">
<h4 class="brief"><i>Digital Strategist</i></h4>
<div class="left col-xs-7">
<h2>Nicole Pearson</h2>
<p><strong>About: </strong> Web Designer / UI. </p>
<ul class="list-unstyled">
<li><i class="fa fa-phone"></i> Address: </li>
</ul>
</div>
<div class="right col-xs-5 text-center">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="img-circle img-responsive"/>
</div>
</div>
<div class="col-xs-12 bottom text-center">
<div class="col-xs-12 col-sm-6 emphasis">
<p class="ratings">
<a>4.0</a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star-o"></span></a>
</p>
</div>
<div class="col-xs-12 col-sm-6 emphasis">
<button type="button" class="btn btn-success btn-xs">
<i class="fa fa-user"></i>
<i class="fa fa-comments-o"></i>
</button>
<button type="button" class="btn btn-primary btn-xs">
<i class="fa fa-user"></i> View Profile
</button>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 animated fadeInDown">
<div class="well profile_view">
<div class="col-sm-12">
<h4 class="brief"><i>Digital Strategist</i></h4>
<div class="left col-xs-7">
<h2>Nicole Pearson</h2>
<p><strong>About: </strong> Web Designer / UI. </p>
<ul class="list-unstyled">
<li><i class="fa fa-phone"></i> Address: </li>
</ul>
</div>
<div class="right col-xs-5 text-center">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="" class="img-circle img-responsive"/>
</div>
</div>
<div class="col-xs-12 bottom text-center">
<div class="col-xs-12 col-sm-6 emphasis">
<p class="ratings">
<a>4.0</a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star-o"></span></a>
</p>
</div>
<div class="col-xs-12 col-sm-6 emphasis">
<button type="button" class="btn btn-success btn-xs">
<i class="fa fa-user"></i>
<i class="fa fa-comments-o"></i>
</button>
<button type="button" class="btn btn-primary btn-xs">
<i class="fa fa-user"></i> View Profile
</button>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 animated fadeInDown">
<div class="well profile_view">
<div class="col-sm-12">
<h4 class="brief"><i>Digital Strategist</i></h4>
<div class="left col-xs-7">
<h2>Nicole Pearson</h2>
<p><strong>About: </strong> Web Designer / UI. </p>
<ul class="list-unstyled">
<li><i class="fa fa-phone"></i> Address: </li>
</ul>
</div>
<div class="right col-xs-5 text-center">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="" class="img-circle img-responsive"/>
</div>
</div>
<div class="col-xs-12 bottom text-center">
<div class="col-xs-12 col-sm-6 emphasis">
<p class="ratings">
<a>4.0</a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star-o"></span></a>
</p>
</div>
<div class="col-xs-12 col-sm-6 emphasis">
<button type="button" class="btn btn-success btn-xs">
<i class="fa fa-user"></i>
<i class="fa fa-comments-o"></i>
</button>
<button type="button" class="btn btn-primary btn-xs">
<i class="fa fa-user"></i> View Profile
</button>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 animated fadeInDown">
<div class="well profile_view">
<div class="col-sm-12">
<h4 class="brief"><i>Digital Strategist</i></h4>
<div class="left col-xs-7">
<h2>Nicole Pearson</h2>
<p><strong>About: </strong> Web Designer / UI. </p>
<ul class="list-unstyled">
<li><i class="fa fa-phone"></i> Address: </li>
</ul>
</div>
<div class="right col-xs-5 text-center">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-circle img-responsive"/>
</div>
</div>
<div class="col-xs-12 bottom text-center">
<div class="col-xs-12 col-sm-6 emphasis">
<p class="ratings">
<a>4.0</a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star"></span></a>
<a href="#/"><span class="fa fa-star-o"></span></a>
</p>
</div>
<div class="col-xs-12 col-sm-6 emphasis">
<button type="button" class="btn btn-success btn-xs">
<i class="fa fa-user"></i>
<i class="fa fa-comments-o"></i>
</button>
<button type="button" class="btn btn-primary btn-xs">
<i class="fa fa-user"></i> View Profile
</button>
</div>
</div>
</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;}
.profile_view {
margin-bottom: 20px;
display: inline-block;
width: 100%;
-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.3);
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.3);
}
.profile_view:hover {
-webkit-box-shadow: 0 14px 12px 0 rgba(0,0,0,0.17),0 20px 40px 0 rgba(0,0,0,0.3);
box-shadow: 0 14px 12px 0 rgba(0,0,0,0.17),0 20px 40px 0 rgba(0,0,0,0.3);
}
.well.profile_view {
padding: 10px 0 0;
}
.well.profile_view .divider {
border-top: 1px solid #e5e5e5;
padding-top: 5px;
margin-top: 5px;
}
.well.profile_view .ratings {
margin-bottom: 0;
}
.pagination.pagination-split li {
display: inline-block;
margin-right: 3px;
}
.pagination.pagination-split li a {
border-radius: 4px;
color: #768399;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.well.profile_view {
background: #fff;
}
.well.profile_view .bottom {
margin-top: -20px;
background: #F2F5F7;
padding: 9px 0;
border-top: 1px solid #E6E9ED;
}
.well.profile_view .left {
margin-top: 20px;
}
.well.profile_view .left p {
margin-bottom: 3px;
}
.well.profile_view .right {
margin-top: 0px;
padding: 10px;
}
.well.profile_view .img-circle {
border: 1px solid #E6E9ED;
padding: 2px;
}
.well.profile_view h2 {
margin: 5px 0;
font-size:14px;
font-weight:bold;
}
.well.profile_view .ratings {
text-align: left;
font-size: 16px;
}
.well.profile_view .brief {
margin: 0;
font-weight: 300;
}
.profile_left {
background: white;
}