CODEWITHSUNDEEP
layoutcomponentsbootstrap-5next.js13
cedric godard
cedric godard

Reputation: 54

Nextjs 13 app routeur with bootstrap 5.3.1 and vertical navbar

Hi i have a issue with nextjs 13 and bootstrap 5.3.1 and my vertical navbar I use bootstrap.css and bootstrap bundle.js

All my html tags are good when I test the document with a horizontal navbar this does not create any problem because I use a components on my home page with a horizontal navbar which I have loaded in my tag and that works on the other hand when I put my components in vertical navbar I no longer have height in header and body the px stay at 0 and this is not normal behavior since I use bootstrap.

However, I double-checked my tags and everything is nested well.

I tried to load bootsrap with cdn then with npm files and still this same problem

I tried to find someone with the same issue but nothing.

here is my code:

rootLAyout in folder src/app

import 'bootswatch/dist/superhero/bootstrap.min.css';
import dynamic from 'next/dynamic';


const DynamicBootstrap = dynamic(
    () => require('bootstrap/dist/js/bootstrap.bundle.min.js'),
    { ssr: false }
  );
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
    return (
        <html lang="en">

            <body>
                
                {children}
            </body>
        </html>
    )
}

now my folder dashboard/pages.tsx



import Header from "../components/Header";


export default async function Dashboard() {

  return (
    <>
      <Header/>
      <main>
        <h1>Dashboard</h1>
      </main>
    </>
  )
}

And now my header components with the vertical navbar maybe i am blind but i really dont find the issue folder components/Header.tsx

import Link from 'next/link';
import logo from '../../../../public/images/logoDbq.png';
import Image from 'next/image';



export default function Header() {

    return(
        <header>
            <nav className="navbar navbar-dark bg-dark fixed-top">
                <div className="container-fluid">
                    <Link className="navbar-brand" href="#"><Image src={logo} width={50} height={50} alt=""/>Welcome</Link>
                    <button className="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="offcanvas offcanvas-end" tabIndex={-1} id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
                        <div className="offcanvas-header">
                            <h5 className="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
                            <button type="button" className="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                        </div>
                        <div className="offcanvas-body">
                            <ul className="navbar-nav justify-content-end flex-grow-1 pe-3">
                                <li className="nav-item">
                                    <Link className="nav-link active" aria-current="page" href="#">Home</Link>
                                </li>
                                <li className="nav-item">
                                    <Link className="nav-link" href="#">Link</Link>
                                </li>
                                <li className="nav-item dropdown">
                                    <Link className="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    Dropdown
                                    </Link>
                                    <ul className="dropdown-menu">
                                        <li><Link className="dropdown-item" href="#">Action</Link></li>
                                        <li><Link className="dropdown-item" href="#">Another action</Link></li>
                                        <li>
                                            <hr className="dropdown-divider"/>
                                        </li>
                                        <li><Link className="dropdown-item" href="#">Something else here</Link></li>
                                    </ul>
                                </li>
                            </ul>
                            <form className="d-flex mt-3" role="search">
                                <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
                                <button className="btn btn-outline-success" type="submit">Search</button>
                            </form>
                        </div>
                    </div>
                </div>
            </nav>
        </header>
    )
}

In the wait of a good answer i wish you a good day. Thank s a lot by advance for any help

Upvotes: 0

Views: 302

Answers (1)

cedric godard
cedric godard

Reputation: 54

delete the fixed-top of the vertical navbar of bootstrap of 5.3 on nextjs and then it work

Upvotes: 0

Related Questions