Setup and Customize Bootstrap in Next.js

Ravgeet Dhillon
Ravgeet Dhillon on Jul 01, 20213 min read
Written in
Blog banner for Setup and Customize Bootstrap in Next.js

A few months back, we wrote a blog on how to add and customize Bootstrap in Nuxt.js. Today, we will learn how to set up Bootstrap in a Next.js project. We will also install react-bootstrap to use Bootstrap based React components.

Contents

1. Installing Bootstrap

Let us get started by installing the required NPM packages. We will install bootstrap and optionally react-bootstrap.

Since we are going to create custom SCSS files, we also need to install node-sass.

npm install --save bootstrap react-bootstrap node-sass

2. Creating a Custom SCSS

Let us now create a custom scss file in the styles/scss directory, and name it global.scss. In this file, we need to import Bootstrap’s bootstrap.scss. For the sake of simplicity, let us override the default colour system provided by Bootstrap.

$theme-colors: (
  'primary': #145bea,
  'secondary': #833bec,
  'success': #1ce1ac,
  'info': #ff7d50,
  'warning': #ffbe0b,
  'danger': #ff007f,
  'light': #c0ccda,
  'dark': #001738,
);

@import '/node_modules/bootstrap/scss/bootstrap.scss';

3. Configuring Next Config

The best part about the newer versions of Next is that they provide built-in SASS/SCSS support. All we need to tell Next is where our styles are stored by configuring the next.config.js and adding the following piece of code:

const path = require('path')

module.exports = {
  
  ...

  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

4. Importing Bootstrap

The final step is to import our custom Bootstrap into our project. Based on where we need to use the custom styles, we can import our global.scss. In this example, let us configure it to be used by the entire project.

In pages/_app.js file, we need to add the following code:

import 'styles/scss/global.scss' // added

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

export default MyApp

We have done it. We have set up Bootstrap in our Next project.

Subscribe to RavSam Web Solutions newletter for information about Website development, mobile apps development and software development

Loved this post? Join our Newsletter 🚀

We write about Nuxt, Vue, Flutter, Strapi, Python and Automation. We don't spam.

Please add a valid email.
By clicking submit button, you agree to our privacy policy.
Thanks for subscribing to our newsletter.
There was some problem while registering your newsletter subscription. Please try again after some time or notify the owners at info@ravsam.in

ABOUT AUTHOR

Ravgeet Dhillon

Ravgeet is a Co-Founder, Freelancer and Developer at RavSam. He helps startups, businesses, open-source organizations with Digital Product Development. He is a fan of Jamstack and likes to work with Flutter, Strapi, Nuxt/Vue and Python. Connect with Ravgeet on Twitter and LinkedIn.

TAGGED IN

KEEP READING

Blog banner for How to add and customize Bootstrap in Nuxt.js

Add and customize Bootstrap in Nuxt.js

Written in Design
Blog banner for How to achieve a redesign of your website

How to achieve a redesign of your website?

Written in Design

Got a project or partnership in mind?

Let's Talk

Contact Us ->