ReactJS Reactstrap Card Component

Last Updated : 07 Mar, 2024

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 ReactStrap props:

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 :

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:

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%"           src="https://media.geeksforgeeks.org/wp-content/                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;

ReactJS Reactstrap Collapse Component

gouravhammad

Improve

Article Tags :

ReactJS Reactstrap Card Component

Similar Reads