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 start2. 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 again3. 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>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container bootstrap snippets bootdey">
<h4 class="h-title">
New team members
</h4>
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="block">
<div class="thumbnail">
<a href="#/" class="thumb-zoom" title="Eugene A. Kopyov">
<img src="https://www.bootdey.com/image/300x300/48D1CC/000000" alt=""/>
</a>
<div class="caption text-center">
<h6>Eugene A. Kopyov <small>UX designer</small></h6>
<div class="icons-group">
<a href="#/"><i class="fa fa-google-plus"></i></a>
<a href="#/" ><i class="fa fa-twitter"></i></a>
<a href="#/"><i class="fa fa-github"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="block">
<div class="thumbnail">
<a href="#g" class="thumb-zoom" title="Sophia R. McJamer">
<img src="https://www.bootdey.com/image/300x300/B0C4DE/000000" alt=""/>
</a>
<div class="caption text-center">
<h6>Sophia R. McJamer <small>Media designer</small></h6>
<div class="icons-group">
<a href="#/"><i class="fa fa-google-plus"></i></a>
<a href="#/" ><i class="fa fa-twitter"></i></a>
<a href="#/"><i class="fa fa-github"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="block">
<div class="thumbnail">
<a href="#/" class="thumb-zoom" title="Noah Kennedy">
<img src="https://www.bootdey.com/image/300x300/FF7F50/000000" alt=""/>
</a>
<div class="caption text-center">
<h6>Noah Kennedy <small>CEO & founder</small></h6>
<div class="icons-group">
<a href="#/"><i class="fa fa-google-plus"></i></a>
<a href="#/" ><i class="fa fa-twitter"></i></a>
<a href="#/"><i class="fa fa-github"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="block">
<div class="thumbnail">
<a href="#/" class="thumb-zoom" title="Noah Kennedy">
<img src="https://www.bootdey.com/image/300x300/00BFFF/000000" alt=""/>
</a>
<div class="caption text-center">
<h6>Noah Kennedy <small>CEO & founder</small></h6>
<div class="icons-group">
<a href="#/"><i class="fa fa-google-plus"></i></a>
<a href="#/" ><i class="fa fa-twitter"></i></a>
<a href="#/"><i class="fa fa-github"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="block">
<div class="thumbnail">
<a href="#/" class="thumb-zoom" title="Noah Kennedy">
<img src="https://www.bootdey.com/image/300x300/008B8B/000000" alt=""/>
</a>
<div class="caption text-center">
<h6>Noah Kennedy <small>CEO & founder</small></h6>
<div class="icons-group">
<a href="#/"><i class="fa fa-google-plus"></i></a>
<a href="#/" ><i class="fa fa-twitter"></i></a>
<a href="#/"><i class="fa fa-github"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="block">
<div class="thumbnail">
<a href="#/" class="thumb-zoom" title="Noah Kennedy">
<img src="https://www.bootdey.com/image/300x300/5F9EA0/000000" alt=""/>
</a>
<div class="caption text-center">
<h6>Noah Kennedy <small>CEO & founder</small></h6>
<div class="icons-group">
<a href="#/"><i class="fa fa-google-plus"></i></a>
<a href="#/" ><i class="fa fa-twitter"></i></a>
<a href="#/"><i class="fa fa-github"></i></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{
margin-top:20px;
}
.h-title{
border-bottom:1px solid #eee;
padding-bottom:5px;
}
.block {
margin-bottom: 35px;
}
.thumbnail {
background: none;
position: relative;
border: 0;
padding: 0;
margin-bottom: 0;
text-align: center;
}
.thumbnail .caption {
padding: 12px 0 0 0;
color: #333;
}
.thumbnail .caption h6 small {
display: block;
margin-top: 4px;
}
.thumbnail .caption h6, .thumbnail .caption .h6 {
font-size: 14px;
}
.icons-group a {
color: #555;
}
.thumb-zoom img:hover {
opacity: 0.7;
cursor: pointer;
border-radius: 0px;
-webkit-transform: scale(1.2, 1.2);
-webkit-transition-timing-function: ease-out;
-moz-transform: scale(1.2, 1.2);
-moz-transition-timing-function: ease-out;
-ms-transform: scale(1.20, 1.20);
-ms-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
-moz-transition-duration: 500ms;
-ms-transition-duration: 500ms;
}
