Reactstrap — Cards and Groups

Image for post
Image for post
Photo by Clarissa Carbungco on Unsplash

Reactstrap is a version Bootstrap made for React.

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

In this article, we’ll look at how to customize cards with Reactstrap.

Outline Variants

Cards have outlined variants

The borders have colors, but the rest don’t.

For example, we can add the outlines by adding the outline prop:

We just put the outline prop with the color prop to add the borders we want.

Groups

We can put multiple cards into a container with the CardGroup component.

For instance, we can write:

We have multiple Card components in the CardGroup .

Then they’re placed side by side responsively.

They’ll be placed without margins between them.

Decks

Reactstrap also comes with the CardDeck component to group cards with margins.

For example, we can write:

We use the CardDeck component to place the cards side by side with margins between them.

Conclusion

We can group cards with card decks and card groups.

Also, we can add border colors to cards.

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