Sponsored

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.

Sponsored

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. 

Sponsored

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.

Sponsored

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
Sponsored

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.

Sponsored

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

Sponsored

Subscribe to our newsletter

Get up-to-date on latest articles on react.js, node.js, graphql, full-stack web development. No Spam. Helpful articles to improve your skills. Sent directly to your inbox.