Install Bootstrap in Next.js | React

Install Bootstrap in React App. Install Bootstrap in Next.js.

Recently, I started experimenting with Next.js framework for building web apps. Let’s see how to install bootstrap in Next.js.

Once you have created the Next.js app,

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

Navigate to the project directory and install bootstrap using npm.

cd nextjs-blog
npm install bootstrap jquery popper.js

The above command installs bootstrap, jQuery and popper.js. Bootstrap requires jQuery and popper.js if you are using Bootstrap JavaScript components.

Import the bootstrap, jQuery and popper.js in index.js.

import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';

export default function Home() {
  return (
    <div className="container">
      <ul className="list-group">
        <li className="list-group-item">An item</li>
        <li className="list-group-item">A second item</li>
        <li className="list-group-item">A third item</li>
        <li className="list-group-item">A fourth item</li>
        <li className="list-group-item">And a fifth one</li>
      </ul>
    </div>
  )
}

Make a note, I’m using className instead of class in the HTML code. We can’t use class as it is a JavaScript keyword and JSX is an extension of JavaScript.

You should be able to see bootstrap working when you load your Next.js app.

npm run dev

enter image description here