Bootstrap 5 + React project setup and customisation

With the recent release of 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:

$ npm init -y

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

Next, install our packages:

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

This will install:

• bootstrap@next -- Bootstrap 5 Beta
• react -- React
• react-dom -- React DOM
• next -- NextJS
• sass -- SASS/SCSS preprocessor

We also need to set up our scripts in package.json as follows:

{
  // ...
  "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:

$ mkdir scss
$ touch scss/main.scss

And add the following content to scss/main.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:

$ 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:

const IndexPage = () => {
  return "Hello world!";
};

export default IndexPage;

And in your pages/_app.js file, add the following:

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!".

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:

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:

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

// 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:

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

Now get out there and make something beautiful!

Comments

[Ted Larsson]

Nice and quick setup!
I now have my page up and running but i cant get the collapse function to work, is there something more i need to do to get that working?

[Ruben Santana]

Hello Ted. You can use something like this to collapse the NavBar.

import React, { useState } from 'react';

const TopNav = () => {
  const [isNavCollapsed, setIsNavCollapsed] = useState(true);

  const handleNavCollapse = () => setIsNavCollapsed(!isNavCollapsed);

  return (
    <>
      <div id="navSpace"></div>
      <nav id="navPrincipal" className="navbar navbar-expand-lg navbar-light bg-light">
        <div className="container-fluid">
          <a className="navbar-brand" href="/">
            <img
              src="img/logo.png"
              alt="Logo"
              id="navbar-logo"
              className="vertical-align-middle"
            />
          </a>
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarPrincipal"
            aria-controls="navbarPrincipal"
            aria-expanded={!isNavCollapsed ? true : false}
            aria-label="Toggle navigation"
            onClick={handleNavCollapse}
          >
            <span className="navbar-toggler-icon"></span>
          </button>

          <div
            className={`${isNavCollapsed ? 'collapse' : ''} navbar-collapse`}
            id="navbarPrincipal"
          >
            <a className="nav-link text-dark" href="/uno">
              Uno
            </a>
            <a className="nav-link text-dark" href="/dos">
              Dos
            </a>
          </div>
        </div>
      </nav>
    </>
  );
};

export default TopNav;

Credit to dev.to/johnotu/how-to-toggle-boots...

[Dan Walsh]

Awesome—nice work! 🥳

Yep, you'll need to include Bootstrap's JavaScript dependencies. There are a couple of different ways to do this—I ended up including them in my <head/> tag using the next/head component:

import Head from "next/head";

const Layout = ({ children }) => {
  return (
    <>
      <Head>
        <script
          src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
          crossorigin="anonymous"
        ></script>
      </Head>
      <div className="container">
        <div className="row">
          <div className="col">{children}</div>
        </div>
      </div>
    </>
  );
};

This was my "quick fix" way of getting things like collapse and dropdowns up and running, however I'd recommend looking into properly importing Bootstrap into your project as a module, if you're building something for production.

[sinamoradi1375]

Hi there, have you found an easier and reliable way to import the JS into the app? I searched through the web and bootstrap docs for configuring the webpck was complicated for a guy that never worked with webpack.
Any help would be appreciated

[Luis Pinheiro]

Its easier than I thought, thanks

[Dan Walsh]

No worries, my pleasure :)

[Ahsan]

How can I use Popovers and Tooltips which require some additional setup?