How to Install and Use React Bootstrap with Gatsby JS?

Last Updated : 02 Nov, 2023

In this article, we are going to learn how to install and use React Bootstrap with Gatsby JS. We will install GatsbyJS, then we will install React-Bootstrap in the project to use the class and components of Bootstrap.

Prerequisites

Approach

To begin, we’ll install the Gatsby CLI globally on your machine to create a Gatsby project. Next, we’ll initiate a new Gatsby project and set up the essential project details. Following that, we’ll install React-Bootstrap and create a new file to import the Bootstrap CSS. This will allow us to incorporate Bootstrap into our project.

Steps to create Gatsby Project and Install required modules:

Step 1: Install the Gatsby using the following command

npm install -g gatsby-cli

Step 2: Then create a Gatsby Project using the following command

gatsby new

Step 3: Enter the following prompts as per your need

What would you like to call your site?
√ · GFG-Boot
What would you like to name the folder where your site will be created?
√ GFG/ gfg-boot
√ Will you be using JavaScript or TypeScript?
· JavaScript
√ Will you be using a CMS?
· No (or I'll add it later)
√ Would you like to install a styling system?
· No (or I'll add it later)
Done

Step 4: Now install React-Boostrap by using the following command

npm install react-bootstrap bootstrap

Step 5: Create a gatsby-browser.js and the following import in the file

import 'bootstrap/dist/css/bootstrap.min.css'

Project Structure:

Project Strucrure

The updated dependencies in package.json file will look like:

 "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.3.2",
    "react": "^18.2.0",
    "react-bootstrap": "^2.8.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Example 1: This example implements the above-mentioned approach.

Javascript

import * as React from "react"; 
import { Container, Navbar, Nav, Button } from "react-bootstrap"; 
  
const IndexPage = () => { 
    return ( 
        <div> 
            <Navbar bg="light"
                    expand="lg"> 
                <Container> 
                    <Navbar.Brand href="#home"> 
                        GastbyStrap 
                    </Navbar.Brand> 
                    <Navbar.Toggle aria-controls="basic-navbar-nav" /> 
                    <Navbar.Collapse id="basic-navbar-nav"> 
                        <Nav className="ml-auto"> 
                            <Nav.Link href="#about">About</Nav.Link> 
                            <Nav.Link href="#services">Services</Nav.Link> 
                            <Nav.Link href="#contact">Contact</Nav.Link> 
                        </Nav> 
                    </Navbar.Collapse> 
                </Container> 
            </Navbar> 
            <div className="banner"> 
                <Container> 
                    <h1> 
                        Welcome to My Website using 
                        Gatsby and React Boostrap 
                    </h1> 
                    <Button variant="primary"
                            href="#services"> 
                        Explore 
                    </Button> 
                </Container> 
            </div> 
        </div> 
    ); 
}; 
  
export default IndexPage; 
export const Head = () => ( 
    <title>Home Page</title> 
);