Ultimate Guide on How to Add React-Bootstrap to NextJS
Jasser Mark Arioste
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 bootstrap1
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:
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 sass1
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:
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
