How to Install and Use React Bootstrap with Gatsby JS

There's Bootstrap, and then there's React Bootstrap. And Gatsby JS runs on React. React Bootstrap is in every single one of my projects. It makes designing a breeze and the naming conventions in React Bootstrap mean I don't have a mountain of div tags to wade through.

Here's the step-by-step tutorial on how to install and use React Bootstrap in a Gatsby JS project.

Gatsby Starter Project I use in the video:

React Bootstrap

Thanks,
Haydn

- - - - - -

⤵ Download ALL of my source codes & more!

Introducing ADWC PRO

ADWC Pro provides you with:

• Access to all the source codes for ALL projects
• Bootstrap Bootstrap online course (retail $79) w/ supplied source code
• All future online courses (Gatsby v5 course coming soon)
• Updates of ADWC and the web dev business
• and more!

Price:
Just $6/mo. or $49/year (32% off monthly)

-------

Got a question for me?

[blahablast]

Excellent video! I'm a new front end dev and discovered Gatsby. I really like all these videos you are putting out. I plan to watch them all and give them thumbs up. More people need to see this channel.

[kendallhayes]

Thank you for keeping it short and sweet!

[sanketpath]

Haydn, love how you explain things. Pretty easy for someone who comes from design or non-developer background. Thanks!

[JavierLopez-ryln]

I didn't remember how to use bootstrap on react, now I'm working on Gatsby, Thank...

[userthatsme]

Skip to 4:30 for folks who already have their project and just want to add react-bootstrap.

[troyrasiah]

Looking forward to more videos, I'm going to add react bootstrap to my project now after watching this!

[tonijz]

Great video, helped me to quickly add bootstrap to my Gatsby project :thumbs-up

[nyantaro]

Great video! Just maybe increase the font size of your terminal and your editor when screencasting.

[raheelarif]

If i have a html theme, where i will link css files and scirpts in gatsby please let me know.. as in reactjs we link these files in public index.html but how can in gatsby.js

[cquesada]

👋Hi friend! I'm also a Designer Who Codes, and now Im learning Gatsby in React, also looking how to integrate bootstrap in this amazing technology. Can you give me some advice about the best path to learn all this. Of course your videos would be included. </>

[siamqtr]

i keep getting Error: Invalid hook call. Hooks can only be called inside of the body of a function component. it works fine without bootstrap

[gavincarter]

Having an issue right now with gatsby build throwing a window not defined error because of react-bootstrap, which comes from react-overlays, which comes from @popper. Wish the build process and errors was addressed but good video otherwise.

[cameroncameron]

jesus christ, 5 minutes in and still no information on how to install bootstrap. what a joke