How to Correctly Use Bootstrap 5 in Next.js

This article shows you how to correctly use Bootstrap 5 in a Next.js project. By the end of this article, we will be able to:

• Use all CSS classes provided by Bootstrap 5 whereever you want.
• Use all Javascript functionality provided by Bootstrap 5 without errors.

Without any further ado, let’s get our hands dirty.

The Steps

Installing

You can add Bootstrap 5 to your Next.js project by executing the following command:

npm i bootstrap

Adding CSS

To use the styles from Bootstrap, we need to manually import its CSS file into the pages/_app.js file (create one if it doesn’t exist) :

import 'bootstrap/dist/css/bootstrap.css'; // Add this line
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

At this point, you are ready to use Bootstrap’s CSS features, like this:

<button className="btn btn-primary m-3">Button Primary</button>

However, components that need Javascript like dropdown, collapse, accordion, carousel... will NOT work and will cause errors even if you import Bootstrap’s Javascript file like this:

import "bootstrap/dist/js/bootstrap";

To fix this, we have to do an extra step.

Using Javascript features

Bootstrap uses some only-client-side objects (window, document) to handle events. On the other hand, Next.js renders the app on both the server-side and client-side. There is no window, document on the server-side thus you can see some error messages like the following:

document is not defined
windows is not defiend

To avoid the mentioned errors, we have to make sure that the window and document objects only be used on the client side. That can be done with the useEffect hook:

// Place this in the pages/_app.js file
useEffect(() => {
    import("bootstrap/dist/js/bootstrap");
}, []);

For more clarity, see the complete example below.

The Example

Preview

In this demo, we have some beautiful buttons made with Bootstrap. The dropdown select button is a thing that needs Javascript to work.

The Code

1. pages/_app.js:

import "bootstrap/dist/css/bootstrap.css";
import "../styles/globals.css";

import { useEffect } from "react";

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    import("bootstrap/dist/js/bootstrap");
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;
// KindaCode.com

2. pages/index.js:

// KindaCode.com
export default function Home() {
  return (
    <div className="container p-3">
      <button className="btn btn-primary m-3">KindaCode.com</button>
      <button className="btn btn-warning m-3">Hello</button>

      <div className="dropdown m-3">
        <button
          className="btn btn-secondary dropdown-toggle"
          type="button"
          data-bs-toggle="dropdown"
          id="dropdownMenuButton1"
          aria-expanded="false"
        >
          Dropdown button
        </button>
        <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton1">
          <li>
            <a className="dropdown-item" href="#">
              Option 1
            </a>
          </li>
          <li>
            <a className="dropdown-item" href="#">
              Option 2
            </a>
          </li>
          <li>
            <a className="dropdown-item" href="#">
              Option 3
            </a>
          </li>
        </ul>
      </div>
    </div>
  );
}

Conclusion

You’ve learned how to fully use Bootstrap 5 in a Next.js project. If you’d like to explore more new and interesting stuff about modern frontend development with Next.js and React, take a look at the following articles:

• Next.js: Disable Server-Side Rendering on Specific Pages
• How to programmatically navigate in Next.js
• Next.js: 404 error page and 404 error code
• React + TypeScript: Create an Autosize Textarea from scratch
• 5 best open-source WYSIWYG editors for React
• Most popular React Component UI Libraries

You can also check our React topic page and Next.js topic page for the latest tutorials and examples.