Recently, I decided to experiment with the latest Bootstrap version 5 beta after successfully implementing a hamburger menu in v4.6. However, upon testing v5, I encountered two immediate changes:
- The removal of jQuery
- Replacing ml-auto with ms-auto
Despite these changes, the functionality of the hamburger menu was altered in v5—it no longer opened or collapsed as expected. Could there be other changes between Bootstrap v4 and v5 that I overlooked? Is there perhaps an unknown Vanilla JS replacement for previously used jQuery that enables the hamburger functionality?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-dark navbar-expand-sm" style="background-color: #039;">
<a class="navbar-brand" href="#">
<img src="/img/test.png" class="d-inline-block align-middle" alt="image brand"> Image brand
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-sm-12"><hr style="margin-bottom:10px; margin-top:10px; " /></div>
</div>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">1st col</div>
<div class="col-sm-4" style="background-color:lavenderblush;">2nd col</div>
<div class="col-sm-4" style="background-color:lavender;">3rd col</div>
</div>
<div class="row">
<div class="col-sm-12 small"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>