Nextjs
Published in

Nextjs

Next.js

How to add Bootstrap 5 in Next.js (13)

Learn Next.js, simply and easily #SeriesPart 4

How to add Bootstrap 5 CSS in Next.js

Create the next app

Firstly, create d new react app and use npm, yarn, and npx according to your choice.

If you have already begun a react app, then skip this part

npx create-next-app
# or
yarn create next-app

Let's start it:

Steps:

  1. The first method (Recommended)
  2. Second method

Demo:

The first method (Recommended)

The first method you install, bootstrap 5, uses npm, npx, and yarn in your next js.

Install Bootstrap 5:

npm install bootstrap
or
yarn add bootstrap

Import styles from node_modules:

After installation is complete, import the bootstrap CSS file into the next js custom pages/_app.js.

Note:
The custom app components are always rendered on every page. So that your bootstrap CSS file is available for every page.

// add bootstrap css 
import 'bootstrap/dist/css/bootstrap.css'
// own css files here
import "../css/customcss.css";
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}

After import, the bootstrap file now adds a bootstrap responsive meta tag in your custom app. add a meta tag in next.js. You import the Head component in nextjs. Paste the meta tag inside the head, opening, and closing.

import Head from "next/head";
import "../css/customcss.css";
function MyApp({ Component, pageProps }) {return (<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<Component {...pageProps} /></>
);
}
export default MyApp;

Second Method:

In the second method, you Add bootstrap five with the help of CDN. CDN is a content delivery network (CDN) that quickly provides all bootstrap code to other hosts and your web.

Copy bootstrap CDN file:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" /><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

Copy the Bootstrap CDN file on bootstrap official docs. In My case, I'm using bootstrap compiled CSS and JS Files for my project.

Paste CDN links in next.js custom pages/_app.js:

You copy the bootstrap CDN file and paste CDN links into the next js custom pages/_app.js app. In the Custom app, firstly, import the Head component in next.js. After the Head component, you paste CDN links inside the head component opening and closing tag.

The Head component is built by next js to append elements into the HTML head tag.

Conclusion

All three method work properly with nextjs 13. you can use according to your requirement.

Contact me

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/