How to Use Bootstrap 5 in Next.js

In this article, you will learn how to use Bootstrap 5 in Next.js (Page Directory Example). Bootstrap is a powerful front-end framework that provides a plethora of pre-built components and styles, making it an excellent choice for enhancing the look and feel of your Next.js applications.

1. Setting Up Your Next.js Project

First, let’s create a new Next.js project and set up Bootstrap 5:

1. Open your terminal and navigate to the directory where you want your Next.js project to reside.
2. Run the following command to create a new Next.js app (you can choose any name you like):

   npx create-next-app my-next-bootstrap-app
   

3. Change into the project root folder:

   cd my-next-bootstrap-app
   

4. Install Bootstrap 5 using npm or yarn:

   npm install bootstrap@next
   # or
   yarn add bootstrap@next
   

2. Importing Bootstrap CSS

Next, we need to import Bootstrap’s CSS file into our app. Open the pages/_app.js file (create one if it doesn’t exist) and add the following line at the top:

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

Now your Next.js app is ready to use Bootstrap components!

3. Using Bootstrap Components

Let’s modify our pages/index.js to demonstrate how to use Bootstrap components. For example, we’ll add a primary button, a ghost button, and a date picker:

// pages/index.js
import React from 'react';
import { Button } from 'reactstrap'; // Import Bootstrap components

export default function Home() {
  const onChange = () => {
    // Handle date picker changes
  };

  return (
    <div style={{ padding: 100 }}>
      <Button type="primary">Primary Button</Button>
      {/* Add other components here */}
    </div>
  );
}

Remember to replace the comments with the actual components you want to use. You can explore Bootstrap’s documentation to find more components and customize them according to your needs.

4. Adding Bootstrap JavaScript (Optional)

Bootstrap uses some client-side JavaScript features (e.g., dropdowns, carousels). To make these components work, manually import Bootstrap’s JavaScript file. In your pages/_app.js, use the useEffect hook to load the JavaScript:

// pages/_app.js
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;

Now your Bootstrap components that rely on JavaScript (like dropdown menus) will function correctly.

5. Alternatives: reactstrap and react-bootstrap

If you prefer using Bootstrap components as JSX without direct DOM manipulation, consider using libraries like reactstrap or react-bootstrap. These libraries provide Bootstrap components redesigned as React components:

// Example using reactstrap
import React from 'react';
import { Button, Dropdown } from 'reactstrap';

// Use Bootstrap components here

Remember to install these libraries using npm or yarn.

And that’s it! You’re all set to create beautiful, responsive UIs in your Next.js app using Bootstrap 5. Happy coding!