How can I use Bootstrap 5 with Next.js?

Question

After installing bootstrap with npm install bootstrap I added the style to /pages/_app.js like so:

import 'bootstrap/dist/css/bootstrap.css';
export default function App({ Component, pageProps }) {
    return <Component {...pageProps} />
}

However anything from it that uses javascript does not work at all, e.g. the Collapse example from their docs.

function App() {
    return (
      <div>
        <p>
          <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            Link with href
          </a>
          <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            Button with data-bs-target
          </button>
        </p>
        <div class="collapse" id="collapseExample">
          <div class="card card-body">
            Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
          </div>
        </div>
      </div>
    );
}
export default App

If I add import 'bootstrap/dist/js/bootstrap.js' to /pages/_app.js then it starts "working" as expected, until a page reload in which it says ReferenceError: document is not defined (screenshot), which leads me to believe it's not possible or that I shouldn't try to use boostrap + react or next.js.
I had thought them dropping jquery meant that it should work just "out of the box" with frameworks like react (as in not needing react-boostrap or reactstrap anymore)

Is there a way to properly use boostrap 5 and nextjs? Or should I just try something else entirely or go back to using reactstrap (which currently seems to only support boostrap 4)?

Yes, you can definitely use Bootstrap 5 from Angular, Next and ReactJS. And no, it has nothing to do with "dropping jQuery" (although I happen to LOVE jQuery!) Look here for several solutions: stackoverflow.com/a/65260998/421195. Please post back what worked for you! — paulsm4
– paulsm4, Commented Jun 5, 2021 at 0:58
@paulsm4 thanks for reply, my line of thinking that it's not possible to use comes from seeing multiple posts saying it's dumb to use bootstrap and react and that you should use material ui instead. But since I know bootstrap I want to try use it if it's possible. As for the question you linked, none of that worked for me. I still get "document is not defined" or if I use the top answer I get "window is not defined" — DavidPH
– DavidPH, Commented Jun 5, 2021 at 1:11

Ashutosh kumar · Accepted Answer · 2021-06-05 04:15:15Z

28

This is a common thing that most of us miss while switching to NextJS.

Problem: Document is not defined.

Reason: NextJS renders your app at server, and there is no window, document etc. on server, hence document is not defined. you can even console.log(typeof window, typeof document) to verify this.

NOW, what is the solution?

I used this code in my function component:

    useEffect(() => {
        typeof document !== undefined ? require('bootstrap/dist/js/bootstrap') : null
    }, [])

useEffect with empty dependencies works like componentDidMount() which runs after the code is run second time. Since code runs first at server and then at client, it will not produce errors, as client has document.

I've never used `componentDidMount(), ever.

Did that worked for me?

I just copied your Collapse example in my other app to verify this.

answered Jun 5, 2021 at 4:15

Ashutosh kumar

6207 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DavidPH Over a year ago

Brilliant, thank you so much. Although for mine I had to add import { useEffect } from 'react'(else useeffect was undefined) at the top which I notice you don't have , is that correct? This is my entire /pages/_app.js now pastebin.com/raw/2qbEMxXp

ChrisW Over a year ago

@DavidPH Excellent! Your pastebin code worked right away, except that in my default Next.js app global.css is spelled '../styles/globals.css'. - I was also required to install popper for it to work: yarn add @popperjs/core

Tabish Zaman · Accepted Answer · 2022-01-24 11:00:39Z

Steps: 1- Install bootstrap through npm. 2- now add bootstrap in _app.js.

import Head from 'next/head';
import Script from 'next/script';
import React, { useEffect } from 'react';
import '../styles/global.scss';
import 'bootstrap/dist/css/bootstrap.css';

export default function App({ Component, pageProps }) {
  useEffect(() => {
    import("bootstrap/dist/js/bootstrap");
  }, []);
  useEffect(() => {
    import("jquery/dist/jquery.min.js");
  }, []);

  useEffect(() => {
    typeof document !== undefined ? require('bootstrap/dist/js/bootstrap') : null
  }, [])

  return (
    <>
      <Head>
        <meta name='viewport' content='width=device-width, initial-scale=1' />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

Muhammad Ali · Accepted Answer · 2022-10-05 10:20:00Z

1

Yes, The easiest way to use bootstrap is to include a CDN link.

Syntax:

export default function Document() {
  return (
    <Html>
      <Head>
        
<!-- CDN Link -->
<link
          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
          crossOrigin="anonymous"
        />




      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

here is a project i am working on:

Its Output:(bootstrap button)

answered Oct 5, 2022 at 10:20

Muhammad Ali

1,3783 gold badges20 silver badges23 bronze badges

Comments

Ronen Rabinovici · Accepted Answer · 2021-08-29 18:14:38Z

0

I believe React Bootstrap (beta as of July 2021) now supports Bootstrap5: https://react-bootstrap.github.io/ See image from their website:

edited Aug 29, 2021 at 18:14

answered Jul 29, 2021 at 11:26

Ronen Rabinovici

9,2226 gold badges39 silver badges47 bronze badges

Comments

Cloud Gem · Accepted Answer · 2021-12-24 00:19:21Z

0

the _app.js and _app.tsx are difference

function MyApp({ Component, pageProps }: AppProps) {
  // import bootstrap-js-libs below for _app.js
  useEffect(() => {
     import("bootstrap/dist/js/bootstrap");
   }, []);

  useEffect(() => {
    typeof document !== undefined ? require("bootstrap/dist/js/bootstrap") : null;
  }, []);

We can use CDN on _document file too!

answered Dec 24, 2021 at 0:19

Cloud Gem

1912 silver badges3 bronze badges

Comments

btb · Accepted Answer · 2021-06-05 02:37:43Z

-2

You only imported bootstrap.css, you must import bootstrap's js file if you want to use collapse. And bootstrap's js require jquery and popper. However, react or nextjs doesn't recommend you to use jquery.

You can use one of 2 below libs alternative:

For latest bootstrap 5, you can use BootstrapCDN:

In _document.js, add 2 lines:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="undefined" crossorigin="anonymous"></script>

edited Jun 5, 2021 at 2:37

answered Jun 5, 2021 at 2:26

btb

1801 silver badge4 bronze badges

1 Comment

DavidPH Over a year ago

Normally I'd say I appreciate any reply but it's as if you didn't read the question. 1) I'm showing how I'm attempting to import bootstrap's js and failing. 2) I'm asking about bootstrap 5, and react-bootstrap + reactstrap are for bootstrap 4, 3) I mentioned those in my post anyway, 4) bootstrap 5 is designed to be used without jquery

Collectives™ on Stack Overflow

How can I use Bootstrap 5 with Next.js?

6 Answers 6

2 Comments

Comments

Yes, The easiest way to use bootstrap is to include a CDN link.

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Yes, The easiest way to use bootstrap is to include a CDN link.

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related