ReactJS MDBootstrap Shadows Styles
MDBootstrap is a Material Design and bootstrap-based react UI library that is used to make good-looking webpages with its seamless and easy-to-use component.
In this article, we will know how to use Shadows Styles in ReactJS MDBootstrap. Shadows Styles is used to add shadows in the background of the element.
Syntax:
<div className="img-fluid hover-shadow">w3wiki</div>
Creating React Application And Installing Module:
Step 1: Create a React application using the following command.
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command.
cd foldername
Step 3: Install ReactJS MDBootstrap in your given directory.
npm i mdb-ui-kit npm i mdb-react-ui-kit
Project Structure: It will look like the following.
Step to Run Application: Run the application from the root directory of the project, using the following command.
npm start
Example 1: This is the basic example that shows how to use Shadows Styles.
App.js
import React from "react" ; export default function App() { return ( <div id= 'gfg' > <h2>w3wiki</h2> <h4>ReactJS MDBootstrap Shadows Styles</h4> <div id= 'a' class= 'im' style={{ maxWidth: '24rem' }}> <img src= 'https://media.w3wiki.net/wp-content/uploads/20220106105832/gfg200X2001.png' className= 'w-100' /> </div> </div> ); } |
Index.css
#gfg { margin : 20px ; height : 500px ; } #a{ border : 10px solid red ; } .im { transition: transform . 2 s; margin : 0 auto ; } .im:hover { -o-transition:. 5 s; -ms-transition:. 5 s; -moz-transition:. 5 s; -webkit-transition:. 5 s; transition:. 5 s; box-shadow: 10px 10px 5px #888888 ; } |
Output:
Example 2: In this example, we will know how to add text in the shadows Styles.
App.js
import React from "react" ; export default function App() { return ( <div id= 'gfg' > <h2>w3wiki</h2> <h4>ReactJS MDBootstrap Shadows Styles</h4> <div id= 'a' class= 'im' style={{ maxWidth: '24rem' }}> <h2>w3wiki</h2> </div> </div> ); } |
Index.css
#gfg { margin : 20px ; height : 500px ; } #a{ border : 10px solid green ; } .im { transition: transform . 2 s; margin : 0 auto ; } .im:hover { -o-transition:. 5 s; -ms-transition:. 5 s; -moz-transition:. 5 s; -webkit-transition:. 5 s; transition:. 5 s; box-shadow: 10px 10px 5px #888888 ; } |
Output:
Reference: https://mdbootstrap.com/docs/b5/react/content-styles/shadows/