I'm currently working on a nextjs demo project where I'm incorporating bootstrap for styling purposes. The initial setup was straightforward as I installed bootstrap using npm and included it in my app.js.
import 'bootstrap/dist/css/bootstrap.min.css'
The navbar creation went smoothly, but I encountered an issue when trying to implement the collapsible feature for smaller screens.
After some investigation, I found out that I needed both popperjs and jquery in a specific order as mentioned here. So, I added these imports to my app.js file:
import 'jquery/dist/jquery.min.js'
import '@popperjs/core/dist/umd/popper.min.js'
import 'bootstrap/dist/css/bootstrap.min.css'
Despite making these changes, the toggle functionality still didn't work correctly. There were no errors displayed in either the browser console or my development environment.
Here are some of the dependencies listed in my package.json:
"dependencies": {
"@popperjs/core": "^2.4.2",
"bootstrap": "^4.5.0",
"jquery": "^3.5.1",
"next": "9.4.4",
"react": "16.13.1",
"react-bootstrap": "^1.0.1",
"react-dom": "16.13.1"
}
I searched Stack Overflow for similar issues, but most solutions referred to older versions of Bootstrap with different class names for components.
Below is a snippet of the component I'm working on:
/**
* className to create the navbar using bootstrap, TODO, intial version
*/
export default class NavBar extends Component {
render() {
return (
<div id="rootdiv">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">
Hidden brand
</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Link
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">
Disabled
</a>
</li>
</ul>
</div>
</nav>
</div>
);
}
}