Adding bootstrap to next.js

In this post I am going to show you two simple and fast method to use bootstrap framework in next.js.

What is bootstrap

Bootstrap is an open-source front-end framework used to create modern websites and web apps. It features numerous HTML and CSS templates for UI interface elements such as buttons and forms. Bootstrap also supports JavaScript extensions.

Methods of using bootstrap in Next.js or React.js

First method involves adding the bootstrap framework files via cdn in the "head" tag of your _app.js file. This will enable it to be available on all the diffrent pages on your site. The steps are show below

Step 1

Visit Official bootstrap docs and copy the cdn links for Css and Javascript.

Step 2

Import the head component in next js like so, then add the head component opening and closing tag in your jsx section.

import Head from "next/head";
import '../styles/globals.css'
import type { AppProps } from 'next/app'


function MyApp() {
  return( 
   <>
    <Head>
    
    </Head>

  <Component {...pageProps} />)
   </>
}

export default MyApp

Step 3

Next, paste the Css link in the head tag of _app.js code and paste the Javascript link(s) immediately after the closing head tag as shown below

import Head from "next/head";
import '../styles/globals.css'
import type { AppProps } from 'next/app'


function MyApp() {
  return( 
   <>
    <Head>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
       rel="stylesheet" integrity="sha384- 
         EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    </Head>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
     integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
     crossorigin="anonymous"></script>

  <Component {...pageProps} />)
   </>
}

export default MyApp

And that's it, all the bootstrap classes are now available on any page that you create in your next js application.

Second method

This involves installing bootstrap as an npm package inside your Next.js application. I recommend this method because it enables you to work locally without an internet connection.

Step 1

Install the bootstrap npm package using

npm install bootstrap
or
yarn add bootstrap

Step 2

Import the bootstrap Css file into your _apps.js as shown below this will enabe the bootstrap classes on all your pages.

import 'bootstrap/dist/css/bootstrap.css'
import '../styles/globals.css'


function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
export default MyApp

Note that the bootstrap css file is imported before the global styles. This will enable us to overide any of the bootstrap's default classes with our own.

Step 3

To enable bootstrap javascript on all our pages import useEffect hook from react and add bootstrap javascript using a useEffect hook within your _app.js default function as shown below.

import 'bootstrap/dist/css/bootstrap.css';
import '../styles/globals.css';
import { useEffect } from "react";


function MyApp({ Component, pageProps }) {
  useEffect(() => {
    import("bootstrap/dist/js/bootstrap");
  }, []);
  return <Component {...pageProps} />
}
export default MyApp;

This will load bootstraps javascript after your page has finished rendering.

Conclusion

Any of the above methods enables bootstrap in a next js application. The second method is recommended because of the ability to use it locally without a need for internet connection and also the fact that it does not increase the amount of external requests our page makes which makes it to load faster. As always thanks for reading, if you have any comments about the post then i'll love to hear your thoughts. leave a comment down below.