Having trouble implementing a side navigation bar with collapse functionality. I've included jquery 3.4.1 and CSS, but adding Bootstrap 4 css and Bootstrap js causes the page to turn into a white screen with no errors in the console. After removing Bootstrap, everything works fine, but Bootstrap is essential for my project. Below are the JS, CSS, and JSP code snippets for reference. Any help would be greatly appreciated.
$(document).ready(function(){
$(".hamburger").click(function(){
$(".wrapper").toggleClass("collapse");
});
});@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap');
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body{
background: #e1ecf2;
}
<!-- More CSS code here -->
</code></pre>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<!-- Head section here -->
</head>
<body>
<!-- Main HTML structure here -->
</body>
</html>The issue arises when adding the following line:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
I have tested without the bootstrap CSS and it works fine, but the bootstrap CSS is necessary for the project.