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-sm-4 col-xs-12">
<div class="wp-block inverse no-margin">
<div class="figure">
<img src="https://www.bootdey.com/image/400x400/FFB6C1/000000"/>
<div class="wp-block-info-over left">
<h2>
<span class="pull-left">
<a href="#/">My favorite sport</a>
<span class="label label-primary">Lorem ipsum</span>
</span>
</h2>
</div>
</div>
<h2 class="title">Lovely template design</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo.
</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="wp-block inverse no-margin">
<div class="figure">
<img src="https://www.bootdey.com/image/400x400/87CEFA/000000"/>
<div class="wp-block-info-over left">
<h2>
<span class="pull-left">
<a href="#/">This is a block label</a>
<span class="label label-primary">Lorem ipsum</span>
</span>
</h2>
</div>
</div>
<h2 class="title">Lovely template design</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo.
</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="wp-block inverse no-margin">
<div class="figure">
<img src="https://www.bootdey.com/image/400x400/FF7F50/000000"/>
<div class="wp-block-info-over left">
<h2>
<span class="pull-left">
<a href="#/">Creating my new app</a>
<span class="label label-primary">Lorem ipsum</span>
</span>
</h2>
</div>
</div>
<h2 class="title">Lovely template design</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo.
</p>
</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 :
.wp-block {
margin: 0 0 15px 0;
-webkit-transition: all .3s linear;
transition: all .3s linear;
position: relative;
cursor: default;
border-radius: 2px;
}
a:hover{
text-decoration:none;
}
.no-margin {
margin: 0 !important;
}
.wp-block.inverse .figure {
position: relative;
}
.wp-block.inverse .figure img {
width: 100%;
}
.wp-block-info-over.left {
background: transparent;
border: 0;
padding: 0;
position: absolute;
bottom: 55px;
left: 0;
}
.wp-block-info-over {
width: 100%;
padding: 10px;
background: #9cd70e;
border-top: 1px solid #e0eded;
}
.wp-block-info-over.left h2 {
font-size: 13px;
font-weight: normal;
}
.wp-block.inverse h2, .wp-block.inverse .title {
margin: 0;
padding: 12px 15px 0 0;
font-weight: 500;
font-size: 16px;
color: #333;
text-transform: none;
}
.wp-block-info-over.left h2 a {
padding: 10px 15px 20px 15px;
margin: 0;
font-size: 16px;
text-transform: capitalize;
font-weight: 600;
background: rgba(51,51,51,0.8);
background: #2c3e50;
color: #fff;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.wp-block-info-over.left h2 .label {
position: absolute;
bottom: -30px;
left: 15px;
padding: .5em .6em .5em;
}
.wp-block.inverse h2, .wp-block.inverse .title {
margin: 0;
padding: 12px 15px 0 0;
font-weight: 500;
font-size: 16px;
color: #333;
text-transform: none;
}
.label {
border-radius: 0;
}