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 lg padding-20px-tb">
<div class="row">
<div class="col-md-4 xs-margin-30px-bottom">
<div class="card categories-card">
<div class="card-img"><img src="https://www.bootdey.com/image/550x420/FFB6C1/000000" alt=""/></div>
<div class="card-img-overlay align-items-center">
<div class="bg-white-opacity">
<h3><a href="#!">Home Decor</a></h3>
<ul class="categories-02">
<li><a href="#!" class="line position-relative">Sofa</a></li>
<li><a href="#!" class="line position-relative">Lamp</a></li>
<li>
<a href="#!">More</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-4 xs-margin-30px-bottom">
<div class="card categories-card">
<div class="card-img"><img src="https://www.bootdey.com/image/550x420/87CEFA/000000" alt=""/></div>
<div class="card-img-overlay align-items-center">
<div class="bg-white-opacity">
<h3><a href="#!">Gadgets</a></h3>
<ul class="categories-02">
<li><a href="#!" class="line position-relative">Mobile</a></li>
<li><a href="#!" class="line position-relative">Laptop</a></li>
<li>
<a href="#!">More</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card categories-card">
<div class="card-img"><img src="https://www.bootdey.com/image/550x420/FF7F50/000000" alt=""/></div>
<div class="card-img-overlay align-items-center">
<div class="bg-white-opacity">
<h3><a href="#!">Footware</a></h3>
<ul class="categories-02">
<li><a href="#!" class="line position-relative">Flats</a></li>
<li><a href="#!" class="line position-relative">Heels</a></li>
<li>
<a href="#!">More</a>
</li>
</ul>
</div>
</div>
</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{
margin-top:20px;
background:#f5f5f5;
}
.categories-card.card {
border: none;
box-shadow: none
}
.categories-card .card-img-overlay {
display: flex
}
.categories-card .card-img-overlay>* {
flex: 1
}
.categories-card h3 {
margin-bottom: 5px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px
}
.categories-card .bg-white-opacity {
text-align: center;
padding: 20px 20px 18px 20px
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
}
.bg-white-opacity {
background-color: rgba(255,255,255,0.85);
}
.categories-02 {
padding: 0;
margin: 0;
}
.categories-02 li {
display: inline-block;
margin-right: 20px;
font-size: 14px;
font-weight: 600;
opacity: .8;
vertical-align: middle;
}
.categories-02 li a {
color: rgba(0,0,0,0.85);
}
a, a:active, a:focus {
color: #5e6973;
text-decoration: none;
transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-duration: .2s;
-ms-transition-duration: .2s;
-moz-transition-duration: .2s;
-webkit-transition-duration: .2s;
-o-transition-duration: .2s;
}
.card-img, .card-img-bottom {
border-bottom-right-radius: calc(.25rem - 1px);
border-bottom-left-radius: calc(.25rem - 1px);
}
.card-img, .card-img-top {
border-top-left-radius: calc(.25rem - 1px);
border-top-right-radius: calc(.25rem - 1px);
}
.card-img, .card-img-bottom, .card-img-top {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
}
img {
max-width: 100%;
height: auto;
}