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>
<div class="col-md-8 col-md-offset-2 bootstrap snippets bootdeys">
<div class="widget-container scrollable list rollodex">
<div class="heading">
<i class="fa fa-comment"></i>Rollodex<i class="fa fa-plus pull-right"></i><i class="fa fa-search pull-right"></i><i class="fa fa-refresh pull-right"></i>
</div>
<div class="widget-content">
<div class="roll-title">
A
</div>
<ul>
<li>
<img width="30" height="30" src="https://bootdey.com/img/Content/avatar/avatar1.png"/><a href="#/">Joan Andrews</a>
</li>
<li>
<img width="30" height="30" src="https://bootdey.com/img/Content/avatar/avatar2.png"/><a href="#/">Jose Anderson</a>
</li>
<li>
<img width="30" height="30" src="https://bootdey.com/img/Content/avatar/avatar3.png"/><a href="#/">Phil Aaron</a>
</li>
</ul>
<div class="roll-title">
B
</div>
<ul>
<li>
<img width="30" height="30" src="https://bootdey.com/img/Content/avatar/avatar1.png"/><a href="#/">Samatha Brown</a>
</li>
<li>
<img width="30" height="30" src="https://bootdey.com/img/Content/avatar/avatar2.png"/><a href="#/">Chris Baker</a>
</li>
<li>
<img width="30" height="30" src="https://bootdey.com/img/Content/avatar/avatar3.png"/><a href="#/">Kristin Blues</a>
</li>
</ul>
<div class="roll-title">
C
</div>
<ul>
<li>
<img width="30" height="30" src="https://bootdey.com/img/Content/avatar/avatar1.png"/><a href="#/">Adam Carter</a>
</li>
<li>
<img width="30" height="30" src="https://bootdey.com/img/Content/avatar/avatar2.png"/><a href="#/">Greg Campbell</a>
</li>
<li>
<img width="30" height="30" src="https://bootdey.com/img/Content/avatar/avatar3.png"/><a href="#/">Judy Collins</a>
</li>
</ul>
<div class="roll-title">
D
</div>
<ul>
<li>
<img width="30" height="30" src="https://bootdey.com/img/Content/avatar/avatar1.png"/><a href="#/">John Smith</a>
</li>
</ul>
<div class="roll-title">
E
</div>
<ul>
<li>
<img width="30" height="30" src="https://bootdey.com/img/Content/avatar/avatar1.png"/><a href="#/">John Smith</a>
</li>
<li>
<img width="30" height="30" src="https://bootdey.com/img/Content/avatar/avatar1.png"/><a href="#/">John Smith</a>
</li>
</ul>
<div class="roll-title">
F
</div>
<div class="roll-title">
G
</div>
<div class="roll-title">
H
</div>
<div class="roll-title">
I
</div>
<div class="roll-title">
J
</div>
<ul>
<li>
<img width="30" height="30" src="https://bootdey.com/img/Content/avatar/avatar1.png"/><a href="#/">John Smith</a>
</li>
<li>
<img width="30" height="30" src="https://bootdey.com/img/Content/avatar/avatar2.png"/><a href="#/">John Smith</a>
</li>
<li>
<img width="30" height="30" src="https://bootdey.com/img/Content/avatar/avatar3.png"/><a href="#/">John Smith</a>
</li>
</ul>
<div class="roll-title">
K
</div>
<div class="roll-title">
L
</div>
<div class="roll-title">
M
</div>
<div class="roll-title">
N
</div>
<div class="roll-title">
O
</div>
<div class="roll-title">
P
</div>
<div class="roll-title">
Q
</div>
<div class="roll-title">
R
</div>
<div class="roll-title">
S
</div>
<ul>
<li>
<img width="30" height="30" src="https://bootdey.com/img/Content/avatar/avatar1.png"/><a href="#/">John Smith</a>
</li>
<li>
<img width="30" height="30" src="https://bootdey.com/img/Content/avatar/avatar2.png"/><a href="#/">Brian Sullivan</a>
</li>
<li>
<img width="30" height="30" src="https://bootdey.com/img/Content/avatar/avatar3.png"/><a href="#/">Chris Stevens</a>
</li>
</ul>
<div class="roll-title">
T
</div>
<div class="roll-title">
U
</div>
<div class="roll-title">
V
</div>
<div class="roll-title">
W
</div>
<div class="roll-title">
</div>
<div class="roll-title">
Y
</div>
<div class="roll-title">
Z
</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:#eee;
}
.rollodex {
height: 500px !important; }
.rollodex img {
border-radius: 50%; }
.rollodex ul li:only-child {
border: 0; }
.roll-title {
background: #efefef;
width: 100%;
text-align: center;
padding: 2px 0 2px 0;
margin: 1px 0 1px 0; }
.roll-item {
padding: 20px 0 20px 0;
}
.widget-container {
min-height: 320px;
background: white;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
.widget-container.fluid-height {
height: auto;
min-height: 0; }
.widget-container.small {
min-height: 120px;
height: 200px; }
.widget-container.gallery {
min-height: 400px; }
.widget-container .heading {
background: rgba(255, 255, 255, 0.94);
height: 50px;
padding: 15px 15px;
color: #007aff;
font-size: 15px;
width: 100%;
font-weight: 400;
margin: 0; }
.widget-container .heading [class^="fa"], .widget-container .heading [class*="fa"] {
margin-right: 10px;
font-size: 14px; }
.widget-container .heading [class^="fa"].pull-right, .widget-container .heading [class*="fa"].pull-right {
margin-right: 0px;
margin-left: 15px;
opacity: 0.35;
font-size: 1.1em; }
.widget-container .heading [class^="fa"]:hover, .widget-container .heading [class*="fa"]:hover {
cursor: pointer;
opacity: 1; }
.widget-container .tabs {
background: whitesmoke;
border-bottom: 1px solid #dddddd; }
.widget-container .widget-content {
width: 100%; }
.widget-container.scrollable {
position: relative;
height: 400px;
padding-top: 50px; }
.widget-container.scrollable.chat-home {
height: 427px; }
.widget-container.scrollable .heading {
position: absolute;
top: 0;
left: 0;
z-index: 10; }
.widget-container.scrollable .shadow {
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); }
.widget-container.scrollable .widget-content {
height: 100%;
position: relative;
overflow-y: auto;
-webkit-overflow-scrolling: touch; }
.padded {
padding: 15px;
}
.list ul li {
padding: 10px 15px 12px 2px;
border-bottom: 1px solid #e2e2e2;
margin: 0;
}
.list ul {
list-style: none;
padding-left: 15px;
margin: 0;
}