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 page-container">
<div class="row gutters">
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card green">
<figcaption>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Milestone Admin" class="profile"/>
<h5>Aliko Dangote</h5>
<h6>@movies</h6>
<p>On the 28th of October 2016 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#/">
[email protected]
</a>
</li>
<li>
<a href="#/">
www.bootdey.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card blue">
<figcaption>
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="Milestone Admin" class="profile"/>
<h5>Amelia</h5>
<h6>@hollywood</h6>
<p>On the 28th of October 2016 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#/">
[email protected]
</a>
</li>
<li>
<a href="#/">
www.bootdey.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card pink">
<figcaption>
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="Milestone Admin" class="profile"/>
<h5>Emma</h5>
<h6>@star</h6>
<p>On the 28th of October 2016 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#/">
[email protected]
</a>
</li>
<li>
<a href="#/">
www.bootdey.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card brown">
<figcaption>
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="Milestone Admin" class="profile"/>
<h5>Olivia</h5>
<h6>@business</h6>
<p>On the 28th of October 2016 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#/">
[email protected]
</a>
</li>
<li>
<a href="#/">
www.bootdey.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card fb">
<figcaption>
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="Milestone Admin" class="profile"/>
<h5>Harry</h5>
<h6>@writer</h6>
<p>On the 28th of October 2016 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#/">
[email protected]
</a>
</li>
<li>
<a href="#/">
www.bootdey.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card green">
<figcaption>
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="Milestone Admin" class="profile"/>
<h5>George</h5>
<h6>@tester</h6>
<p>On the 28th of October 2016 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#/">
[email protected]
</a>
</li>
<li>
<a href="#/">
www.bootdey.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card red">
<figcaption>
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="Milestone Admin" class="profile"/>
<h5>Emily</h5>
<h6>@designer</h6>
<p>On the 28th of October 2016 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#/">
[email protected]
</a>
</li>
<li>
<a href="#/">
www.bootdey.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card orange">
<figcaption>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Milestone Admin" class="profile"/>
<h5>Julie</h5>
<h6>@fashion</h6>
<p>On the 28th of October 2016 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#/">
[email protected]
</a>
</li>
<li>
<a href="#/">
www.bootdey.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card teal">
<figcaption>
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="Milestone Admin" class="profile"/>
<h5>Taylor</h5>
<h6>@marketing</h6>
<p>On the 28th of October 2016 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#/">
[email protected]
</a>
</li>
<li>
<a href="#/">
www.bootdey.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card gp">
<figcaption>
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="Milestone Admin" class="profile"/>
<h5>Roberts</h5>
<h6>@actress</h6>
<p>On the 28th of October 2016 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#/">
[email protected]
</a>
</li>
<li>
<a href="#/">
www.bootdey.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card blue">
<figcaption>
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="Milestone Admin" class="profile"/>
<h5>O'Sullivan</h5>
<h6>@smart</h6>
<p>On the 28th of October 2016 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#/">
[email protected]
</a>
</li>
<li>
<a href="#/">
www.bootdey.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card orange">
<figcaption>
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="Milestone Admin" class="profile"/>
<h5>O'Brien</h5>
<h6>@football</h6>
<p>On the 28th of October 2016 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#/">
[email protected]
</a>
</li>
<li>
<a href="#/">
www.bootdey.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</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{
background: #eee;
}
.page-container{
margin-top:40px;
}
figure.user-card {
background: #ffffff;
padding: 20px;
border-top: 3px solid #f2f2f2;
border: 1px solid #e1e5f1;
text-align: center;
}
figure.user-card.red {
border-top: 3px solid #fc6d4c;
}
figure.user-card.green {
border-top: 3px solid #3ecfac;
}
figure.user-card.blue {
border-top: 3px solid #5a99ee;
}
figure.user-card.yellow {
border-top: 3px solid #ffc139;
}
figure.user-card.orange {
border-top: 3px solid #ff5000;
}
figure.user-card.teal {
border-top: 3px solid #47BCC7;
}
figure.user-card.pink {
border-top: 3px solid #ff9fd0;
}
figure.user-card.brown {
border-top: 3px solid #79574b;
}
figure.user-card.purple {
border-top: 3px solid #904e95;
}
figure.user-card.fb {
border-top: 3px solid #3B5998;
}
figure.user-card.gp {
border-top: 3px solid #E02F2F;
}
figure.user-card .profile {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
max-width: 72px;
margin-bottom: 20px;
}
figure.user-card h5 {
margin: 0 0 5px 0;
}
figure.user-card h6 {
margin: 0 0 15px 0;
color: #8796af;
font-size: 14px;
}
figure.user-card p {
margin: 0;
padding: 0 0 15px 0;
color: #8796af;
line-height: 150%;
font-size: .85rem;
}
figure.user-card ul.contacts {
margin: 0;
padding: 0 0 15px 0;
line-height: 150%;
font-size: .85rem;
}
figure.user-card ul.contacts li {
padding: .2rem 0;
}
figure.user-card ul.contacts li a {
color: #5a99ee;
}
figure.user-card ul.contacts li a i {
min-width: 36px;
float: left;
font-size: 1rem;
}
figure.user-card ul.contacts li:last-child a {
color: #ff5000;
}
ul li {
list-style-type: none;
}
