Search code examples
next.jsbootstrap-modalreact-bootstrap

Nextjs react-bootstrap Modal not opening on top of page

In my nextjs project, I have been trying to implement a Bootstrap Modal as a component similar to this vertically centered code example.

The project structure:

components 
 - modal.js
pages
 - index.js
 - about.js

From index.js I call the modal component:

 <Button variant="primary" onClick={() => setModalShow(true)}>
        Launch vertically centered modal
 </Button>
 <ModalMailingList show={modalShow} onHide={() => setModalShow(false)} />

This results in the modal NOT opening in a window on top of my page, but rather toggle the modal as a div inside the page.

Here is the working code, of the unwanted behavior.

How can I implement a modal component and make it open ON TOP of the page? (as in the original react-bootstrap code example)

SOLUTION UPDATE:

Had to add bootstrap.css to pages/_document.js

<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>
Solution

  • SOLUTION:

    Had to add bootstrap.css to pages/_document.js

    <link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>