I've got problem with navbar dropdown. It show up properly but when I try to expand category doesn't happen anything. Also copied templary straight from Bootstrap's documentation. Doesn't seem like I can figure it out what is wrong by myself.
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>Bootstrap beginning</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/src/css/bootstrap.css">
<link rel="stylesheet" href="/src/css/styles.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Company</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>
And here is my directory: Directory
As you can see in your console, the requiered js could not be loaded.
So check your paths for the files that you can see in the console with an error of 404. Your .css files are getting loaded from /src/css/ but your js files from /js/ it should be src/js. You may want to check that... . I´m affraid no one can help you find your files on your webserver!
Related
I would like to publish a website. The problem is that it works perfectly on local but when I create a GitHub repository and try to see the page the bootstrap interactivity doesn't work (navbar dropdown). The funny thing is that my javascript actually works! I can share some screenshots... What am I missing? Thank you in advance. [P.S: I used git to push the project on github]
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width", initial-scale="1", shrink-to-fit="no">
<meta http-equiv="x-ua-compatible" content="ie-edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="icon" type="image/png" href="assets/img/bulldozer-icon.png">
<script src="js/javascript.js"></script>
<link rel="stylesheet" href="css/styles.css">
<title>New Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light col-12 col-md-12" id="navbar">
<div class="container">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto mr-auto">
<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="#files">Files</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contacts</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="https://github.com/Zipep" target="_blank"><i class="fa-brands fa-github"></i> Github</a>
<a class="dropdown-item" href="https://www.linkedin.com/in/giuseppe-andrea-savino-0266a31b4/?locale=en_US" target="_blank"><i class="fa-brands fa-linkedin"></i> Linkedin</a>
<a class="dropdown-item" href="mailto:giuseppeasav#outlook.it"><i class="fa-solid fa-envelope-open"></i> Email</a>
<a class="dropdown-item" href="https://twitter.com/" target="_blank"><i class="fa-brands fa-twitter"></i> Twitter</a>
</div>
</li>
<li class="nav-item">
<label class="switch">
<input type="checkbox" checked aria-label="true">
<span class="slider round" id="button" onclick="myFunction()"></span>
</label>
<i class="fa-solid fa-wand-magic-sparkles"></i><span id="nox-lumos"> Nox!</span>
</li>
</ul>
</div>
</div>
</nav>
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/popper.js/dist/popper.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
This question already has answers here:
Bootstrap navbar: nothing is displayed on smaller devices
(1 answer)
bootstrap 4 nav doesn't display hamburger on resize
(2 answers)
Closed 1 year ago.
I have html code, when I resize the browser screen I have a problem that the toggle button is not displayed (it is transparent) when I click on it the navigation bar items are not showing at allScreenshot of my web
<html>
<head>
<title>
profile
</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="../css/bootstrap/bootstrap.css">
<!-- w3 CSS-->
<link rel="stylesheet" href="../css/W3.css">
<!-- profile CSS-->
<link rel="stylesheet" href="../css/accueil.css">
<!-- flaticon CSS-->
<link rel="stylesheet" href="../icons/font/flaticon.css">
<!--Scripts-->
<!-- JQuery script-->
<script src="../js/jQuery.js"></script>
<!-- Bootstrap script-->
<script src="../js/bootstrap/bootstrap.bundle.min.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="accueil.html">
<h4>LOGO</h4>
</a>
<!--Collapse button -->
<button type="button" class="navbar-toggler"
data-bs-toggle="collapse" data-bs-target="#coll_target"
aria-controls="coll_target" aria-expanded="false"
aria-label="Toggle Navbar" >
<span class="navbar-toggler-icon" ></span>
</button>
<!--Collapse Div -->
<div class="collapse navbar-collapse" id="coll_target">
<div class="mx-auto"></div>
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link"><span><i class="flaticon-ringing" style="color: white;"></i></span></a></li>
<li class="nav-item"><a class="nav-link"><span><i class="flaticon-email" style="color: white;"></i></span></a></li>
<li class="nav-item"><a class="nav-link"><span><i style="color: white;" class="flaticon-down-arrow"></i></span></a></li>
<li class="nav-item"><a class="nav-link"><span><i style="color: white;" class="flaticon-translation"></i></span></a></li>
<li class="nav-item"><a class="nav-link"><span><i class="flaticon-settings" style="color: white;"></i></span></a></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
You should read the documentation here https://getbootstrap.com/docs/5.0/getting-started/introduction/
I assume you have basic knowledge in CSS and HTML , In order to use Bootstrap, you first need to integrate it into your development environment correctly, Either by loading it remotely or by download and use it locally;
Long story short your pages should look like this:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<!---include navbar components to demonstrate what you need----->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<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>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
Bootstrap has a lot of responsive classes that suit your need
The dropdown menu inside navbar is not opening on click.
Here's HTML part:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="icon" href="brand logo.png" type="image/gif">
<title>Special Education Notes</title>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="#homeImage"><img src="brand logo.png" alt="logo" style="width: 70px;"></a>
<button class="navbar-toggler" type="button" id="menu-button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" style="font-size: 20px;" href="#about">About Us<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" style="font-size: 20px;" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Notes
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" style="font-size: 20px;" href="bedspl.php">B.Ed Special Education</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" style="font-size: 20px;" href="dedspl.php">D.Ed. Special Education</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" style="font-size: 20px;" href="#contact-us" aria-disabled="true">Contact Us</a>
</li>
<li class="nav-item active">
<a class="nav-link" style="font-size: 20px;" href="#" aria-disabled="true">Upload</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><span class="nav-link"><i class="fab fa-facebook-square"></i></span></li>
</ul>
</div>
</nav>
</body>
</html>
And here's the javascript code:
$('.navbar-collapse a').click(function() {
});
$('.navbar-collapse a').click(function() {
});
JSFiddle link: https://jsfiddle.net/n2jq7uLx/
I want my navbar to close after selecting the link but it seems to not working on the dropdown menu inside the navbar.
Thanks in advance.
The dropdown menu guard is realized as a html anchor element (a). IN the intializer code, the same handler is attached as is for the leaf anchors that implement actual navigation.
Solution:
Do not attach the handler to this element.
Coding:
The linked fiddle has several problems:
It does not include jQuery, while jQuery is used
The handlers use the .collapse method that is not defined.
The use of .hide (which was probably intended) does not work here because the .navbar-collapse element whose css is to be modified has the display property value marked with !important in its css overriding the settings produced by the click handler.
(The click handler might be set at the wrong point in time as it is not explicitly sync'ed with the dom tree creation ( I haven't checked this though and haven't researched this any more but wrapped the handler assignments with the jquery .ready method ))
The code below uses the more specific css selector that controls the display: flex!important css property assignment to the navigation bar and filters the dropdown menu guard from the elements the handler is registered with. The element to be hidden is found in a bottom-up traversal starting at the element receiving the element which might be a tad more efficient than querying it by its css class (no benchmarks though).
$(document).ready(() => {
$('.navbar-expand-sm .navbar-collapse a').not(".dropdown-toggle").click(function(eve) {
$(eve.target).closest(".navbar-expand-sm .navbar-collapse").css('visibility', 'hidden');
});
});
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="icon" href="brand logo.png" type="image/gif">
<title>Special Education Notes</title>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="#homeImage"><img src="brand logo.png" alt="logo" style="width: 70px;"></a>
<button class="navbar-toggler" type="button" id="menu-button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" style="font-size: 20px;" href="#about">About Us<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" style="font-size: 20px;" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Notes
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" style="font-size: 20px;" href="http://www.google.de">B.Ed Special Education</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" style="font-size: 20px;" href="http://www.google.de">D.Ed. Special Education</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" style="font-size: 20px;" href="#contact-us" aria-disabled="true">Contact Us</a>
</li>
<li class="nav-item active">
<a class="nav-link" style="font-size: 20px;" href="#" aria-disabled="true">Upload</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><span class="nav-link"><i class="fab fa-facebook-square"></i></span></li>
</ul>
</div>
</nav>
</body>
</html>
Finally got the correct code:
$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){
$(".navbar-collapse").collapse('hide');
});
So when I scroll down the page it will not work at all when I am using bootstrap it just doesn't work but when I use website with just that js and html & css no <head> tags or anything it will work. My code is below.
I don't know what I can do to fix this. I've tried for about 3 hours trying to make it work but no matter what I do it wont work even if I remove the addclass and remove class and put a console.log it wont even work. My friend uses the same js for his website and it works but I dont know what it is on my website that makes it different. We use the same jquery version.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" name="viewport">
<link rel="icon" href="#" type="image/png">
<title>PrismPanel | Home</title>
<link rel="stylesheet" href="./static/css/bootstrap.min.css">
<link rel="stylesheet" href="./static/css/style.css?v=0.1">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top" id="navbar">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<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="#">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown link</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$(window).scroll(function() {
if($(this).scrollTop() !== 0) {
$('.navbar').addClass('scrolled');
} else {
$('.navbar').removeClass('scrolled');
}
});
});
</script>
</body>
</html>
Does that work for you? I just replaced bootstrap.css source.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
https://jsfiddle.net/z4e73gs8/
Because in this fiddle that works.
Maybe something wrong is with your bootstrap.css file?
I'm very new to Bootstrap (and front end dev in general). I'm trying to get a Bootstrap4 navbar to work. I've essentially copied and pasted code from the bootstrap website, but I can't get it working.
When I shrink the page, the menu does collapse as it should. However, when I click on the collapsed menu, nothing happens. Also, on the expanded menu, nothing happens when I click the dropdown menu.
I've verified path to the boostrap.min.js is correct.
I'm loading this page file via "file://" in my browser, not off a server. I don't know if that could be a problem, but I wouldn't think so. Anyway, here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css" />
<script href="static/js/jquery-3.3.1.min.js"></script>
<script href="static/js/popper.min.js"></script>
<script href="static/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<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>
</button>
<div class="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>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
I'm sure it's something simple (I feel like the javascript isn't loading, for some reason), but I can't figure it out. Anybody see anything obvious?
Edit: I should also note that I don't see any Javascript errors in console, and I'm not sure I'm checking correctly, but it doesn't look like there are event listeners registered for the button (so nothing should happen when I click it).
Edit2: I just started a quick web server to load this from. None of the javascript files are being requested from the server. The main problem seems to be with the loading of the javascript files. Paths are correct, though.
Solved: The problem was I was using href for my script tags, instead of src. Changed to src and everything is working as expected.
Try the following code below for BootStrap4 Starter template. It will run anywhere just double click on the file. All source included from CDN.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<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>
<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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main role="main" class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</main><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
The attributes for the script tags were all wrong. I had href. It should be src. I fixed it and everything is working now.