I'm learning bootstrap and have a problem.
I made a dropdown on navigation bar. However, when I clicked on it, the dropdown wasn't collapsed. The class="dropdown" doesn't change to class="dropdown open" and the directive "aria-expanded" doesn't change from "false" to "true". Only when I go to another page and then come back, the dropdown menu will work properly. I'm wondering why this is hapenning.
And I'm using two bootstrap libraries because I need boostrap 4 to use card deck container
index.html (with all updated files)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<script src="bower-angular-route/angular-route.js"></script>
<script src="https://unpkg.com/angular-ui-router#1.0.3/release/angular-ui-router.min.js"></script>
<script src="node_modules/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js"></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/3.3.7/js/bootstrap.min.js"></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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" />
board.html
<div ui-view>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Home</a>
</div>
<ul class="nav navbar-nav">
<li>Today</li>
<li>Tomorrow</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dates</a>
<ul class="dropdown-menu">
<li>August 1st</li>
<li>August 2nd</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<cards></cards>
</div>
Your example seems to function correctly locally for me and in the included snippet. Maybe ensure that there aren't any caching issues in your test environment.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ui-view>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Home</a>
</div>
<ul class="nav navbar-nav">
<li>Today</li>
<li>Tomorrow</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dates</a>
<ul class="dropdown-menu">
<li>August 1st</li>
<li>August 2nd</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<cards></cards>
</div>
Related
I want to add a transparent Bootstrap Navbar to a page which use fullpage.js. I want to achieve something like this, so that the navbar stays on top of the page but doesn't push the website contents down. How can I do this? I tried the code below but it doesn't work. I tried looking for solutions online but I couldn't find one. Here is some sample code. As you can see the navbar is not even displaying.
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.css" integrity="sha512-TD/aL30dNLN0VaHVoh9voFlNi7ZuWQYtV4bkIJv2ulZ8mEEkZJ7IyGvDthMKvIUwzLmPONnjQlAi55HTERVXpw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>
<link href="css/master.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="fullpage">
<nav class="navbar navbar-light bg-transparent" id="myMenu">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"
style="border: none;">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About us</a>
</li>
</ul>
</div>
</nav>
<div class="section">
<div class="container-fluid">
<h2>Lorem ipsum</h2>
</div>
</div>
<div class="section">
<div class="container-fluid">
</div>
</div>
</div>
<script>
new fullpage('#fullpage', {
//options here
menu: '#myMenu',
autoScrolling: true,
scrollHorizontally: true,
navigation: true,
});
//methods
fullpage_api.setAllowScrolling(true);
</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>
I managed to find a fix myself. I edited the css of the "navbar" class so instead of a relative position its position is fixed and now it works just as i wanted it to!
Add the following styles to the navbar
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.css" integrity="sha512-TD/aL30dNLN0VaHVoh9voFlNi7ZuWQYtV4bkIJv2ulZ8mEEkZJ7IyGvDthMKvIUwzLmPONnjQlAi55HTERVXpw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>
<link href="css/master.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<nav class="navbar navbar-light bg-transparent" id="myMenu">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"
style="border: none;">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About us</a>
</li>
</ul>
</div>
</nav>
<div id="fullpage">
<div class="section">
<div class="container-fluid">
<h2>Lorem ipsum</h2>
</div>
</div>
<div class="section">
<div class="container-fluid">
</div>
</div>
</div>
<script>
new fullpage('#fullpage', {
//options here
menu: '#myMenu',
autoScrolling: true,
scrollHorizontally: true,
navigation: true,
});
//methods
fullpage_api.setAllowScrolling(true);
</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>
I have the following head on my html file, but it seems like there's something wrong, because I'm trying to use scrollspy and navbar collapse and neither of them will work
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nova Bookings</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<!-- Univia Pro Font -->
<link rel="stylesheet" href="https://use.typekit.net/wqq0dwp.css">
<!-- Franklin Gothic -->
<link rel="stylesheet" href="https://use.typekit.net/wqq0dwp.css">
<link href="css/style.css" rel="stylesheet">
</head>
This is my body:
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-custom fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" date-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mx-auto">
....
</ul>
</div>
</div>
</nav>
I don't see anything wrong here... Can anyone help me? Thanks!
Bootstrap should be loading/working properly with the code you posted above. The problem is that you wrote date-toggle instead of data-toggle. Test the code below to make sure it works:
<nav class="navbar navbar-expand-lg navbar-light bg-custom fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<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>
</ul>
</div>
</div>
</nav>
I'm trying to achieve a 'collapse icon' that's floated left followed by Copyright © using Bootstrap4.
I've seen other questions about this topic but none seem to actually answer the question. Other questions have different code with obvious typos, my code doesn't. Why is it that data-toggle & data-target aren't recognized when you do include all the dependencies?
.titleText{
font-size:230%;
color:green;
font-weight:heavy;
letter-spacing:1px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar-nav navbar-expand-sm navbar-fixed-top text-success">
<a class="navbar-brand titleText">Copyright © </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapseNavBar">
<span class="navbar-toggler-icon"></span>
</button>
<div="collapse navbar-collapse" id="collapseNavBar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="link-nav" href="#">Map</a>
</li>
<li class="nav-item">
<a class="link-nav" href="#">Cart</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
The button isn't showing up, just the map & cart text. If you have a workaround I would appreciate a vanilla JS solution apposed to JQuery, since I'm not that experienced with JQuery and would rather use Javascript. Button
Fixed the typo and updated HTML to show collapsible navBar
.titleText{
font-size:230%;
color:green;
font-weight:heavy;
letter-spacing:1px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-fixed-top text-success">
<a class="navbar-brand titleText">Copyright © </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapseNavBar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapseNavBar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="link-nav" href="#">Map</a>
</li>
<li class="nav-item">
<a class="link-nav" href="#">Cart</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
if you use class text-success in your code, so you cant see navigation bar background-color and default link color so i replace text-sucesss to navbar-light bg-light.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-fixed-top navbar-light bg-light">
<a class="navbar-brand titleText">Copyright © </a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapseNavBar" >
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapseNavBar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Cart</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
I have made some typo corrections, the toggle functionality now works with this code. But additional modifications are needed to align the elements correctly.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> .
</script>
<!-- Popper JS -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
> </script>
<!-- Latest compiled JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> .
</script>
<style>
.titleText{
font-size:230%;
color:green;
font-weight:heavy;
letter-spacing:1px;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-fixed-top text-success">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#collapseNavBar">
<span class="navbar-toggler-icon">Menu</span>
</button>
<div class="collapse navbar-collapse" id="collapseNavBar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="link-nav" href="#">Map</a>
</li>
<li class="nav-item">
<a class="link-nav" href="#">Cart</a>
</li>
</ul>
</div>
<a class="navbar-brand titleText">Copyright © </a>
</nav>
</div>
</body>
</html>
I will construct the complete aligned html if need be. Hope this helps!
When I click on the small size toggle button it neither works nor responds. What could be the problem here? I tried some solutions but failed.
<html>
<head>
<link rel="stylesheet" href="bootstrap-4.0.0-alpha.6-dist/css/bootstrap.min.css" type="text/css">
</head>
<body style="background-color:darkslategrey">
<!--navbar-->
<nav class="navbar navbar-toggleable navbar-light bg-faded">
<!--intro navbar-->
<button type="button" class="navbar-toggler navbar-toggler-icon navbar-toggler-right collapsed" data-toggle="collapse" data-target="#menu"><!--responsive collapse menu--></button>
<span class="navbar-brand-icon">Bootstrap</span>
<!--navbar logo-->
<div class="collapse navbar-collapse" id="menu">
<!--in the item-->
<ul class="nav navbar-nav">
<li class="nav-item active">Home</li>
<li class="nav-item">About us</li>
<li class="nav-item">Services</li>
</ul>
</div>
</nav>
<!--header-->
<div class="container">
<div class="header-page">
<div class="lead">
<h1>Welcome in Helper Classes</h1>
</div>
<hr>
<script src="bootstrap-4.0.0-alpha.6-dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript"></script>
</body>
</html>
As seen in this you need to have a few additional script files loaded for bootstrap to work.
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" type="text/css">
</head>
<body style="background-color:darkslategrey">
<!--navbar-->
<nav class="navbar navbar-toggleable navbar-light bg-faded">
<!--intro navbar-->
<button type="button" class="navbar-toggler navbar-toggler-icon navbar-toggler-right collapsed" data-toggle="collapse" data-target="#menu"><!--responsive collapse menu--></button>
<span class="navbar-brand-icon">Bootstrap</span>
<!--navbar logo-->
<div class="collapse navbar-collapse" id="menu">
<!--in the item-->
<ul class="nav navbar-nav">
<li class="nav-item active">Home</li>
<li class="nav-item">About us</li>
<li class="nav-item">Services</li>
</ul>
</div>
</nav>
<!--header-->
<div class="container">
<div clsss="header-page">
<div class="lead">
<h1>Welcome in Helper Classes</h1>
</div>
<hr>
</body>
</html>
For a while I've been trying to figure out how to properly reference jQuery and Bootstrap locally. Noticed that my navbar dropdown menu wasn't working. Couldn't figure out why and decided to paste the CDN links for both jQuery and Bootstrap and it worked just as anticipated:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.css" rel="stylesheet" />
<script type = "text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script type = "text/javascript" src="js/bootstrap.min.js"></script>
<script type = "text/javascript" src="js/script.js"></script>
</head>
<body>
<nav class="navbar navbar-default bg-primary">
<div class="container-fluid">
<!--logo-->
<div class="navbar-header">
WebsiteBrand
</div>
<!--navbar items-->
<div>
<ul class="nav navbar-nav" >
<li class="active">Home</li>
<li>About</li>
<!--dropdown-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
This is my header file. It's the same place I had put the CDN links. Sorry if this is a silly question, but after looking around for such a long time I decided to ask.
You ordering of file linking & tagging should be
<head>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.css" rel="stylesheet" />
<script type = "text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script type = "text/javascript" src="js/bootstrap.min.js"></script>
<script type = "text/javascript" src="js/script.js"></script>
</head>
You missed .js text in bootstrap.min.js
Considering folder structure as below
index.html
css folder
bootstrap.css
bootstrap-theme.css
js folder
jquery-3.2.1.min.js
bootstrap.min.js
script.js
Updating answer as the question being updated
Bootstrap v3
Here is the solution https://jsfiddle.net/9zgddjjf/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default bg-primary">
<div class="container-fluid">
<!--logo-->
<div class="navbar-header">
WebsiteBrand
</div>
<!--navbar items-->
<div>
<ul class="nav navbar-nav" >
<li class="active">Home</li>
<li>About</li>
<!--dropdown-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Bootstrap v4
Here you go with a solution https://jsfiddle.net/9zgddjjf/2/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<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>
WebsiteBrand
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</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">
Page 1
<span class="caret"></span></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Page 1-1</a>
<a class="dropdown-item" href="#">Page 1-2</a>
<a class="dropdown-item" href="#">Page 1-3</a>
</div>
</li>
</ul>
</div>
</nav>