ReactJS MDBootstrap Image Styles

ReactJS MDBootstrap provides various styles for images, which can be used to enhance the visual appeal of your website. In this article, we will cover the different image styles available in MDBootstrap and how to use them in your ReactJS application.

Prerequisites

To use MDBootstrap image styles in your ReactJS application, you need to first install the following packages:

npm install --save mdbreact
npm install --save @fortawesome/fontawesome-free

Using Image Styles

MDBootstrap provides various image styles, including rounded, circle, thumbnail and more. Here's how to use them in your ReactJS application:

Rounded

To add rounded corners to an image, use the rounded class:

import { MDBContainer, MDBRow, MDBCol, MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBCardImage } from 'mdbreact';
import MyImage from './my-image.jpg';

const MyComponent = () => {
  return (
    <MDBContainer>
      <MDBRow>
        <MDBCol>
          <MDBCard>
            <MDBCardImage className="rounded" src={MyImage} alt="My Image" />
            <MDBCardBody>
              <MDBCardTitle>My Image</MDBCardTitle>
              <MDBCardText>Some description about my image.</MDBCardText>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  );
};

Circle

To create a circular image, use the rounded-circle class:

<MDBCardImage className="rounded-circle" src={MyImage} alt="My Image" />

Thumbnail

To create a thumbnail image, use the img-thumbnail class:

<MDBCardImage className="img-thumbnail" src={MyImage} alt="My Image" />

Hover Overlay

MDBootstrap also provides the ability to add a hover overlay to an image. To add a hover overlay, use the following code:

import { MDBView, MDBMask } from 'mdbreact';

<MDBView hover>
  <MDBCardImage className="img-fluid" src={MyImage} alt="My Image" />
  <MDBMask overlay="white-slight" />
</MDBView>

The hover property enables the hover effect, while the overlay property specifies the color of the overlay.

Conclusion

MDBootstrap provides a wide range of image styles that can be used to enhance the look and feel of your ReactJS application. In this article, we covered the different image styles available in MDBootstrap and how to use them in your application. With MDBootstrap, you can easily create visually appealing images that grab your user's attention.