DEV Community

Discussion on: Bootstrap 5 + React project setup and customisation

View post

Replies for: Nice and quick setup! I now have my page up and running but i cant get the collapse function to work, is there something more i need to do to get ...

Collapse
 
danwalsh profile image
Dan Walsh •

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