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 bootstrap snippets bootdey">
<div class="col-sm-4">
<div class="widget single-news">
<div class="image">
<img src="https://www.bootdey.com/image/300x200/FFB6C1/000000" class="img-responsive"/>
<span class="gradient"></span>
</div>
<div class="details">
<div class="category"><a href="">News</a></div>
<h3><a href="">More rain at salt flats delays racer's pursuit of land speed record</a></h3>
<time>Today, 18 August</time>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="widget single-news">
<div class="image">
<img src="https://www.bootdey.com/image/300x200/87CEFA/000000" class="img-responsive"/>
<span class="gradient"></span>
</div>
<div class="details">
<div class="category"><a href="">News</a></div>
<h3><a href="">More rain at salt flats delays racer's pursuit of land speed record</a></h3>
<time>Today, 18 August</time>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="widget single-news">
<div class="image">
<img src="https://www.bootdey.com/image/300x200/FF7F50/000000" class="img-responsive"/>
<span class="gradient"></span>
</div>
<div class="details">
<div class="category"><a href="">News</a></div>
<h3><a href="">More rain at salt flats delays racer's pursuit of land speed record</a></h3>
<time>Today, 18 August</time>
</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-color: #eee;
}
a:hover{
text-decoration:none;
}
.widget.single-news {
margin-bottom: 20px;
position: relative;
}
.widget.single-news .image img {
display: block;
width: 100%;
}
.widget.single-news .image .gradient {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0d…IxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjbGVzc2hhdC1nZW5lcmF0ZWQpIiAvPjwvc3ZnPg==);
background-image: -webkit-linear-gradient(bottom, #000000 0%, rgba(0, 0, 0, 0.05) 100%);
background-image: -moz-linear-gradient(bottom, #000000 0%, rgba(0, 0, 0, 0.05) 100%);
background-image: -o-linear-gradient(bottom, #000000 0%, rgba(0, 0, 0, 0.05) 100%);
background-image: linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0.05) 100%);
}
.widget.single-news .details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
}
.widget.single-news .details .category {
font-size: 11px;
text-transform: uppercase;
margin-bottom: 10px;
}
.widget.single-news .details .category a {
color: #fff;
zoom: 1;
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
filter: alpha(opacity=50);
}
.widget.single-news .details h3 {
margin: 0;
padding: 0;
margin-bottom: 10px;
font-size: 19px;
}
.widget.single-news .details h3 a {
color: #fff;
zoom: 1;
-webkit-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter: alpha(opacity=80);
}
.widget.single-news .details:hover time {
position: relative;
display: block;
color: #fff;
font-size: 13px;
margin-bottom: -20px;
-webkit-transition: all 350ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition: all 350ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition: all 350ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition: all 350ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
zoom: 1;
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
filter: alpha(opacity=0);
}