React Bootstrap — Cards

Image for post
Image for post
Photo by Wolfgang Hasselmann on Unsplash

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to work with React Bootstrap cards.

Cards

Cards provide us with a flexible content container with multiple variants and options.

To use it, we can write:

We have Card component with child components inside it.

Card.Img has the image we want to display on the card.

variant='top' makes it display on top.

src is the URL of the image.

Card.Body has the body of the card.

Card.Title has the title of the card.

Card.Text has the text of the card.

The card body can be shortened to:

We just add the body prop to the Card to make a simple card with text.

Title, Text, and Links

Card.Title has the title of the body.

Card.Subtitle has the subtitle.

Card.Text has the main text content.

Card.Body group those together with one container.

Card.Text output p tags around the content, so we can have more than one of them.

For instance, we can write:

We have all of those components in one card.

List Groups

We can add ListGroup s to cards.

For instance, we can write:

We have a ListGroup in the Card to display it inside the card.

Image for post
Image for post
Photo by Cristina Gottardi on Unsplash

Conclusion

Cards are containers that can have a variety of content,

They include titles, subtitles, images, links, paragraphs, links, list groups etc.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store