Search code examples
javascriptreactjsnpmreact-bootstrap

What could cause my react-bootstrap modal to ignore all styling?

I've got two projects, one created while following a tutorial series, and another created on my own some time afterwards and trying to follow in its footsteps. I've whittled down my problem to a barebones comparison of index.js in both projects.

This code is a modified index.js that was originally auto-generated by the project-creation command npx create-react-app <projectname>. The modal function is copy-pasted from the react-bootstrap website (see the "Live Demo" code).

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';

import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';

function Example() {
  const [show, setShow] = React.useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Example />
  </React.StrictMode>
);

reportWebVitals();

Things I've tried:

  1. Code is identical? It's copy-pasted, so it's identical.
  2. Dependencies not installed? When I run npm start and the page loads in the browser, neither complains about missing modules, plus I've looked in both projects' package.json files and confirmed the same dependencies.

And yet the two projects render this identical file differently:

  • Project 1: Project 1
  • Project 2: Project 2

Any ideas?

The code is identical and the packages are the same, and yet the two projects are not rendering identically. It seems like the latter simply isn't rendering styles at all.

Solution

  • So apparently I forgot to add this in the <head>...</head> in index.html. It was something small in a file that I forgot to check.

      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">