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-sm-12 col-md-6 col-lg-6 py-0 pl-3 pr-1 featcard">
<div id="featured" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card bg-dark text-white">
<img class="card-img img-fluid" src="https://www.bootdey.com/image/350x350/FFB6C1/000000" alt=""/>
<div class="card-img-overlay d-flex linkfeat">
<a href="#/" class="align-self-end">
<span class="badge">Bootdey</span>
<h4 class="card-title">Lorem ipsum dolor sit amet</h4>
<p class="textfeat" style={{/*display: none;*/}}>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card bg-dark text-white">
<img class="card-img img-fluid" src="https://www.bootdey.com/image/350x350/87CEFA/000000" alt=""/>
<div class="card-img-overlay d-flex linkfeat">
<a href="#/" class="align-self-end">
<span class="badge">Bootdey</span>
<h4 class="card-title">Lorem ipsum dolor sit amet</h4>
<p class="textfeat" style={{/*display: none;*/}}>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card bg-dark text-white">
<img class="card-img img-fluid" src="https://www.bootdey.com/image/350x350/FFB6C1/000000" alt=""/>
<div class="card-img-overlay d-flex linkfeat">
<a href="#/" class="align-self-end">
<span class="badge">Bootdey</span>
<h4 class="card-title">Lorem ipsum dolor sit amet</h4>
<p class="textfeat" style={{/*display: none;*/}}>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card bg-dark text-white">
<img class="card-img img-fluid" src="https://www.bootdey.com/image/350x350/FF7F50/000000" alt=""/>
<div class="card-img-overlay d-flex linkfeat">
<a href="#/" class="align-self-end">
<span class="badge">Industri</span>
<h4 class="card-title">Lorem ipsum dolor sit amet</h4>
<p class="textfeat" style={{/*display: none;*/}}>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card bg-dark text-white">
<img class="card-img img-fluid" src="https://www.bootdey.com/image/350x350/20B2AA/000000" alt=""/>
<div class="card-img-overlay d-flex linkfeat">
<a href="#/" class="align-self-end">
<span class="badge">Bootdey</span>
<h4 class="card-title">Lorem ipsum dolor sit amet</h4>
<p class="textfeat" style={{/*display: none;*/}}>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card bg-dark text-white">
<img class="card-img img-fluid" src="https://www.bootdey.com/image/350x350/87CEFA/000000" alt=""/>
<div class="card-img-overlay d-flex linkfeat">
<a href="#/" class="align-self-end">
<span class="badge">Bootdey</span>
<h4 class="card-title">Lorem ipsum dolor sit amet</h4>
<p class="textfeat" style={{/*display: none;*/}}>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 py-0 px-1 d-none d-lg-block">
<div class="row">
<div class="col-6 pb-2 mg-1 ">
<div class="card bg-dark text-white">
<img class="card-img img-fluid" src="https://www.bootdey.com/image/350x350/FFA07A/000000" alt=""/>
<div class="card-img-overlay d-flex">
<a href="#/" class="align-self-end">
<span class="badge">Finansial</span>
<h6 class="card-title">BI Atur Standarisasi QR Code</h6>
</a>
</div>
</div>
</div>
<div class="col-6 pb-2 mg-2 ">
<div class="card bg-dark text-white">
<img class="card-img img-fluid" src="https://www.bootdey.com/image/350x350/BA55D3/000000" alt=""/>
<div class="card-img-overlay d-flex">
<a href="#/" class="align-self-end">
<span class="badge">Industri</span>
<h6 class="card-title">PTSP BP Batam Masuk 10 Terbaik di Indonesia</h6>
</a>
</div>
</div>
</div>
<div class="col-6 pb-2 mg-3 ">
<div class="card bg-dark text-white">
<img class="card-img img-fluid" src="https://www.bootdey.com/image/350x350/C71585/000000" alt=""/>
<div class="card-img-overlay d-flex">
<a href="#/" class="align-self-end">
<span class="badge">Ekspor</span>
<h6 class="card-title">Review GSP: Amerika Ingin Perdagangan Saling Menguntungkan</h6>
</a>
</div>
</div>
</div>
<div class="col-6 pb-2 mg-4 ">
<div class="card bg-dark text-white">
<img class="card-img img-fluid" src="https://www.bootdey.com/image/350x350/000080/000000" alt=""/>
<div class="card-img-overlay d-flex">
<a href="#/" class="align-self-end">
<span class="badge">Pertumbuhan Ekonomi</span>
<h6 class="card-title">DPR Setujui Penambahan Anggaran BP Batam Rp565 Miliar</h6>
</a>
</div>
</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{
background:#ddd;
}
a, a:focus , a:hover{
text-decoration: none;
color: inherit;
}
a:hover, .btn{
outline:none!important;
}
/*ROUNDED CORNER*/
*{
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
}
/*CATEGORIES BADGE*/
.badge {
font-weight: 600;
font-size: 13px;
color: white;
background-color: #289dcc;
}
/*FEATURED*/
.mg-2, .mg-4{
margin-left:-20px;
}
.linkfeat{
background: rgba(76,76,76,0);
background: -moz-linear-gradient(top, rgba(76,76,76,0) 0%, rgba(48,48,48,0) 49%, rgba(19,19,19,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(76,76,76,0)), color-stop(49%, rgba(48,48,48,0)), color-stop(100%, rgba(19,19,19,1)));
background: -webkit-linear-gradient(top, rgba(76,76,76,0) 0%, rgba(48,48,48,0) 49%, rgba(19,19,19,1) 100%);
background: -o-linear-gradient(top, rgba(76,76,76,0) 0%, rgba(48,48,48,0) 49%, rgba(19,19,19,1) 100%);
background: -ms-linear-gradient(top, rgba(76,76,76,0) 0%, rgba(48,48,48,0) 49%, rgba(19,19,19,1) 100%);
background: linear-gradient(to bottom, rgba(76,76,76,0) 0%, rgba(48,48,48,0) 49%, rgba(19,19,19,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 );
}