I am making a react app and have installed the latest bootstrap via
npm install bootstrap
and
npm install bootstrap jquery
and
npm install jquery popper.js
My Navbar works fine when the window is wide, but when you decrease the width and the Navbar becomes a dropdown navbar, it does not work properly. As you click to expand, it starts to expand, but then gets cut off, making it seem like it stops or goes off the page. I can only see the last item.
In my src/index.js I have and
import 'jquery';
import 'popper.js';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
My Navbar code is simple stuff
<nav className="navbar navbar-expand-lg">
<div className="container-fluid">
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i className="fas fa-bars"></i>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<Links />
</div>
</div>
</nav>
I have tried removing and removing different classes, it seems to be the button toggle action that is where the trouble is rooted.
UPDATE: Link to video to visualize the issue: videoLink
UPDATE: Here is the full code:
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="stylesheet" href="fontawesome/css/all.min.css">
<title>test Site</title>
<style>
#body_id {
background-image: url(../../assets/myImg/baking_background.jpg);
background-attachment: fixed;
background-size: cover;
position: relative;
}
</style>
</head>
<body id="body_id">
<div id="root">
</body>
</html>
src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'
import 'jquery';
import 'popper.js';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
ReactDOM.render(<App />, document.getElementById('root'))
app/index.js
function App() {
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<a className="navbar-brand" href="/">Navbar</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
)
}
export default App
I also tried putting the bootstrap in the index.html like this:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<meta name="theme-color" content="#000000" />
<link rel="stylesheet" href="fontawesome/css/all.min.css">
<title>test Site</title>
</head>
<body id="body_id">
<div id="root">
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'
//import 'jquery';
//import 'popper.js';
//import 'bootstrap/dist/css/bootstrap.css';
//import 'bootstrap/dist/js/bootstrap.bundle.min';
ReactDOM.render(<App />, document.getElementById('root'))
I made it work with these updates:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Site</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#000000" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="fontawesome/css/all.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body id="body_id">
<div id="root"></div>
</body>
</html>
src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'
ReactDOM.render(<App />, document.getElementById('root'))
app/index.js
import React from 'react'
function App() {
return (
<nav className="navbar navbar-inverse navbar-dark bg-dark">
<div className="container-fluid">
<div className="navbar-header">
<a className="navbar-brand" href="/">Home</a>
<button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
</div>
<div className="collapse navbar-collapse" id="myNavbar">
<ul className="nav navbar-nav">
<li>Create</li>
<li> Login</li>
</ul>
</div>
</div>
</nav>
)
}
export default App