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 justify-content-center">
<div class="col-12 col-md-8">
<h1 class="mb-4 text-center animate" data-toggle="animation" data-animation="fadeUp" data-animation-order="1" data-animation-trigger="load">
Creating beautiful layouts like no one else
</h1>
<p class="mb-6 text-center text-muted animate" data-toggle="animation" data-animation="fadeUp" data-animation-order="2" data-animation-trigger="load">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor voluptas harum aperiam minus corporis, nesciunt nobis quaerat voluptatumunt qui similique.
</p>
</div>
</div>
<div class="row form-row align-items-center">
<div class="col-3">
<div class="img-square">
<img src="https://www.bootdey.com/image/768x512/D3D3D3/000000" alt="..." class="img-cover"/>
</div>
</div>
<div class="col-6">
<div class="row form-row align-items-end mb-2">
<div class="col-7">
<div class="img-square">
<img src="https://www.bootdey.com/image/768x512/FFB6C1/000000" alt="..." class="img-cover"/>
</div>
</div>
<div class="col-5">
<div class="img-square">
<img src="https://www.bootdey.com/image/768x512/87CEFA/000000" alt="..." class="img-cover"/>
</div>
</div>
</div>
<div class="row form-row">
<div class="col-5">
<div class="img-square">
<img src="https://www.bootdey.com/image/768x512/B0C4DE/000000" alt="..." class="img-cover"/>
</div>
</div>
<div class="col-7">
<div class="img-square">
<img src="https://www.bootdey.com/image/768x512/20B2AA/000000" alt="..." class="img-cover"/>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="img-square">
<img src="https://www.bootdey.com/image/768x512/FFA07A/000000" alt="..." class="img-cover"/>
</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{
background:#eee;
margin-top:20px;
}
.align-items-center {
-webkit-box-align: center!important;
align-items: center!important;
}
.form-row {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
margin-right: -5px;
margin-left: -5px;
}
.img-square {
position: relative;
padding-bottom: 100%;
}
.img-square .img-cover {
position: absolute;
}
.img-cover {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
img {
vertical-align: middle;
border-style: none;
}
