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">
<div class="row">
<div class="col-md-4">
<div class="widget-container">
<div class="widget">
<div class="profile-card">
<div class="card-header">
<div class="header-avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="andy"/>
</div>
<div class="header-name">
Anderson Charlotte
</div>
</div>
<div class="card-body bg-warning">
<div class="body-description">
A user profile is a group of settings that define how Outlook is set up for a particular user. For example, a profile may include access to a mailbox on Microsoft Exchange Server, and specify that the Outlook Address Book appear in the Address Book dialog box. A profile can contain any number of information services.
</div>
</div>
<div class="card-footer">
<div class="footer-social">
<div class="row">
<div class="col-xs-3">
<a href="">
<i class="fa fa-facebook"></i>
</a>
</div>
<div class="col-xs-3">
<a href="">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="col-xs-3">
<a href="">
<i class="fa fa-dribbble"></i>
</a>
</div>
<div class="col-xs-3">
<a href="">
<i class="fa fa-instagram"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="widget-container">
<div class="widget">
<div class="profile-card">
<div class="card-header">
<div class="header-avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="claudio"/>
</div>
<div class="header-name">
Caludio Morrison
</div>
</div>
<div class="card-body bg-primary">
<div class="body-description">
A user profile is a group of settings that define how Outlook is set up for a particular user. For example, a profile may include access to a mailbox on Microsoft Exchange Server, and specify that the Outlook Address Book appear in the Address Book dialog box. A profile can contain any number of information services.
</div>
</div>
<div class="card-footer">
<div class="footer-social">
<div class="row">
<div class="col-xs-3">
<a href="">
<i class="fa fa-facebook"></i>
</a>
</div>
<div class="col-xs-3">
<a href="">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="col-xs-3">
<a href="">
<i class="fa fa-dribbble"></i>
</a>
</div>
<div class="col-xs-3">
<a href="">
<i class="fa fa-instagram"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="widget-container">
<div class="widget">
<div class="profile-card">
<div class="card-header">
<div class="header-avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="anna"/>
</div>
<div class="header-name">
Markez Chan
</div>
</div>
<div class="card-body bg-info">
<div class="body-description">
A user profile is a group of settings that define how Outlook is set up for a particular user.
For example, a profile may include access to a mailbox on Microsoft Exchange Server, and specify that the Outlook Address Book appear in the Address Book dialog box. A profile can contain any number of information services.
</div>
</div>
<div class="card-footer">
<div class="footer-social">
<div class="row">
<div class="col-xs-3">
<a href="">
<i class="fa fa-facebook"></i>
</a>
</div>
<div class="col-xs-3">
<a href="">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="col-xs-3">
<a href="">
<i class="fa fa-dribbble"></i>
</a>
</div>
<div class="col-xs-3">
<a href="">
<i class="fa fa-instagram"></i>
</a>
</div>
</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;
background:#eee;
}
.widget-container {
-webkit-border-radius: 2px;
-webkit-background-clip: padding-box;
-moz-border-radius: 2px;
-moz-background-clip: padding;
border-radius: 2px;
background-clip: padding-box;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
margin-bottom: 30px
}
.widget-container .widget {
margin-bottom: 0
}
.widget-container>.row {
margin-right: 0 !important;
margin-left: 0 !important
}
.widget-container>.row>[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important
}
.widget {
-webkit-border-radius: 2px;
-webkit-background-clip: padding-box;
-moz-border-radius: 2px;
-moz-background-clip: padding;
border-radius: 2px;
background-clip: padding-box;
background-color: #fff;
font-weight: 300;
margin-bottom: 30px;
position: relative;
vertical-align: middle
}
.widget .row {
font-size: 0;
margin-left: 0;
margin-right: 0
}
.widget .row:before {
display: none
}
.widget .row .col {
font-size: 11px
}
.widget .row .col:first-child {
-webkit-border-radius: 2px 0 0 2px;
-webkit-background-clip: padding-box;
-moz-border-radius: 2px 0 0 2px;
-moz-background-clip: padding;
border-radius: 2px 0 0 2px;
background-clip: padding-box
}
.widget .row .col:last-child {
-webkit-border-radius: 0 2px 2px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 2px 2px 0;
-moz-background-clip: padding;
border-radius: 0 2px 2px 0;
background-clip: padding-box
}
.widget .col {
display: inline-block;
vertical-align: top
}
.widget [class*=col-] {
font-size: 11px;
margin: 0;
padding: 0
}
.widget .widget-stat {
position: absolute
}
.widget .widget-stat.top {
top: 7px
}
.widget .widget-stat.right {
right: 10px
}
.widget .widget-stat.left {
left: 10px
}
.widget .widget-stat.bottom {
bottom: 7px
}
.widget .widget-stat strong,
.widget .widget-stat span,
.widget .widget-stat i,
.widget .widget-stat div {
vertical-align: top
}
.widget .progress {
margin-bottom: 0
}
.profile-card .card-header .header-avatar {
text-align: center
}
.profile-card .card-header .header-avatar img {
margin: 25px 0 15px;
width: 128px;
height: 128px
}
.profile-card .card-header .header-name {
font-size: 20px;
font-weight: 400;
text-align: center
}
.profile-card .card-body {
-webkit-transform: skew(0deg, -10deg);
-moz-transform: skew(0deg, -10deg);
-o-transform: skew(0deg, -10deg);
-ms-transform: skew(0deg, -10deg);
transform: skew(0deg, -10deg);
margin-top: 30px;
min-height: 100px;
padding: 50px 20px
}
.profile-card .card-body .body-description {
-webkit-transform: skew(0deg, 10deg);
-moz-transform: skew(0deg, 10deg);
-o-transform: skew(0deg, 10deg);
-ms-transform: skew(0deg, 10deg);
transform: skew(0deg, 10deg);
color: #fff;
font-size: 13px
}
.profile-card .card-footer {
margin-top: 50px;
padding: 10px 0 20px
}
.profile-card .card-footer .footer-social {
text-align: center
}
.profile-card .card-footer .footer-social .row {
margin: 0
}
.profile-card .card-footer .footer-social i {
color: #292929;
font-size: 20px
}
.bg-primary {
background-color: #29c7ca !important;
color: #fff !important
}
.bg-success {
background-color: #1dbc9c !important;
color: #fff !important
}
.bg-info {
background-color: #34b5dc !important;
color: #fff !important
}
.bg-warning {
background-color: #ffc107 !important;
color: #fff !important
}
.bg-danger {
background-color: #cd4237 !important;
color: #fff !important
}
.bg-inverse {
background-color: #fefefe !important;
color: #292929 !important
}
.bg-white {
background-color: #fff !important;
color: #292929 !important
}
.bg-transparent {
background-color: transparent !important
}
.bg-body {
background-color: #f1f3f2 !important
}
.bg-highlight {
background-color: #ff8
}
.bg-default-darker {
background-color: #212121
}
