React Bootstrap — Cards Customization

Image for post
Image for post
Photo by Ashes Sitoula 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 customize React Bootstrap cards.

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.

We can also have a header above the list group.

For example, we can write:

We just add the Card.Header to display the featured item on top.

Header and Footer

We can add a header with the Card.Header component.

For instance, we can write:

to display the header on top of the card.

It’s gray and it’s above all the content.

The Card.Body is displayed below the header.

Card.Header can be styled with the as prop.

For instance, we can write:

Then the header will be rendered as an h1 element.

Images

We can display images within cards.

To do that, we can write:

We have a card with an image on top as indicated by the top prop of Card.Img .

src has the URL of the image.

Conclusion

We can add various things to cards.

They include images and list groups.

List groups in cards and the card itself can have their own header.

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