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 bootdeys">
<div class="row">
<div class="col-sm-2 text-center">
<p>Without shadow</p>
<div class="box-shadow-demo"></div>
</div>
<div class="col-sm-2 text-center">
<p>.z-depth-1</p>
<div class="box-shadow-demo z-depth-1"></div>
</div>
<div class="col-sm-2 text-center">
<p>.z-depth-2</p>
<div class="box-shadow-demo z-depth-2"></div>
</div>
<div class="col-sm-2 text-center">
<p>.z-depth-3</p>
<div class="box-shadow-demo z-depth-3"></div>
</div>
<div class="col-sm-2 text-center">
<p>.z-depth-4</p>
<div class="box-shadow-demo z-depth-4"></div>
</div>
<div class="col-sm-2 text-center">
<p>.z-depth-5</p>
<div class="box-shadow-demo z-depth-5"></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;}
.box-shadow-demo {
background-color: #009688;
height: 100px;
width: 100px;
margin: 20px auto;
}
.z-depth-1 {
-webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37);
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37);
}
.z-depth-2 {
-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.3);
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.3);
}
.z-depth-3 {
-webkit-box-shadow: 0 11px 7px 0 rgba(0,0,0,0.19),0 13px 25px 0 rgba(0,0,0,0.3);
box-shadow: 0 11px 7px 0 rgba(0,0,0,0.19),0 13px 25px 0 rgba(0,0,0,0.3);
}
.z-depth-4 {
-webkit-box-shadow: 0 14px 12px 0 rgba(0,0,0,0.17),0 20px 40px 0 rgba(0,0,0,0.3);
box-shadow: 0 14px 12px 0 rgba(0,0,0,0.17),0 20px 40px 0 rgba(0,0,0,0.3);
}
.z-depth-5 {
-webkit-box-shadow: 0 17px 17px 0 rgba(0,0,0,0.15),0 27px 55px 0 rgba(0,0,0,0.3);
box-shadow: 0 17px 17px 0 rgba(0,0,0,0.15),0 27px 55px 0 rgba(0,0,0,0.3);
}