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 href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="well well-white mini-profile-widget bootdey.com">
<div class="col-md-6">
<div class="image-container">
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" class="avatar img-responsive" alt="avatar"/>
</div>
</div>
<div class="col-md-6">
<div class="details">
<h4>Kevin Mckoy</h4>
<hr/>
<div>Works at Bootdey</div>
<div>Attended University of Technology</div>
<div>Lives in Miami, Florida</div>
<p class="mg-top-20">
<a href="#/" class="btn btn-blue">
<i class="fa fa-facebook fa-fw"></i>
</a>
<a href="#/" class="btn btn-info">
<i class="fa fa-twitter fa-fw"></i>
</a>
<a href="#/" class="btn btn-red">
<i class="fa fa-google-plus fa-fw"></i>
</a>
</p>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="well well-purple mini-profile-widget bootdey.com">
<div class="col-md-6">
<div class="image-container">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="avatar img-responsive" alt="avatar"/>
</div>
</div>
<div class="col-md-6">
<div class="details">
<h4>Kevin Mckoy</h4>
<hr/>
<div>Works at Bootdey</div>
<div>Attended University of Technology</div>
<div>Lives in Miami, Florida</div>
<p class="mg-top-20">
<a href="#/" class="btn btn-blue">
<i class="fa fa-facebook fa-fw"></i>
</a>
<a href="#/" class="btn btn-info">
<i class="fa fa-twitter fa-fw"></i>
</a>
<a href="#/" class="btn btn-red">
<i class="fa fa-google-plus fa-fw"></i>
</a>
</p>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="well well-blue mini-profile-widget">
<div class="col-md-6">
<div class="image-container">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="avatar img-responsive" alt="avatar"/>
</div>
</div>
<div class="col-md-6">
<div class="details">
<h4>John Doe2</h4>
<hr/>
<div>Works at Bootdey in big</div>
<div>Attended University of Technology</div>
<div>Lives in Miami, Florida</div>
<div class="mg-top-10">32 Followers | 120 Following | 18 Posts</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="well well-green mini-profile-widget">
<div class="col-md-6">
<div class="image-container">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" class="avatar img-responsive" alt="avatar"/>
</div>
</div>
<div class="col-md-6">
<div class="details">
<h4>John Doe2</h4>
<hr/>
<div>Works at Bootdey in big</div>
<div>Attended University of Technology</div>
<div>Lives in Miami, Florida</div>
<div class="mg-top-10">32 Followers | 120 Following | 18 Posts</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="well well-pink mini-profile-widget bootdey.com">
<div class="col-md-6">
<div class="image-container">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" class="avatar img-responsive" alt="avatar"/>
</div>
</div>
<div class="col-md-6">
<div class="details">
<h4>Kevin Mckoy</h4>
<hr/>
<div>Works at Bootdey</div>
<div>Attended University of Technology</div>
<div>Lives in Miami, Florida</div>
<p class="mg-top-20">
<a href="#/" class="btn btn-blue">
<i class="fa fa-facebook fa-fw"></i>
</a>
<a href="#/" class="btn btn-info">
<i class="fa fa-twitter fa-fw"></i>
</a>
<a href="#/" class="btn btn-red">
<i class="fa fa-google-plus fa-fw"></i>
</a>
</p>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="well well-red mini-profile-widget bootdey.com">
<div class="col-md-6">
<div class="image-container">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="avatar img-responsive" alt="avatar"/>
</div>
</div>
<div class="col-md-6">
<div class="details">
<h4>Kevin Mckoy</h4>
<hr/>
<div>Works at Bootdey</div>
<div>Attended University of Technology</div>
<div>Lives in Miami, Florida</div>
<p class="mg-top-20">
<a href="#/" class="btn btn-blue">
<i class="fa fa-facebook fa-fw"></i>
</a>
<a href="#/" class="btn btn-info">
<i class="fa fa-twitter fa-fw"></i>
</a>
<a href="#/" class="btn btn-red">
<i class="fa fa-google-plus fa-fw"></i>
</a>
</p>
</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;
background:#eee;
}
/* Component: Well */
.well {
overflow: hidden;
border-radius: 0;
margin-bottom: 30px;
}
.well .well-heading .controls {
position: absolute;
top: 10px;
right: 30px;
}
.well .well-body {
margin-top: 20px;
position: relative;
z-index: 3;
}
.well .well-image {
font-size: 90px;
line-height: 90px;
position: absolute;
top: 20px;
right: 30px;
z-index: 1;
color: rgba(0, 0, 0, 0.15);
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.well.well-solid {
color: white;
}
.well:hover .well-image {
font-size: 60px;
}
.well-white {
background-color: white;
color: #454545;
}
.well-blue {
background-color: #2980b9;
color: white;
}
.well-light-blue {
background-color: #3498db;
color: white;
}
.well-green {
background-color: #27ae60;
color: white;
}
.well-light-green {
background-color: #2ecc71;
color: white;
}
.well-orange {
background-color: #e82c0c;
color: white;
}
.well-light-orange {
background-color: #ff530d;
color: white;
}
.well-red {
background-color: #d40d12;
color: white;
}
.well-light-red {
background-color: #ff1d23;
color: white;
}
.well-purple {
background-color: #8e44ad;
color: white;
}
.well-light-purple {
background-color: #9b59b6;
color: white;
}
.well-pink {
background-color: #fe31ab;
color: white;
}
.well-light-pink {
background-color: #fd32c0;
color: white;
}
.mini-profile-widget .image-container .avatar {
width: 180px;
height: 180px;
display: block;
margin: 0 auto;
border-radius: 50%;
background: white;
padding: 4px;
border: 1px solid #dddddd;
}
.btn-blue {
background-color: #3498db;
border-color: #3498db;
color: white;
}
.btn-blue:hover,
.btn-blue:visited {
background-color: #2980b9;
color: white;
}
.btn-green {
background-color: #2ecc71;
border-color: #27ae60;
color: white;
}
.btn-green:hover,
.btn-green:visited {
background-color: #27ae60;
color: white;
}
.btn-orange {
background-color: #ff530d;
border-color: #e82c0c;
color: white;
}
.btn-orange:hover,
.btn-orange:visited {
background-color: #e82c0c;
color: white;
}
.btn-red {
background-color: #ff1d23;
border-color: #d40d12;
color: white;
}
.btn-red:hover,
.btn-red:visited {
background-color: #d40d12;
color: white;
}
.btn-purple {
background-color: #9b59b6;
border-color: #8e44ad;
color: white;
}
.btn-purple:hover,
.btn-purple:visited {
background-color: #8e44ad;
color: white;
}
.btn-pink {
background-color: #fd32c0;
border-color: #fe31ab;
color: white;
}
.btn-pink:hover,
.btn-pink:visited {
background-color: #fe31ab;
color: white;
}
