Bootstrap 5 + React project setup and customisation
Tags: react, javascript, npm, webdev
Published: 2020-12-14 07:28:34

With the [recent release of Bootstrap 5 Beta 1](https://blog.getbootstrap.com/2020/12/07/bootstrap-5-beta-1/), now is a great time to dip your toes into working with the new major updates and getting your tools ready for when the final release drops.


## Setting up your project 🗂

### 1. Set up your environment 🌳

Initialise a new npm package in your directory:

```bash
$ npm init -y
```

The `-y` parameter tells npm to accept the default answers for all options.

Next, install our packages:

```bash
$ npm i bootstrap@next react react-dom next sass
```

This will install:
* [bootstrap@next](https://www.npmjs.com/package/bootstrap) -- Bootstrap 5 Beta
* [react](https://www.npmjs.com/package/react) -- React
* [react-dom](https://www.npmjs.com/package/react-dom) -- React DOM
* [next](https://www.npmjs.com/package/next) -- NextJS
* [sass](https://www.npmjs.com/package/sass) -- SASS/SCSS preprocessor

We also need to set up our scripts in `package.json` as follows:
```json
{
  // ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  //...
}
```

### 2. Add your SCSS file 👨‍🎨

Next we need to add our SCSS folder and file:
```bash
$ mkdir scss
$ touch scss/main.scss
```

And add the following content to `scss/main.scss`:
```scss
// Import Bootstrap 5 Beta!
@import "~bootstrap/scss/bootstrap.scss";
```

### 3. Set up your pages 📄

We need to set up our usual index page, but also a custom App component that lives within the `/pages` directory. This is  so we can ensure that Bootstrap 5 Beta is loaded across the entire NextJs app.

Create your pages folder, the index page and custom App component:

```bash
$ mkdir pages # Your pages folder
$ touch pages/index.js # The index page
$ touch pages/_app.js # The custom App component
```

In the `pages/index.js` file, add the following:
```javascript
const IndexPage = () => {
  return "Hello world!";
};

export default IndexPage;
```

And in your `pages/_app.js` file, add the following:
```javascript
import "../scss/main.scss";

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

export default MyApp;
```

At this point you can run `npm run dev` in your terminal and browse to http://localhost:3000/ in your web browser and you'll be greeted with the universal dev message "Hello world!".

![Screen Shot 2020-12-14 at 5.07.25 pm](https://dev-to-uploads.s3.amazonaws.com/i/d0nknn1l2aw7nt385ltb.png)

Now for the fun part...

---

## Customising Bootstrap 🎨

So we've got our project up and running, our dependencies are all installed and ready roll, and Bootstrap is being imported into our main SCSS file.

Let's add some structure and a little content to our index page:

```javascript
const IndexPage = () => {
  return (
    <div className="container">
      <div className="row">
        <div className="col">
          <h1 className="mt-4">Hello world!</h1>
          <p>This is Bootstrap 5 Beta + NextJS</p>
          <button className="btn btn-primary me-2">Read the docs!</button>
          <button className="btn btn-outline-secondary">
            or just get started
          </button>
        </div>
      </div>
    </div>
  );
};

export default IndexPage;
```

This will render our new content within Bootstrap's fully-responsive mobile-first grid system:

![Screen Shot 2020-12-14 at 5.14.57 pm](https://dev-to-uploads.s3.amazonaws.com/i/6kkz6a0s5pqshvq5vsp3.png)

We can then override Bootstrap's SCSS variables to build our our theme:

```scss
// Change the primary colour
$primary: rgb(207, 44, 4);

// Set the sans-serif font
$font-family-sans-serif: Arial, sans-serif;

// Maybe set a difference heading font family
$headings-font-family: Georgia, serif;

// Make headings bolder!
$headings-font-weight: 700;

// Thicken up our borders
$border-width: 3px;

// Remove the border-radius everywhere
$border-radius: 0;

// Import Bootstrap 5 Beta!
@import "~bootstrap/scss/bootstrap.scss";
```

Which should give you something like this:

![Screen Shot 2020-12-14 at 5.45.18 pm](https://dev-to-uploads.s3.amazonaws.com/i/z15st6csc2f791sjw19y.png)

That should be enough to get your next Bootstrap 5 + NextJS web app kick started.

**Now get out there and make something beautiful!**