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">
<div class="row">
<div class="col-md-6 col-lg-4 g-mb-30">
<article class="u-shadow-v18 g-bg-white text-center rounded g-px-20 g-py-40 g-mb-5">
<img class="d-inline-block img-fluid mb-4" src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="Image Description"/>
<h4 class="h5 g-color-black g-font-weight-600 g-mb-10">Product name</h4>
<p>Finding your perfect product</p>
<span class="d-block g-color-primary g-font-size-16">$50.00</span>
</article>
</div>
<div class="col-md-6 col-lg-4 g-mb-30">
<article class="u-shadow-v18 g-bg-white text-center rounded g-px-20 g-py-40 g-mb-5">
<img class="d-inline-block img-fluid mb-4" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Image Description"/>
<h4 class="h5 g-color-black g-font-weight-600 g-mb-10">Product name</h4>
<p>Finding your perfect product</p>
<span class="d-block g-color-primary g-font-size-16">$50.00</span>
</article>
</div>
<div class="col-md-6 col-lg-4 g-mb-30">
<article class="u-shadow-v18 g-bg-white text-center rounded g-px-20 g-py-40 g-mb-5">
<img class="d-inline-block img-fluid mb-4" src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="Image Description"/>
<h4 class="h5 g-color-black g-font-weight-600 g-mb-10">Product name</h4>
<p>Finding your perfect product</p>
<span class="d-block g-color-primary g-font-size-16">$50.00</span>
</article>
</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-color: #fafafa !important;
}
@media (min-width: 0) {
.g-mb-30 {
margin-bottom: 2.14286rem !important;
}
}
@media (min-width: 0) {
.g-py-40 {
padding-top: 2.85714rem !important;
padding-bottom: 2.85714rem !important;
}
}
@media (min-width: 0) {
.g-px-20 {
padding-left: 1.42857rem !important;
padding-right: 1.42857rem !important;
}
}
@media (min-width: 0){
.g-mb-5 {
margin-bottom: 0.35714rem !important;
}
}
.g-bg-white {
background-color: #fff !important;
}
.u-shadow-v18 {
box-shadow: 0 5px 10px -6px rgba(0, 0, 0, 0.15);
}
.g-color-primary {
color: #72c02c !important;
}
.g-font-size-16 {
font-size: 1.14286rem !important;
}
.g-mb-10 {
margin-bottom: 0.71429rem !important;
}
.g-mb-10 {
margin-bottom: 0.71429rem !important;
}
.g-color-black {
color: #000 !important;
}
.g-font-weight-600 {
font-weight: 600 !important;
}