DEV Community

Cover image for Bootstrap 5 + React project setup and customisation
Dan Walsh
Dan Walsh

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

This will install:

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

{
  // ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  //...
}
Enter fullscreen mode Exit fullscreen mode

2. Add your SCSS file 👨‍🎨

Next we need to add our SCSS folder and file:

$ mkdir scss
$ touch scss/main.scss
Enter fullscreen mode Exit fullscreen mode

And add the following content to scss/main.scss:

// Import Bootstrap 5 Beta!
@import "~bootstrap/scss/bootstrap.scss";
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

In the pages/index.js file, add the following:

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

export default IndexPage;
Enter fullscreen mode Exit fullscreen mode

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

import "../scss/main.scss";

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

export default MyApp;
Enter fullscreen mode Exit fullscreen mode

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

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;
Enter fullscreen mode Exit fullscreen mode

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

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";
Enter fullscreen mode Exit fullscreen mode

Which should give you something like this:

Screen Shot 2020-12-14 at 5.45.18 pm

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

Now get out there and make something beautiful!

Latest comments (7)

Collapse
 
ahsansabir_ profile image
Ahsan

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

Collapse
 
luispinheiro profile image
Luis Pinheiro

Its easier than I thought, thanks

Collapse
 
danwalsh profile image
Dan Walsh

No worries, my pleasure :)

Collapse
 
larssonted profile image
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?

Collapse
 
ruben profile image
Ruben Santana • Edited

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;

Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
danwalsh profile image
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>
    </>
  );
};
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
 
sinamoradi1375 profile image
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