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">
<h1 class="text-center text-primary title">Learn about our projects</h1>
<hr class="divider-title"/>
<div class="col-ms-10 col-md-4">
<div class="project">
<figure class="img-responsive">
<img src="https://www.bootdey.com/image/400x300/FFB6C1/000000"/>
<figcaption>
<span class="project-details">Full project name</span>
<span class="project-price"><strong>$100</strong></span>
<span class="project-creator">creator name</span>
</figcaption>
<span class="actions">
<button class="btn btn-warning bnt-action" type="submit" >View </button>
</span>
</figure>
</div>
</div>
<div class="col-ms-10 col-md-4">
<div class="project">
<figure class="img-responsive">
<img src="https://www.bootdey.com/image/400x300/87CEFA/000000"/>
<figcaption>
<span class="project-details">Full project name</span>
<span class="project-price"><strong>$100</strong></span>
<span class="project-creator">creator name</span>
</figcaption>
<span class="actions">
<button class="btn btn-warning bnt-action" type="submit" >View </button>
</span>
</figure>
</div>
</div>
<div class="col-ms-10 col-md-4">
<div class="project">
<figure class="img-responsive">
<img src="https://www.bootdey.com/image/400x300/FF7F50/000000"/>
<figcaption>
<span class="project-details">Full project name</span>
<span class="project-price"><strong>$100</strong></span>
<span class="project-creator">creator name</span>
</figcaption>
<span class="actions">
<button class="btn btn-warning bnt-action" type="submit" >View </button>
</span>
</figure>
</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:#eee;;
}
.title{
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.4) !important;
}
.divider-title{
border:1px solid #dddddd;
}
.project {
margin-bottom: 30px;
vertical-align: top;
margin-right: 30px;
float: left;
cursor: pointer;
width:100%;
}
.project figure {
position: relative;
display: inline-block;
width: 283px;
-moz-box-shadow: 0 3px 0 #e2e2e2,transparent 0 0 0;
-webkit-box-shadow: 0 3px 0 #e2e2e2,transparent 0 0 0;
box-shadow: 0 3px 0 #e2e2e2,transparent 0 0 0;
-webkit-box-shadow: 0 3px 0 #e2e2e2;
-moz-box-shadow: 0 3px 0 #e2e2e2;
box-shadow: 0 3px 0 #e2e2e2;
}
.project figure figcaption {
position: relative;
z-index: 10;
padding: 8px 18px 11px;
background: #fff;
-ms-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
text-align: left;
color: #555;
}
.project figure:hover .actions {
opacity: 1;
}
.project figure .actions {
display: block;
position: absolute;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
opacity: 0;
background-color: rgba(29,29,29,.7);
-ms-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.project figure img {
border: 0;
width: 100%;
}
.btn-warning bnt-action{
margin: 0% 0% auto;
}
figcaption .project-details {
display: block;
font-size: 16px;
line-height: 33px;
color: #0093d0;
height: 27px;
width: 85%;
margin-bottom: 5px;
overflow: hidden;
}
figcaption .project-price {
position: absolute;
right: 15px;
top: 12px;
font-size: 22px;
text-align: right;
margin-top: 8px;
letter-spacing: -1px;
-webkit-font-smoothing: antialiased;
}
figcaption .project-creator {
font-size: 13px;
color: #545454;
display: block;
}
figcaption .project-creator {
font-size: 13px;
color: #545454;
display: block;
}
.project figure .actions button {
padding: 13px 20px;
font-size: 16px;
top: 32%;
position: absolute;
left: 50%;
width: 90%;
margin-left: -45%;
line-height: 18px;
letter-spacing: 1px;
}