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 margin-btm-20">
<div class="quote dark">
<blockquote>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
</blockquote>
</div>
<div class="quote-footer text-right">
<div class="quote-author-img">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt=""/>
</div>
<h4>Rakesh Sharma</h4>
<p>
<strong>Design_mylife</strong>
</p>
</div>
</div>
<div class="col-md-4 margin-btm-20">
<div class="quote green">
<blockquote>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
</blockquote>
</div>
<div class="quote-footer text-right">
<div class="quote-author-img">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt=""/>
</div>
<h4>Rakesh Sharma</h4>
<p>
<strong>Design_mylife</strong>
</p>
</div>
</div>
<div class="col-md-4 margin-btm-20">
<div class="quote dark">
<blockquote>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
</blockquote>
</div>
<div class="quote-footer text-right">
<div class="quote-author-img">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt=""/>
</div>
<h4>Rakesh Sharma</h4>
<p>
<strong>Design_mylife</strong>
</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 margin-btm-20">
<div class="quote dark">
<blockquote>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
</blockquote>
</div>
<div class="quote-footer text-right">
<div class="quote-author-img">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt=""/>
</div>
<h4>Rakesh Sharma</h4>
<p>
<strong>Design_mylife</strong>
</p>
</div>
</div>
<div class="col-md-8 margin-btm-20">
<div class="quote green">
<blockquote>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
</blockquote>
</div>
<div class="quote-footer text-right">
<div class="quote-author-img">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt=""/>
</div>
<h4>Rakesh Sharma</h4>
<p>
<strong>Design_mylife</strong>
</p>
</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;}
.testimonials-v-2 {
padding: 100px 0;
overflow: hidden;
}
.testi-slide {
text-align: center;
}
.testi-slide img {
width: 92px;
height: 92px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}
.testi-slide p {
margin: 20px 0;
font-size: 16px;
font-weight: 400;
line-height: 30px;
font-style: italic;
}
.testi-slide i {
color: #32c5d2;
margin-right: 10px;
}
.testi-slide h4 {
font-weight: 400;
font-size: 16px;
font-family: "Lato", sans-serif !important;
font-style: italic;
}
.testi-slide .flex-control-paging li a {
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
box-shadow: none;
background: transparent !important;
border: 2px solid #ccc;
width: 8px;
height: 8px;
}
.testi-slide .flex-control-paging li a.flex-active {
background: transparent !important;
border: 2px solid #32c5d2;
}
.quote {
position: relative;
}
.quote blockquote {
padding: 0px;
border: 0;
margin: 0;
font-size: 14px;
font-style: italic;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
}
.quote blockquote p {
color: #fff;
padding-top: 25px;
padding-bottom: 45px;
padding-left: 30px;
padding-right: 30px;
}
.quote blockquote:before {
content: "";
position: absolute;
top: 100%;
left: 90px;
width: 0;
height: 0;
border-top: 0.83333em solid #ccc;
border-right: 0.86667em solid transparent;
}
.quote.green blockquote {
background-color: #32c5d2;
}
.quote.green blockquote:before {
border-top-color: #32c5d2;
}
.quote.dark blockquote {
background-color: #555;
}
.quote.dark blockquote:before {
border-top-color: #555;
}
.quote-footer {
margin: 10px 0;
}
.quote-footer .quote-author-img img {
float: left;
max-width: 90px;
width: 90px;
height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
margin-left: -5px;
margin-top: -40px;
position: relative;
z-index: 1;
padding: 5px;
background-color: #fff;
}
.quote-footer h4 {
font-size: 14px;
margin-bottom: 4px;
}
.quote-footer p {
font-weight: 400;
font-style: italic;
font-size: 14px;
}
