DEV Community

Discussion on: Bootstrap 5 + React project setup and customisation

View post
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