Open In App

ReactJS MDBootstrap Images Styles

Improve
Improve
Like Article
Like
Save
Share
Report

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 Images Styles in ReactJS MDBootstrap. Images Styles is used to add how to add images in the element.

Syntax:

<img src="link" />

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 Images Styles.

App.js




import React from "react";
import { MDBContainer } from "mdb-react-ui-kit";
  
export default function App() {
  return (
    <MDBContainer id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>ReactJS MDBootstrap Images Styles</h4>
  
      <img src=
       class='gfg'/>
    </MDBContainer>
  );
}


Index.css




#gfg {
  margin: 20px;
  height: 500px;
}
.gfg{
  border: 10px solid red;
}


Output:

ReactJS MDBootstrap Images Styles

Example 2: In this example, we will know how to add a thumbnail in a Image Styles.

App.js




import React from "react";
import { MDBContainer } from "mdb-react-ui-kit";
  
export default function App() {
  return (
    <MDBContainer id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>ReactJS MDBootstrap Images Styles</h4>
  
      <img src=
      className='img-thumbnail' style={{ maxWidth: '10rem' }} />
    </MDBContainer>
  );
}


Output:

ReactJS MDBootstrap Images Styles

Example 3: In this example, we will know how to add shadows in Image Styles.

App.js




import React from "react";
import { MDBContainer } from "mdb-react-ui-kit";
  
export default function App() {
  return (
    <MDBContainer id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>ReactJS MDBootstrap Images Styles</h4>
  
      <img src=
      class='gfg' />
    </MDBContainer>
  );
}


Index.css




#gfg {
  margin: 20px;
  height: 500px;
}
  
.gfg {
  transition: transform .2s;
  margin: 0 auto;
}
  
.gfg:hover {
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
  box-shadow: 10px 10px 5px #888888;
}


Output:

Example 4:  In this example, we will know how to add masks in a images Styles.

App.js




import React from "react";
import { MDBContainer } from "mdb-react-ui-kit";
  
export default function App() {
  return (
  <MDBContainer id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>ReactJS MDBootstrap Images Styles</h4>
    <br/>
  
    <div className='bg-danger' style={{ maxWidth: '22rem' }}>
      <div class="mask1">
        <img src=
          className='w-100' />
      </div>
    </div>
  </MDBContainer>
  );
}


Index.css




#gfg {
  margin: 30px;
  
}
  
.mask1{
  -webkit-mask-image: radial-gradient(black 0%, rgba(0, 0, 0, 0.6) 50%);
  mask-image: radial-gradient( rgba(0, 0, 0, 0.5));
}


Output:

ReactJS MDBootstrap Images Styles

Reference: https://mdbootstrap.com/docs/b5/react/content-styles/images



Last Updated : 20 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads