In this tutorial, we will see how to install & setup bootstrap 5 in next js 13.
Create Next 13 Project
Use create-next-app, which sets up everything automatically for you. To create a project, run.
npx create-next-app@latest
On installation, you'll see the following prompts:
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias? No / Yes
What import alias would you like configured? @/*
Install Bootstrap 5 in Next 13
Run below command to install bootstrap 5 in next 13.
npm install bootstrap@5.2.3
# or
yarn add bootstrap@5.2.3
Now add import styles bootstrap CSS file into Root Layout or main layout.
import 'bootstrap/dist/css/bootstrap.css'
layout.tsx
import './globals.css'
import 'bootstrap/dist/css/bootstrap.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Bootstrap 5 with Next js 13',
description: 'how to use bootstrap 5 in next js 13',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
}
Or you can @import 'bootstrap/dist/css/bootstrap.min.css'. in globals.css.
globals.css
@import 'bootstrap/dist/css/bootstrap.min.css';
layout.tsx
import './globals.css'
If you want use bootstrap 5 js file then you need to import js file and add some code.
layout.tsx
"use client"
import './globals.css'
import 'bootstrap/dist/css/bootstrap.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import { useEffect } from 'react'
import 'bootstrap/dist/js/bootstrap.min.js'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Bootstrap 5 with Next js 13',
description: 'how to use bootstrap 5 in next js 13',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
useEffect(() => {
if (typeof window !== "undefined") {
require('bootstrap/dist/js/bootstrap.js')
}
}, [])
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
}
Now test bootstrap 5 classes in next 13.
page.tsx
export default function Home() {
return (
<div className="container">
<h1 className="display-1">Bootstrap 5 with Next 13</h1>
<button className="btn btn-primary">Button</button>
</div>
)
}
add bootstrap 5 in next js 13
