|
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 JSStep 1: Create a Next Js AppYou 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 BootstrapOnce 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:  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>
);
}
//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>
);
}
// AddBootstrap.js
"use client";
import { useEffect } from "react";
export default function AddBootstrap()
{
useEffect(()=>{
import( "bootstrap/dist/js/bootstrap.bundle.js")
},[])
return <></>
}
Explanantion
- Paje.js contains the navbar ,header , components and buttons which are styled using the bootstrap classes.
- In layout.js we have imported the ” Bootstrap module” which is used to add style to the children elements ,which add styles to whole project.
- In AddBootstrap.js we have used useEffect hook to add the functionality to toggle the navbar using the ” bootstrap/dist/js/bootstrap.bundle.js”
Output:
 Bootstrap 5 with Next Js
|
.png){kind=small}
