DEV Community

Cover image for How to add vanilla bootstrap to nextjs
Ruchi Vora
Ruchi Vora

Posted on

2

How to add vanilla bootstrap to nextjs

I was recently setting up a project in nextjs , and had the same question How to add vanilla bootstrap to nextjs?. On searching above question on google , i got blogs and documentation on How to add react-bootstrap to nextjs?. Although adding vanilla bootstrap to the nextjs project is very easy , but its easy only when you know it . And being a newbie to nextjs i had to struggle a bit , so i thought of writing a blog and explain you the steps.

Step 1: Add bootstrap package in your project , using

npm install bootstrap@next
Enter fullscreen mode Exit fullscreen mode

Once , you install bootstrap , it would be seen in your package.json file under dependencies. And all the files related to bootstrap would be present in node_modules folder.

Step 2: As bootstrap is used by both components and pages , bootstrap should be added to pages/_app.js file

import 'bootstrap/dist/css/bootstrap.min.css';

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
Enter fullscreen mode Exit fullscreen mode

Once it is added to the pages/_app.js file , the bootstrap classes can be accessed from components and pages folder.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay