Part 8. GatsbyJS and BootStrap

Overview

Installation

Install Bootstrap packages in the current project :

npm install react-bootstrap bootstrap

Import the Bootrstrap CSS :

1

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

Every object used must be imported using the following syntax :

1
2
3
4
5
6
7
8
9

import {
  Container,
  Nav,
  Navbar,
  NavDropdown,
  Form,
  FormControl,
  Button,
} from "react-bootstrap"

Then use the components in the React code :

1
2
3
4
5
6
7
8
9

    ...
  return (
    <div data-is-root-path={isRootPath}>
      <Navbar fixed="top" bg="light" expand="lg">
        <Container >
          <Navbar.Brand href="#">{header}</Navbar.Brand>
          <Navbar.Toggle aria-controls="navbarScroll" />
          <Navbar.Collapse id="navbarScroll">
    ...

References