React Bootstrap — Borders, and Placements of Cards

Image for post
Image for post
Photo by Loïc Fürhoff 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.

Border Color

We can change the border color of the cards.

For example, we can write:

to render cards with various kinds of borders with the border prop.

Card Groups

We can group cards together with CardGroup components.

For example, we can write:

We have a CardGroup component wrapped around multiple Card s.

Then they’ll display side by side if our screen is wide enough.

Card Deck

There’s also the CardDeck component to group cards together.

The difference between CardGroup and CardDeck is that there’re margins between cards in CardDeck and there’s none of that in CardGroup .

For instance, we can write:

to add card decks.

Card Columns

We can also put cards into columns with CardColumns .

For instance, we can write:

to display cards in columns if our screen is wide enough to have columns.

Image for post
Image for post
Photo by Darya Tryfanava on Unsplash

Conclusion

We can create cards and lay them out in various ways.

We can have card groups to have them side by side without margins between the cards.

Also, we can have card decks to have them side by side with margins between them.

And we can have card columns to place the cards in columns.

Border colors can also be changed.

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