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="row">
<div class="col-md-4 col-lg-4">
<div class="featured-article">
<a href="#/">
<img src="https://www.bootdey.com/image/400x300/FF4500/000000" alt="" class="thumb"/>
</a>
</div>
</div>
<div class="col-md-6 col-lg-6 pull-right">
<ul class="media-list main-list">
<li class="media">
<a class="pull-left" href="#/">
<img class="media-object" src="https://www.bootdey.com/image/150x90/FF69B4/000000" alt="..."/>
</a>
<div class="media-body">
<h4 class="media-heading">Image name</h4>
<p class="by-author">Image description</p>
</div>
</li>
<li class="media">
<a class="pull-left" href="#/">
<img class="media-object" src="https://www.bootdey.com/image/150x90/800080/000000" alt="..."/>
</a>
<div class="media-body">
<h4 class="media-heading">Image name</h4>
<p class="by-author">Image description</p>
</div>
</li>
<li class="media">
<a class="pull-left" href="#/">
<img class="media-object" src="https://www.bootdey.com/image/150x90/20B2AA/000000" alt="..."/>
</a>
<div class="media-body">
<h4 class="media-heading">Image name</h4>
<p class="by-author">Image description</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
);
}
export default App;
4. Now we need to add below code into our my-awesome-project/src/App.css file :
/* image thumbnail */
.thumb {
display: block;
width: 100%;
margin: 0;
}
/* Style to article Author */
.by-author {
font-style: italic;
line-height: 1.3;
color: #aab6aa;
}
/* Main Article [Module]
-------------------------------------
* Featured Article Thumbnail
* have a image and a text title.
*/
.featured-article {
width: 482px;
height: 350px;
position: relative;
margin-bottom: 1em;
}
.featured-article .block-title {
/* Position & Box Model */
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
/* background */
background: rgba(0,0,0,0.7);
/* Width/Height */
padding: .5em;
width: 100%;
/* Text color */
color: #fff;
}
.featured-article .block-title h2 {
margin: 0;
}
/* Featured Articles List [BS3]
--------------------------------------------
* show the last 3 articles post
*/
.main-list {
padding-left: .5em;
}
.main-list .media {
padding-bottom: 1.1em;
border-bottom: 1px solid #e8e8e8;
}