#How do I use bootstrap with nextjs v14

1 messages · Page 1 of 1 (latest)

bold orbitBOT
#

Hi @twilit ore. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

twilit ore
#

ty bot

bold orbitBOT
#

To use Bootstrap with Next.js version 14, you can import the Bootstrap CSS file in your application. Since Next.js 9.5.4, importing a CSS file from node_modules is allowed anywhere in your application. For global stylesheets like Bootstrap, you should import the file inside pages/_app.js.

Here is an example of how to do it:

import 'bootstrap/dist/css/bootstrap.css'
 
export default function MyApp({ Component, pageProps }) {
 return <Component {...pageProps} />
}

This code imports the Bootstrap CSS file and applies it globally to your Next.js application.

Please note that you need to install Bootstrap in your project before you can import it. You can do this by running the following command in your terminal:

npm i bootstrap

Or if you are using yarn:

yarn add bootstrap

Or if you are using pnpm:

pnpm add bootstrap

Or if you are using bun:

bun add bootstrap

After running this command, the Bootstrap package will be added to your node_modules directory, and you can import it as shown in the example above.

Source: Next.js Documentation (https://nextjs.org/docs/pages/building-your-application/styling/css-modules)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@twilit ore kapa.ai is still learning and improving, please let us know how it did by reacting below

twilit ore
#

Here is my _app.tsx

#

<@&1089670008898080870> here is my _app.tsx:

import type { AppProps } from 'next/app'
import 'bootstrap/dist/css/bootstrap.css'
import Head from 'next/head'
import Link from 'next/link'
import { useEffect } from 'react'

const App = ({ Component, pageProps }: AppProps) => {
useEffect(() => {
require('bootstrap/dist/js/bootstrap.bundle.min.js');

}, [])
return (
<>
<Head>
<Link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<Component {...pageProps} />
</>
)
}
export default App

#

@bold orbit

bold orbitBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Sorry @twilit ore, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

twilit ore
#

,close