Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

ReactJS MDBootstrap Card Component

  • Last Updated : 12 Jan, 2022

Reactstrap is a 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 Card Component in ReactJS MDBootstrap. 

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.  It replaces the use panels, wells, and thumbnails. As all of it can be used in a single container called a card.

Properties:

  • tag: It is used to define tags in Cards.
  • className: It is used to define a custom class to a Cards.
  • border: It is used to set the border of the cards.
  • shadow: It is used to set cards shadow.
  • background: it is used to set the background color of Cards.
  • alignment: It is used to set the alignment of text inside the cards.

 

Syntax:

<MDBCard>
 GeeksforGeeks
</MDBCard>

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

Step 4: Import the element to be used in the project.

import { MDBBtnGroup } from 'mdb-react-ui-kit'

Project Structure: It will look like the following.

"aligncneter" alt="Project Structure">

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 the Card module

App.js




import React from "react";
import {
  MDBCard,
  MDBCardBody,
  MDBCardTitle,
  MDBCardText,
  MDBCardImage,
  MDBBtn
} from "mdb-react-ui-kit";
  
export default function App() {
  return (
    <center>
      <MDBCard style={{ maxWidth: "15rem" }}>
        <MDBCardImage
          src=
          position="top"
        />
        <MDBCardBody>
          <MDBCardTitle>GeeksforGeeks</MDBCardTitle>
          <MDBCardText>
            Reactstrap is a bootstrap based 
            react UI library that is used to
            make good looking webpages with 
            its seamless and easy to use
            component.
          </MDBCardText>
          <MDBBtn href="www.geeksforgeeks.org">Button</MDBBtn>
        </MDBCardBody>
      </MDBCard>
    </center>
  );
}

Output:

ReactJS MDBootstrap Card Component

Example 2: In this example, we will know how to use the header and footer in a card component.

App.js




import React from "react";
import {
  MDBCard,
  MDBCardBody,
  MDBCardTitle,
  MDBCardText,
  MDBCardHeader, 
  MDBCardFooter
} from "mdb-react-ui-kit";
  
export default function App() {
  return (
    <center>
      <br/>
      <MDBCard style={{ maxWidth: "15rem" }}>
        <MDBCardHeader>Card Header</MDBCardHeader>
        <MDBCardBody>
          <MDBCardTitle>GeeksforGeeks</MDBCardTitle>
          <MDBCardText>
            Reactstrap is a bootstrap based 
            react UI library that is used to
            make good looking webpages with 
            its seamless and easy to use
            component.
          </MDBCardText>
        </MDBCardBody>
        <MDBCardFooter >Card Footer</MDBCardFooter>
      </MDBCard>
    </center>
  );
}

Output:

ReactJS MDBootstrap Card Component

Example 3: In this example, we will know how to use border property in a Card component.

App.js




import React from "react";
import {
  MDBCard,
  MDBCardBody,
  MDBCardTitle,
  MDBCardText,
  MDBCardHeader, 
  MDBCardFooter
} from "mdb-react-ui-kit";
  
export default function App() {
  return (
    <center>
      <br/>
      <MDBCard style={{ maxWidth: "15rem" }} border='danger'>
        <MDBCardHeader>Danger Border</MDBCardHeader>
        <MDBCardBody>
          <MDBCardTitle>GeeksforGeeks</MDBCardTitle>
          <MDBCardText>
            Reactstrap is a bootstrap based 
            react UI library that is used to
            make good looking webpages with 
            its seamless and easy to use
            component.
          </MDBCardText>
        </MDBCardBody>
      </MDBCard>
    </center>
  );
}

Output:

ReactJS MDBootstrap Card Component

Reference: https://mdbootstrap.com/docs/b5/react/components/cards/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!