How to Use React Bootstrap Cards in Gatsby JS, The Basics

Cards in React Bootstrap is a great way to organize content, including blog synopses, images and other content that you would like a uniform look for. Combining cards with bootstrap columns and images make them all that much more powerful.

Here's a beginners guide on how to use cards in React Bootstrap in Gatsby JS. You can use any React JS framework, too.

Thanks,
Haydn

- - - - - -

📈 Join my newsletter:

🧵 Find me on Threads:

⤵ Download ALL of my source codes & courses
Introducing ADWC PRO

- - - - - -

[michaelmcgory]

Thanks for the high-quality content. Your channel has a lot of really great videos. They have been a big help to me. One question, in this video, you put a <p> element inside the Card.Text. This was giving me a warning and when I looked at the outputted html it was already rendering the Card.Text as a <p> element, so it was like I was using <p><p>My text</p></p>. Am I missing something or has this behavior changed in React Bootstrap? Or do you just ignore the warning? Why not just use the className that comes with the Card.Text element?

[pranshusati]

I know this tutorial is 2 yrs old at this point but you've answered to my comment before so I'm expecting you to monitor comments so here's the question
I'm mapping three cards but when i shrink to mobile size the do not appear in the center but to the left how do ii fix this?