Adding Bootstrap 5 to your Gatsby project

In this article we will talk about how to add bootstrap 5-beta1 in our gatsby project.

1. Install bootstrap and popper.js modules

Install the bootstrap and popper.js dependencies via npm.

npm install bootstrap@5.0.0-beta1 @popperjs/core@2.6.0 --save

2. Set up gatsby-browser.js

If you don’t have the gatsby-browser.js file so create this file and add the following code

import "@popperjs/core/dist/umd/popper.min"
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap/dist/js/bootstrap.min"

Note: JQuery is removed for Bootstrap 5 version and switched to Vanilla JS with some working plugins

Now your project is ready to use bootstrap 5.