How to use Bootstrap with NextJS?

Last Updated : 30 Jul, 2024

Next.js is an open-source web development framework based on React and has gained significant popularity due to its amazing features. It is developed by Vercel and Next.js stands out for its robust capabilities, including server-side rendering(SSR) and enhanced search engine optimization (SEO). Next.js provides built-in routing, making it simple to create dynamic routes and handle navigation within your application.

In this article, we will learn how to use Bootstrap 5 with Nextjs. Bootstrap 5 is a powerful free framework that helps developers like you build modern webpages faster and easier. It provides pre-built components and styles for things like buttons, navigation bars, and forms.

Steps to use Bootstrap 5 with Next JS

Step 1: Create a Next Js App

You can create a new Next application using the command below.

npx create-next-app app-name
or
yarn create next-app app-name 
or 
pnpm create next-app app-name

Step 2 : Install Bootstrap

Once your next project is created, open the project’s root directory and install the bootstrap dependencies with the following command.

npm install bootstrap

Step 3 : Import the Bootstrap module in the project

Add the below code to the layout.js to add the styling to project

import  "bootstrap/dist/css/bootstrap.min.css"

Project Structure:

Updated Dependencies:

 "dependencies": {
    "bootstrap": "^5.3.3",
    "next": "14.2.3",
    "react": "^18",
    "react-dom": "^18"
  }

Example: The App contains the Navbar .heading along with some buttons styled using Bootstrap 5

JavaScript

//page.js

export default function Home() {
  return (
    <div>
      {/* navbar */}
      <nav className="navbar navbar-expand-lg bg-body-tertiary">
        <div className="container-fluid">
          <a className="navbar-brand" href="#">
            Navbar
          </a>
          <button
            className="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
              <li className="nav-item">
                <a className="nav-link active" aria-current="page" href="#">
                  Home
                </a>
              </li>
              <li className="nav-item">
                <a className="nav-link active" aria-current="page" href="#">
                  Contact-us
                </a>
              </li>
              <li className="nav-item">
                <a className="nav-link active" aria-current="page" href="#">
                  About Us
                </a>
              </li>
              <li className="nav-item">
                <a className="nav-link" href="#">
                  Link
                </a>
              </li>
            </ul>
            <form className="d-flex" role="search">
              <input
                className="form-control me-2"
                type="search"
                placeholder="Search"
                aria-label="Search"
              />
              <button className="btn btn-outline-success" type="submit">
                Search
              </button>
            </form>
          </div>
        </div>
      </nav>
      <h2 className="text-center text-bg-primary m-2 p-2">
        Bootstrap 5 with Next.js
      </h2>
      <div className="container-fluid m-2 border border-success text-center">
        <h4>Components</h4>{" "}
        <div className="row m-2 ">
          <div className="col-sm">First Component</div>
          <div className="col-sm">Second Component</div>
          <div className="col-sm">Third Component</div>
        </div>
      </div>
      <div className="container-fluid m-2 border text-center">
        <h4>Buttons</h4>
        <div className="row m-2 justify-content-between ">
          <div className="col-sm-auto">
            <button type="button" className="btn btn-primary">
              Primary
            </button>
          </div>
          <div className="col-sm-auto">
            <button type="button" className="btn btn-secondary">
              Secondary
            </button>
          </div>
          <div className="col-sm-auto">
            <button type="button" className="btn btn-success">
              Success
            </button>
          </div>
          <div className="col-sm-auto">
            <button type="button" className="btn btn-danger">
              Danger
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

JavaScript

//layout.js
import  "bootstrap/dist/css/bootstrap.min.css"
import AddBootstrap from "./AddBootstrap";

export const metadata = {
  title: "NextJs and Bootstrap 5",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body >
        <AddBootstrap/>
        {children}</body>
    </html>
  );
}

JavaScript

//  AddBootstrap.js


"use client";

import { useEffect } from "react";

export default function AddBootstrap()
{
    useEffect(()=>{
        import( "bootstrap/dist/js/bootstrap.bundle.js")
    },[])
    return <></>
}