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>
<section class="divided clearfix">
<div class="container">
<div class="row py-5">
<div class="col col-12 col-sm-12 col-md-6 p-lg-5">
<div class="p-5">
<h5 class="h5 text-muted">Bootstrap </h5>
<h1 class="h1 mb-5">Spacing </h1>
<p>Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.</p>
</div>
</div>
<div class="versus">VS</div>
<div class="col col-12 col-sm-12 col-md-6 p-lg-5">
<div class="p-5">
<h5 class="h5 text-muted">Bootstrap</h5>
<h1 class="h1 mb-5">Spacing </h1>
<p>Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.</p>
</div>
</div>
</div>
</div>
</section>
<section class="border-bottom">
<div class="container">
<div class="row text-center py-5">
<div class="col col-12 border-bottom border-sm-bottom border-md-bottom-0 border-md-right col-sm-12 col-md-6 p-5"> <img class="m-auto" width="40px" src="https://semantic-ui.com/images/icons/mobile.png"/>
<h2 class="h3 mt-3 mb-5 text-muted">Bootstrap Spacing</h2>
<p>Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance. </p>
</div>
<div class="col col-12 col-sm-12 col-md-6 p-5"> <img class="m-auto" width="40px" src="https://semantic-ui.com/images/icons/mobile.png"/>
<h2 class="h3 mt-3 mb-5 text-muted">Bootstrap Spacing</h2>
<p>Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance. </p>
</div>
</div>
</div>
</section>
<section class="divided clearfix">
<div class="container">
<div class="row text-center py-5">
<div class="col col-12 border-bottom border-sm-bottom border-md-bottom-0 border-md-right col-sm-12 col-md-6 p-5">
<div class="p-5">
<h5 class="h5 text-muted">Bootstrap </h5>
<h1 class="h1 mb-5">Spacing </h1>
<p>Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.</p>
</div>
</div>
<div class="col col-12 col-sm-12 col-md-6 p-5">
<div class="p-5">
<h5 class="h5 text-muted">Bootstrap </h5>
<h1 class="h1 mb-5">Spacing </h1>
<p>Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.</p>
</div>
</div>
</div>
</div>
</section>
<section class="border-top">
<div class="container">
<div class="row text-center py-5">
<div class="col col-12 col-sm-12 col-md-6 col-lg-4 p-5 border-bottom border-sm-bottom border-md-bottom-0 border-md-right">
<img class="m-auto" width="40px" src="https://semantic-ui.com/images/icons/mobile.png"/>
<h2 class="h3 mt-3 mb-5 text-muted">Bootstrap</h2>
<p>Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.</p>
</div>
<div class="col col-12 col-sm-12 col-md-6 col-lg-4 p-5 border-bottom border-sm-bottom border-md-bottom-0 border-lg-right">
<img class="m-auto" width="40px" src="https://semantic-ui.com/images/icons/mobile.png"/>
<h2 class="h3 mt-3 mb-5 text-muted">Bootstrap</h2>
<p>Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.</p>
</div>
<div class="col col-12 col-sm-12 col-md-12 col-lg-4 p-5 m-auto border-md-top border-lg-top-0">
<img class="m-auto" width="40px" src="https://semantic-ui.com/images/icons/mobile.png"/>
<h2 class="h3 mt-3 mb-5 text-muted">Bootstrap</h2>
<p>Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.</p>
</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 :
.versus{
position: absolute;
background: #f7f8f9;
border-radius: 100%;
border: 1px solid #9361D4;
color: #A788D1;
font-size: 1.25em;
height: 78px;
left: 50%;
margin-left: -39px;
padding-top: 22px;
text-align: center;
top: 50%;
transform: translateY(-50%);
width: 78px;
z-index: 4;
}
.divided {
position: relative;
background: #f7f8f9;
}
.divided::after {
background: linear-gradient(#f0f7fd 0, #813FD9 50%, #f0f7fd 100%);
width: 1px;
top: 100px;
bottom: 100px;
left: 50%;
height: auto;
right: auto;
position: absolute;
}
@media (max-width: 768px) {
.divided::after {
background: linear-gradient(90deg, #f0f7fd 0, #813FD9 50%, #f0f7fd 100%);
content: "";
position: absolute;
top: 50%;
left: 20px;
right: 20px;
height: 1px;
width: 100%;
}
}
.border-top-0 {
border-top:0!important;
}
.border-right-0 {
border-right: 0!important;
}
.border-left-0 {
border-left: 0!important;
}
.border-bottom-0 {
border-bottom: 0!important;
}
@media (min-width: 576px) {
.border-sm-top {
border-top: 1px solid #dee2e6!important;
}
.border-sm-right {
border-right: 1px solid #dee2e6!important;
}
.border-sm-left {
border-left: 1px solid #dee2e6!important;
}
.border-sm-bottom {
border-bottom: 1px solid #dee2e6!important;
}
.border-sm-top-0 {
border-top:0!important;
}
.border-sm-right-0 {
border-right: 0!important;
}
.border-sm-left-0 {
border-left: 0!important;
}
.border-sm-bottom-0 {
border-bottom: 0!important;
}
}
@media (min-width: 768px) {
.border-md-top {
border-top: 1px solid #dee2e6!important;
}
.border-md-right {
border-right: 1px solid #dee2e6!important;
}
.border-md-left {
border-left: 1px solid #dee2e6!important;
}
.border-md-bottom {
border-bottom: 1px solid #dee2e6!important;
}
.border-md-top-0 {
border-top:0!important;
}
.border-md-right-0 {
border-right: 0!important;
}
.border-md-left-0 {
border-left: 0!important;
}
.border-md-bottom-0 {
border-bottom: 0!important;
}
}
@media (min-width: 992px) {
.border-lg-top {
border-top: 1px solid #dee2e6!important;
}
.border-lg-right {
border-right: 1px solid #dee2e6!important;
}
.border-lg-left {
border-left: 1px solid #dee2e6!important;
}
.border-lg-bottom {
border-bottom: 1px solid #dee2e6!important;
}
.border-lg-top-0 {
border-top:0!important;
}
.border-lg-right-0 {
border-right: 0!important;
}
.border-lg-left-0 {
border-left: 0!important;
}
.border-lg-bottom-0 {
border-bottom: 0!important;
}
}
@media (min-width: 1200px) {
}
