DEV Community

loading...

Discussion on: Bootstrap 5 + React project setup and customisation

Collapse
danwalsh profile image
Dan Walsh Author

Awesome—nice work! 🥳

Yep, you'll need to include Bootstrap's JavaScript dependencies. There are a couple of different ways to do this—I ended up including them in my <head/> tag using the next/head component:

import Head from "next/head";

const Layout = ({ children }) => {
  return (
    <>
      <Head>
        <script
          src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
          crossorigin="anonymous"
        ></script>
      </Head>
      <div className="container">
        <div className="row">
          <div className="col">{children}</div>
        </div>
      </div>
    </>
  );
};
Enter fullscreen mode Exit fullscreen mode

This was my "quick fix" way of getting things like collapse and dropdowns up and running, however I'd recommend looking into properly importing Bootstrap into your project as a module, if you're building something for production.

Collapse
sinamoradi1375 profile image
sinamoradi1375

Hi there, have you found an easier and reliable way to import the JS into the app? I searched through the web and bootstrap docs for configuring the webpck was complicated for a guy that never worked with webpack.
Any help would be appreciated