Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

ReactJS Reactstrap Card Component

  • Last Updated : 01 Aug, 2021

Reactstrap: Reactstrap is a popular front-end library that is easy to use React Bootstrap 4 components. This library contains the stateless React components for Bootstrap 4. The Card components allow the user to display content. We can use the following approach in ReactJS to use the ReactJS Reactstrap Card Component.

Properties of the ReactStarp props:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Card Props:

  • tag: Card Props tag can be a function or a string, and it is used to denote the tag for this component.
  • inverse: The inverse props in reactStrap are used to indicate whether to inverse text color or not.
  • color: The color props are used to change the color of the card. It should be RGB format and the name of the  color.
  • body: The body props are used to indicate whether to apply card-body class or not in the reactStrap component.
  • className: The className props are used to denote the class name for styling the component in reactStrap.

CardBody Props:



  • tag: The CardBody props can be a function or a string, and it is used to denote the tag for this component in reactStrap.
  • className: The className props are used to denote the class name for this component in reactStrap.

 

CardColumns Props:

  • tag: The tag CardColumns Props can be a function or a string, and it is used to denote the tag for this component.
  • className: The className props are used to denote the class name for this component, which is used for styling the CSS.

Card deck Props:

  • tag: The tag props come under the Card deck Props. On the card deck, it can be a function or a string, and it is used to denote the tag for this component.
  • className: The className props come under Card deck Props and are used to denote the class name for this component.

CardFooter Props:

  • tag: The tag Props come under the CardFooter Props. It can be a function or a string, and it is used to denote the tag for this component.
  • className: The className props come under the CardFooter Props. It is used to denote the class name for this component.

CardGroup Props:

  • tag: The tag props in CardGroup can be a function or a string, and it is used to denote the tag for this component.
  • className: className pops comes under the CardGroup Props .It is used to denote the class name for this component.

CardHeader Props:

  • tag: The CardHeader tag prop can be a function or a string, and it is used to denote the tag for this component.
  • className: The className props come under CardHeader props .It is used to denote the class name for this component.

CardImg Props:

  • tag: The tag can be a function or a string, and it is used to denote the tag for this component.
  • className: The className is used to denote the class name for this component.
  • top: The top props are used to position images through card-img-top class.
  • bottom: The bottom props are used to position images through card-img-bottom class.

CardImgOverlay Props:



  • tag: The tag prop can be a function or a string, and it is used to denote the tag for this component.
  • className: The className props are used to denote the class name for this component.

 

CardLink Props:

  • tag: This cardLink prop can be a function or a string, and it is used to denote the tag for this component.
  • className: This className prop is used to denote the class name for this component.
  • innerRef: This innerRef prop is used to denote the inner reference element.

CardSubtitle Props:

  • tag: This prop can be a function or a string, and it is used to denote the tag for this component.
  • className: These props can be used to denote the class name for this component.

CardText Props:

  • tag: This prop can be a function or a string, and it is used to denote the tag for this component.
  • className: This prop is used to denote the class name for this component.

CardTitle Props :

  • tag: This prop can be a function or a string, and it is used to denote the tag for this component.
  • className: These props, className props are used to denote the class name for this component.

The syntax for Creating React Application And Installing Modules:

  • Step 1: Create a React application using the following command.
    npx create-react-app foldername
  • Step 2: After creating your project folder i.e. folder name, move to it using the following command.
    cd foldername
  • Step 3: Install Reactstrap in your given directory.
 npm install --save reactstrap react react-dom

Project Structure: It will look like the following :

Project Structure

Example 1: Now write down the following code in the App.js file. Here, the App is our default component where we have written our code.

App.js




import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import {
    Card, CardImg, CardBody,
    CardTitle, CardText, Button
} from "reactstrap"
  
function App() {
    return (
        <div style={{
            display: 'block', width: 700, padding: 30
        }}>
            <h4>ReactJS Reactstrap Card Component</h4>
            <Card>
                <CardImg
                    width="50px"
                    height="50px"
                src="https://media.geeksforgeeks.org/wp-content/
                          uploads/20210425000233/test-300x297.png"
                    alt="GFG Logo" />
                <CardBody>
                    <CardTitle tag="h5">Sample Card title</CardTitle>
                    <CardText>Sample Card Text to display!</CardText>
                    <Button>Action Button</Button>
                </CardBody>
            </Card>
        </div>
    );
}
  
export default App;

 

Step to Run Application: Run the application using the following command from the root directory of the project: 

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Card Component

Example 2:This is another example for ReactStrap card component. 

App.js




import React from "react";
import {
  Card,CardBody,CardLink,CardTitle,
     
} from "reactstrap";
  
const Example = (props) => {
  return (
    <div>
      <Card>
        <CardBody>
          <CardTitle tag="h5">GFG Practice Portal </CardTitle>
          <img
          width="50%"
               uploads/20210728115525/imggggg.png"
          alt="Card image cap"
        />
           
            
         <p>
            The Best Data Structures Course Available Online From Skilled 
            And Experienced Faculty. Learn Data Structures In A Live 
            Classroom With The Best Of Faculty In The Industry. 
            Classroom Experience.
          </p>
  
        </CardBody>
         
        <CardBody>
           
          <CardLink href="https://www.geeksforgeeks.org/html-images/">
             To knbow more about us... 
          </CardLink>
   
        </CardBody>
      </Card>
    </div>
  );
};
  
export default Example;

card components 

Reference: https://reactstrap.github.io/components/card/




My Personal Notes arrow_drop_up
Recommended Articles
Page :