Ultimate Guide on How to Add React-Bootstrap to NextJS

Hello, hustlers! in this tutorial you’ll learn how to add react-bootstrap to NextJS and start using its components. You’ll also learn how to apply themes like in regular bootstrap projects.

What is React Bootstrap?

React bootstrap, Similar to MaterialUI is a set of accessible components that are written using React. It completely replaces the original bootstrap JavaScript to use the components in a React Application easily.

Why not use the original Bootstrap for NextJS?

The original bootstrap has unnecessary dependencies like jQuery which just bloats the application. react-bootstrap does not have this dependency which results in a leaner, smaller package size.

Using React Bootstrap with NextJS

To use react-bootstrap with NextJS, first we install the react-bootstrap and bootstrap packages.

yarn add react-bootstrap bootstrap

We’ll only use the scss files from bootstrap for the styling.

Next, in styles/globals.css , let’s import bootstrap.min.css .

# styles/globals.css
@import "~bootstrap/dist/css/bootstrap.min.css";

Now, we can use the bootstrap components in our project.

// pages/index.tsx
import type { NextPage } from "next";
import { Button, Col, Container, Row } from "react-bootstrap";
const Home: NextPage = () => {
  return (
    <Container>
      <Row>
        <Col>
          <h1>React Bootstrap NextJS Tutorial</h1>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos
            aliquid quia optio odit nihil voluptatibus soluta labore earum
            nostrum doloremque. Sequi laboriosam dicta praesentium, sit
            aspernatur non molestiae voluptates beatae.
          </p>
          <Button>My Button</Button>
        </Col>
      </Row>
    </Container>
  );
};
export default Home;

And the result:

Customizing the Theme

To customize the theme for our app, we first have to install the sass package. NextJS already supports importing .scss files.

yarn add sass

Next, let’s rename styles/globals.css to styles/globals.scss . We can also customize the theme in this step using the bootstrap variables. Read more on how to customize bootstrap in the documentation . Also change the @import to use the scss file.

# styles/globals.scss
$primary: #b500d9;
$danger: #ff4136;
@import "~bootstrap/scss/bootstrap";

Next, let’s modify pages/_app.tsx and fix change the import to styles/globals.scss .

// pages/_app.tsx
import "../styles/globals.scss";
import type { AppProps } from "next/app";
function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}
export default MyApp;

This is the result of our customized bootstrap theme using scss:

That’s it for this mini tutorial.

The full code can be accessed at https://github.com/jmarioste/next-react-bootstrap-tutorial .

Conclusion

We learned how to add react-bootstrap to a NextJS project and change the theme.

If you like this tutorial, please leave a like or share this article. For future tutorials like this, please subscribe to our newsletter or follow me on Twitter .

Credits: Image by JLB1988 from Pixabay