Search code examples
reactjsgatsbyreact-bootstrapbootstrap-5

React Bootstrap not working in Gatsby version 4

I've had trouble using React Bootstrap in Gatsby version 4 in that it doesn't seem to work at all. There is no responsiveness.

I've created a small sample project to test this available here: https://github.com/Johnsensei/react-bootstrap-test

The code for the app itself looks like this:

import * as React from "react"
import { Container, Row, Col } from "react-bootstrap"

const IndexPage = () => {
  return (
    <Container>
      <Row>
        <Col lg={4}>Column 1</Col>
        <Col lg={4}>Column 2</Col>
        <Col lg={4}>Column 3</Col>
      </Row>
    </Container>
  )
}

export default IndexPage

In theory, on a large screen, each of those columns should be lined up on the same row and take up 1/3 of the row (4/12 of the Bootstrap row's grid).

Below is a screenshot of the result: Screenshot

As we can see, the columns are not in a row on a large screen. They are all stacked on one another.

Below are the dependencies in the package.json

"dependencies": {
    "bootstrap": "^5.1.3",
    "gatsby": "^4.3.0",
    "react": "^17.0.1",
    "react-bootstrap": "^2.0.3",
    "react-dom": "^17.0.1"
  }

Is there something absurdly simple that I've just left out or forgotten to do? If yes, what in this specific code will fix it?

Or are these versions of Gatsby and React Bootstrap just incompatible? If yes, should I submit an issue to Gatsby or Bootstrap?

Thanks for your time.

Solution

  • According to the docs:

    If you’re using Bootstrap v4 or older, you’ll also need to include jQuery to get many of the JavaScript components to work correctly. As of Bootstrap v5, the framework no longer depends on jQuery.

    So, as long as you install the npm dependency, you'll need to import the required modules globally to make them accessible to your app. You can do it by import 'bootstrap/dist/css/bootstrap.min.css' module at:

    • Layout component
    • gatsby-browser.js

    Note that some grids and modules may need other Bootstrap resources.