ReactHustle

Ultimate Guide on How to Add React-Bootstrap to NextJS

Jasser Mark Arioste

Jasser Mark Arioste

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
1

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";
12

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;
12345678910111213141516171819202122

And the result:

React Bootstrap Index Page

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
1

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";
1234

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;
1234567

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

Bootstrap with Customized theme.

That's it for this mini 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

Share this post!

Related Posts

Disclaimer

This content may contain links to products, software and services. Please assume all such links are affiliate links which may result in my earning commissions and fees.
As an Amazon Associate, I earn from qualifying purchases. This means that whenever you buy a product on Amazon from a link on our site, we receive a small percentage of its price at no extra cost to you. This helps us continue to provide valuable content and reviews to you. Thank you for your support!
Donate to ReactHustle