Back

Install Bootstrap In Next.js 13 Using The App Router

Published on October 10, 2023

In this article you'll see how to add bootstrap to a Next.js project that is setup using the new app router which was made stable with Next.js 13.

▶️ Watch This Guide as a Video

▶️ If you're project is using the pages router, refer to this video.

🔗 See the complete code for this example on GitHub.

Create A New Next.js Project

We'll begin by creating a new Next.js project which is configured to use the app router. Create the project with the following command.

npx create-next-app@latest nextjs-bootstrap-example --use-npm

Answer the prompts as shown below.

Open the new project in your favorite editor, I'll be using Visual Studio Code.

cd nextjs-bootstrap-example
code .

Notice your project should have a src/app directory as seen below.

Back in the terminal, start the server with the following command.

npm run dev

Now, visit http://localhost:3000 in your browser and you should see the default Next.js app.

Clean Up The Project

Remove existing css from globals.css and page.module.css then replace the content of page.js with the below.

export default function Home() {
  return (
    <main>
      <h1 className="text-danger">Hello Bootstrap</h1>
    </main>
  )
}

Notice how we added the class text-danger. This is a bootstrap class which will make the font red by default. However, since we don't have bootstrap installed yet we'd expect the font to remain black.

If you view the browser now it should be a very simple page that says Hello Bootstrap.

Adding Bootstrap CSS to Next.js

In the terminal install bootstrap using npm with the following command.

npm install bootstrap

If you look at the package.json file now you should see "bootstrap" was added under the dependencies.

Next open the layout.js file and add the following line above the import './globals.css'.

import 'bootstrap/dist/css/bootstrap.css';

That complete file should look like this:

import 'bootstrap/dist/css/bootstrap.css';
import './globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Bootstrap css is now installed, if you view the browser the font of the "Hello Bootstrap" title should be red. This is because the text-danger class is now being applied from bootstrap.

Hello Bootstrap with text-danger style applied

Installing Bootstrap Javascript in Next.js

There is an additional step to get bootstrap javascript working. Lets start by adding a simple bootstrap accordion, which uses bootstrap javascript for the collapse and show interaction.

Modified page.js with the following code. Notice we're also adding a col-md-6 and margin to center everything. This is modified directly from the bootstrap accordion example.

export default function Home() {
  return (
    <main>
      <div className="text-center mt-4 col-md-6 mx-auto"> 
        <h1 className="text-danger">Hello Bootstrap</h1>
        
        <div className="accordion" id="accordionExample">
          <div className="accordion-item">
            <h2 className="accordion-header" id="headingOne">
              <button className="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Accordion Item #1
              </button>
            </h2>
            <div id="collapseOne" className="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
              <div className="accordion-body">
                <strong>This is the first accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. Also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
              </div>
            </div>
          </div>
          <div className="accordion-item">
            <h2 className="accordion-header" id="headingTwo">
              <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Accordion Item #2
              </button>
            </h2>
            <div id="collapseTwo" className="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
              <div className="accordion-body">
                <strong>This is the second accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. Also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
              </div>
            </div>
          </div>
          <div className="accordion-item">
            <h2 className="accordion-header" id="headingThree">
              <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Accordion Item #3
              </button>
            </h2>
            <div id="collapseThree" className="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
              <div className="accordion-body">
                <strong>This is the third accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. Also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  )
}

Now you will see an accordion in the browser. However, if you click on any of the items you'll notice that it doesn't actually work.

We can fix that by updating the layout.js to import the bootstrap javascript file. But since we want to load the bootstrap javascript only on the client side we'll make a new component and make use of "use client" which will load bootstrap javascript only for the client and not the server.

Create a new file in src/components/BootstrapClient.js and add the following.

"use client"

import { useEffect } from 'react';

function BootstrapClient() {
  useEffect(() => {
    require('bootstrap/dist/js/bootstrap.bundle.min.js');
  }, []);

  return null;
}

export default BootstrapClient;

Now in layout.js import the new component.

import BootstrapClient from '@/components/BootstrapClient.js';

Finally return the new component in the RootLayout. The complete layout.js should look like this.

import 'bootstrap/dist/css/bootstrap.css';
import './globals.css'
import { Inter } from 'next/font/google'
import BootstrapClient from '@/components/BootstrapClient.js';

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {children}
        <BootstrapClient />
      </body>
    </html>
  )
}

If you test the bootstrap accordion now, you'll see that the javascript is functioning properly.

That's it! You now have bootstrap css and javascript installed in your Next.js app that uses the app router.

ABOUT ME

Dave Faliskie

I'm a software developer interested in building world changing applications. My goal is to document and share all the knowledge I learn so others can quickly start building something awesome.