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>
<div class="container bootstrap snippets bootdey">
<section id="testimonials" class="content-first">
<div class="container bootstrap snippets bootdey">
<h1 class="text-center">Testimonials</h1>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in turpis quam. Nulla quis eleifend lectus.</p>
<hr/>
<div class="row">
<div class="col-sm-6">
<div class="media">
<a class="pull-left" href="#/"><img class="media-object img-circle" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt=""/></a>
<div class="media-body">
<h4 class="media-heading">El Grone's</h4>
<span>Webdesigner</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat est. Donec lobortis interdum volutpat. Maecenas bibendum dui quis pharetra tincidunt. Praesent posuere eu velit at scelerisque.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="media">
<a class="pull-left" href="#/"><img class="media-object img-circle" src="https://bootdey.com/img/Content/avatar/avatar6.png" alt=""/></a>
<div class="media-body">
<h4 class="media-heading">Egg form</h4>
<span>Webdesigner</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat est. Donec lobortis interdum volutpat. Maecenas bibendum dui quis pharetra tincidunt. Praesent posuere eu velit at scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
);
}
export default App;
4. Now we need to add below code into our my-awesome-project/src/App.css file :
body {
background: #2E95EF;
background-image: -moz-radial-gradient(center 45deg,circle cover, #9BD1FF, #2E95EF);
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#9BD1FF), to(#2E95EF));
padding-top: 15%;
}
.content-first {
padding: 5px 0;
color: #FFFFFF;
border-top: 8px inset #333;
border-top: 8px solid rgba(0,0,0,0.1);
box-shadow: 0px 1px 0px rgba(255,255,255,0.2);
}
.media, .media-body {
overflow: hidden;
zoom: 1;
}
#testimonials .media a.pull-left img {
max-width: 100px;
}
#testimonials .media .media-body {
background-color: rgba(0, 0, 0, 0.1);
padding: 15px 20px;
border-radius: 12px;
}
#testimonials .media .media-body h4 {
margin: 0;
font-weight: bold;
font-size: 22px;
}
#testimonials .media .media-body span {
margin: 5px 0 15px;
display: block;
font-weight: bold;
font-style: italic;
font-size: 14px;
color: #333;
}
#testimonials .media .media-body p {
margin: 0;
padding: 5px 0 0;
border-top: 1px dashed rgba(0, 0, 0, 0.2);
text-align: left;
line-height: 25px;
font-size: 14px;
}