Reactstrap — Card Customizations

Image for post
Image for post
Photo by Anna Pelzer 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.

Header and Footer

We can add headers and booters to cards.

For example, we can write:

We have the CardHeader and CardFooter components to display the header and footer.

Image Caps

We can add images with the CardImg component.

Then we can align them with the top and bottom props.

For example, we can write:

The CardImg can be placed on the card.

The top and bottom props place make the images flush to the edges.

Image Overlays

We can place images below the text with the CardImgOverlay component.

For example, we can write:

We have the inverse prop to change the text color to white.

All the content is placed into the CardImgOverlay so that they’re placed above the image.

Background Variants

We can change the style variants of the cards.

To do that, we set the color prop:

We set the color prop to the color we want.

We add the body prop to set the card to the body.

inverse change the content color to white.

Image for post
Image for post
Photo by Micheile Henderson on Unsplash

Conclusion

We can add headers, footers, images, and overlays 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