Bootstrap Navbar not collapsed (mobile)

Question

In the mobile Version the navbar is not collapsing... Can somebody help? I copy the source from bootstrap but it didn't work. Do I forget something? In the index.html, I have input the css and js file. I dont also receive any errors.

import React from 'react'
import Logo from "../img/logo_large.png"
// React Font awesome imports
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars } from "@fortawesome/free-solid-svg-icons"
//React-scroll install

//Navbar
const Navbar = () => {
    return (
        <nav className="navbar navbar-expand-lg navbar-light bg-dark fixed-top">
            <div className="container">
                {/*Logo variable von oben*/}
                <a className="navbar-brand" href="#home"><img className="Logo" src={Logo} /> </a>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <FontAwesomeIcon icon={faBars} style={{ color: "#fff" }} />
                </button>

                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav ml-auto">
                        <li className="nav-item active">
                            <a className="nav-link" href="#about" >About Me<span className="sr-only">(current)</span></a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" href="#services">Services</a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" href="#experiences">Experiences</a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" href="#abilities">Abilities</a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" href="#blog">Blog</a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" href="#freetime">Freetime</a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav >
    )
}

export default Navbar

Answer 1

In fact you have copied the elements, which seems to be a react code, not pure html. The bootstrap slogan is "mobiles first", so they are ready to small screens out of the box, you don't need at first time create a different code for that.

In order to make bootstrap work properly, you have to add the pure html bootstrap elements and bootstrap resources: js and css files at least.

Your start point can be this: https://getbootstrap.com/docs/5.0/getting-started/introduction/#starter-template where you have already a "Starter template" with those dependencies done.

After that, you can go to https://getbootstrap.com/docs/5.0/components/navbar/ and copy the html code and experiment if it works.

Answer 2

Make sure that you've included the appropriate bootstrap CSS and JS CDN in your link and script. It seems to me that you're using bootstrap yet you did not include it in your tags.