We Keep Coding

Dropdown toggle not working in bootstrap 5

Its not working once I upgrade into Bootstrap 5.
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria- controls="navbarCollapse" aria-expanded="false" aria- label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Sample code: https://github.com/Devgroup-Asia/larablog/blob/main/resources/views/include/navbar.blade.php

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria- controls="navbarCollapse" aria-expanded="false" aria- label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
You may use this code. In bootstrap 5 data attribute works only if you use data-bs-{variable_name}.

Collapsed Navbar not working react and bootstrap 5

For some reason the collapsed navbar icon does not expand when clicked on on smaller screens. I copied the example from bootstrap 5 and made sure to include bootstrap css/js and jquery.
class NavBar extends Component {
render() {
return (
<div className="NavBar">
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="container-fluid">
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavAltMarkup">
<div className="navbar-nav mx-auto">
<HashLink className="navbar-brand" to="/#app">
Site
</HashLink>
<HashLink className="nav-link" to="/#about">
About
</HashLink>
<HashLink className="nav-link" to="/#skills">
Skills
</HashLink>
<HashLink className="nav-link" to="/#experience">
Experience
</HashLink>
<Link className="nav-link" to="/calculator">
Calculator
</Link>
</div>
</div>
</div>
</nav>
</div>
);
}
}

The problem is we didn't add the bootstrap js file
so, add this in App.js file
import 'bootstrap/dist/js/bootstrap.bundle';

I found an answer here that works via react hooks: https://dev.to/johnotu/how-to-toggle-bootstrap-navbar-collapse-button-in-react-without-jquery-joo
import React, { useState } from 'react';
import Logo from '../images/logo_512x512.png';
const TopNav = props => {
const [isNavCollapsed, setIsNavCollapsed] = useState(true);
const handleNavCollapse = () => setIsNavCollapsed(!isNavCollapsed);
return (
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
<a class="navbar-brand text-info font-weight-bolder" href="/">
<img src={Logo} alt="Logo" width="36" height="36" className="vertical-align-middle" />
<span className="">Discounter</span>
</a>
<button class="custom-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded={!isNavCollapsed ? true : false} aria-label="Toggle navigation" onClick={handleNavCollapse}>
<span class="navbar-toggler-icon"></span>
</button>
<div class={`${isNavCollapsed ? 'collapse' : ''} navbar-collapse`} id="navbarsExample09">
<a className="nav-link text-info" href="/contact">Support</a>
<a className="nav-link text-info" href="/login">Login</a>
<a href="/request-demo" className="btn btn-sm btn-info nav-link text-white" >Request demo</a>
</div>
</nav>
);
}
export default TopNav;

I was having the same issues, i fixed them by adding -bs to data-toggle & data-target. thus turning them to data-bs-toggle & data-bs-target respectively.
Here are my package.json dependencies:
"bootstrap": "^5.2.0",
"jquery": "^3.6.0",
"popper.js":
"^1.16.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
Example code:
Changed from
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
Changed to:
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

you must have to import this.
import 'bootstrap/dist/js/bootstrap.bundle';
<nav class="navbar navbar-expand-lg navbar-light bg-light">
Navbar
Home
Link
Dropdown
Action
Another action
Something else here
Disabled
Search

bootstrap 4 responsive navigation hamburger button not closing

so my hamburger button not closes after opening inside the page
here is my navigation code
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler navbar-toggle" type="button" data-toggle="collapse"
data- target="#navbarTogglerDemo03"
aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="/"rel=""title="brand logo">//some image</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav">
<li class="nav-item active p-2">
<a class="nav-link" href="/" rel="" title="Home">home</a>
</li>
</ul>
</div>
</nav>
i have nearly the same code in some other pages and it seems to be working just fine

I think you can use javascript to close this div for sudden time or when occurred any action.
$("#employeeRegister").hide();
$("#employeeRegister").show();
<button type="submit" class="btn btn-success btn-rounded waves-effect waves-light employeeRegister" id="employeeRegister">Save Changes</button>

navbar not working when updating bootstrap 4.0.0 alpha to newer version

I have a little project to try to learn some Angular and after a few months when I did not have time to work on it I got it back now.
First I wanted to update my version of bootstrap but I am getting some problems with the navigation bar.
My navbar:
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item" *ngFor="let menuItem of menuItems" routerLinkActive="active">
<a class="nav-item nav-link" [routerLink]="[menuItem.path]" routerLinkActive="active">{{menuItem.title}}</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<i class="fa fa-linkedin-square socialIcons" aria-hidden="true"></i>
<i class="fa fa-xing-square socialIcons" aria-hidden="true"></i>
<i class="fa fa-stack-overflow socialIcons" aria-hidden="true"></i>
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-default my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
And here my current working libraries:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
I am trying to update to the official ones provided here:
https://getbootstrap.com/docs/4.1/getting-started/download/
When I update the libraries my navbar does not work at all, it only shows a link on the right top corner with the title "navbar".
Any ideas?
Thanks!

simply change navbar-toggleable-md to navbar-expand-md and for add colors, change navbar-inverse bg-inverse to navbar-dark bg-dark.
your burger-menu is left side you can change into right side by add anchor tag before button
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Working Snippet
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item" *ngFor="let menuItem of menuItems" routerLinkActive="active">
<a class="nav-item nav-link" [routerLink]="[menuItem.path]" routerLinkActive="active">{{menuItem.title}}</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<i class="fa fa-linkedin-square socialIcons" aria-hidden="true"></i>
<i class="fa fa-xing-square socialIcons" aria-hidden="true"></i>
<i class="fa fa-stack-overflow socialIcons" aria-hidden="true"></i>
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-default my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

Yeah, I'm pretty sure that You should realy read this first.
Bootstrap 4, bg-inverse not showing?

Remove focus from Bootstrap nav

I have a bootstrap nav menu like this
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="Brand" src="img/pluck.png">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
</div><!--/.nav-collapse -->
</div>
</nav>
When I tap it, make no selection and tap it again it stays focused.
I would like the button to blur when the menu collapses. So I have tried
$('#navbar').on('hidden.bs.collapse', function () {
$('#navbar').blur();
})
I have also tried .navbar-toggle but the menu button still stays focused. How to make the menu button blur.

There seemed no way to do this (on mobile) so I just added and removed the background as required.
$('#navbar').on('hidden.bs.collapse', function () {
$('#navbar').blur();
$('.navbar-toggle').css("background-color","#f8f8f8");
})
$('#navbar').on('show.bs.collapse', function () {
$('#navbar').focus();
$('.navbar-toggle').css("background-color","#ccc");
})

You need to click somewhere else to remove it's focus, Try this...
$('#navbar').on('hidden.bs.collapse', function () {
$('body').click();
})