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>
<section id="testmonials" class="container inner-section color01 bootstrap snippets bootdeys">
<div class="container-fluid nopadding">
<h3 class="font-accident-two-normal uppercase text-center">Testmonials</h3>
<h5 class="font-accident-one-bold uppercase hovercolor text-center">Working hard and making the success</h5>
<div class="dividewhite1"></div>
<p class="small fontcolor-medium text-center">
Customize your website as you want using different colors and 100% free fonts. Build it from pieces and
blocks as simple as Lego. <br/>
Electronic Website Template is fully responsive, looks and works perfect on any device.
</p>
<div class="dividewhite4"></div>
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-xs-3">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Rachel James Johnes" class="img-responsive img-circle author-userpic"/>
</div>
<div class="col-xs-9">
<h5 class="font-accident-one-bold text-left uppercase">Hans Zimmer</h5>
<p class="small hovercolor">Apple Inc.</p>
<p class="text-left small">
With more devices come varying screen resolutions, definitions and orientations. New devices
with new screen sizes are being developed every day, and each of these devices may be able...
</p>
</div>
</div>
<div class="divider-dynamic"></div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-xs-3">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="Rachel James Johnes" class="img-responsive img-circle author-userpic"/>
</div>
<div class="col-xs-9">
<h5 class="font-accident-one-bold text-left uppercase">Mario Quinn</h5>
<p class="small hovercolor">Adobe</p>
<p class="text-left small">
With more devices come varying screen resolutions, definitions and orientations. New devices
with new screen sizes are being developed every day, and each of these devices
</p>
</div>
</div>
<div class="divider-dynamic"></div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-xs-3">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="Rachel James Johnes" class="img-responsive img-circle author-userpic"/>
</div>
<div class="col-xs-9">
<h5 class="font-accident-one-bold text-left uppercase">Karl Romm</h5>
<p class="small hovercolor">BMW</p>
<p class="text-left small">
With more devices come varying screen resolutions, definitions and orientations. New devices
with new screen sizes are being developed every day, and each of these devices
</p>
</div>
</div>
<div class="divider-dynamic"></div>
</div>
</div>
<div class="dividewhite6"></div>
</div>
</section>
</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;
}
.inner-content .inner-section {
padding: 30px 50px;
}
.color01 {
background-color: #f2f2f2 !important;
}
.uppercase {
text-transform: uppercase;
}
.font-accident-two-normal {
font-family: "Dosis", sans-serif;
font-weight: 400;
}
.hovercolor, .hovercolor a {
color: #e74c3c !important;
}