I have created a simple web page which includes a header and a footer. I have created the header components with bootstrap, however the bootstrap is not working.
App.js:
import React from "react";
import Header from "./components/Header";
import Footer from "./components/Footer";
import { Container } from "react-bootstrap";
const App = () => {
return (
<>
<Header></Header>
<main>
<Container>
<h1>Welcome to my Website</h1>
</Container>
</main>
<Footer></Footer>
</>
);
};
export default App;Header.js:
import React from "react";
import { Navbar, Container, Nav } from 'react-bootstrap'
const Header = () => {
return (
<header>
<Navbar bg="light" variant="dark" expand="lg" collapseOnSelect>
<Container>
<Navbar.Brand href="">Turini</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="">Home</Nav.Link>
<Nav.Link href="">Link</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</header>
);
};
export default Header;package.json:
{
"name": "react-image-website",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.3",
"mdb-react-ui-kit": "^6.0.0",
"mdbreact": "^5.2.0",
"react": "^18.2.0",
"react-bootstrap": "^2.7.4",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}The header is displayed on the page as normal HTML and not with Bootstrap. Could someone help me why the bootstrap is not working?
