Javatpoint Logo
Javatpoint Logo

React Bootstrap Cards

Bootstrap cards are one of the most used bootstrap components. Cards provide an easy way to align the content with a flexible and extensible container. Cards are designed in a way so that they can auto-align the content in a proper way. There are different variants and options available for the cards.

Usually, cards are used to create a product, profile, categories, and other useful layouts of a web page. Cards include the options for headers, footers, body with extensive background colors, and powerful display options. The headers, footers, and body options specify the position of the content.

How to use Bootstrap Cards in React Application?

React Bootstrap provides <Cards> component to use the card container. It also support the <Card.Header>, <Card.Body>, <Card.Img>, <Card.ImgOverlay>, <Card.Link>, <Card.Title>, <Card.Text>, and <Card.Group> sub components to specify position of the card content.

To use the card container, specify the <Card> </Card> component and its content within the card and import it as follows:

Let's understand it with a basic example:

App.js:

Output:

React Bootstrap Cards

From the above output, the card content is properly aligned without applying any additional CSS properties.

Let's understand card content types:

<Card.Body>: The body component specifies some content within card. If we increase the card content, it will automatically adjust the card height. The <Card.Body> component is used within the <Card></Card> component. Consider the below example:

Alternatively, we can also use the body prop to specify the card body:

<Card.Title>, <Card.Subtitle>, and <Card.Text>: These components are used within the <Card.Body> </Card.Body> component. As their name specifies, they are used to define the title, which will be bold and large, subtitle, which will be lighter and small, and text of the card.

Consider the below example:

<Card.Link>: This component is also used within the <Card.Body> component. It allows us to specify the navigation link for the card.

Consider the below example:

App.js:

Output:

React Bootstrap Cards

From the above output, we can see everything is perfectly aligned. Well, that's the beauty of a bootstrap card.

List Groups Using Cards

Card container is not just limited to creating products, blogs, and profiles. Even we can also create beautiful list groups using cards. Let's understand how to create list groups using cards.

To create the list group with card, use the <ListGroup> and <Listgroup.Item> component inside a <Card> component.

Consider the below example:

App.js:

Output:

React Bootstrap Cards

Applying Card Styles

The bootstrap card component allows us to specify the card background and text color. We can choose any available color options by using the bg and text props.

Consider the below example:

App.js:

Output:

React Bootstrap Cards

There are different color variants available for the card. Let's use them all together:

App.js:

Output:

React Bootstrap Cards

From the above output, we can see different types of background colors and text colors are applied to the card style based on the rendered version of the card. So we can choose any of these available card styles for our layout.

Card Border Color:

We can also specify the border color for a card component, just like the background and text color. To specify the border color, we have to pass the value of the color variant in the border prop.

Consider the below example:

Output:

React Bootstrap Cards

Thus, we can choose any of the available background, text, and border colors for our card component to make it attractive.

Card Groups

We can use the <CardGroup> component to create a proper layout of the cards. The <Card> component will be used within the <CardGroup> component. The beauty of the card group component is it aligns the card height equally to make it look uniform. Consider the below example:

App.js:

Output:

React Bootstrap Cards

Thus, we can precisely use the card container to align the content. It will be useful for creating the product, profile, blog, and other layout sections.







Youtube For Videos Join Our Youtube Channel: Join Now

Feedback


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA