I seem to be encountering a peculiar issue with Bootstrap 3.3.6 CSS, where it is only partially functioning. Despite ensuring the proper structure of the site (correct classes in the right places, etc.), it appears that some of the CSS styles are missing.
Take a look at how my navigation bar is displaying: https://i.sstatic.net/ZZtS7.png
Below is the code snippet from my page. The links to both the CSS and JS files are functional, and there have been no modifications made. I obtained these files directly from the official Bootstrap website.
The issue persists even if I switch out the link to my server-side CSS with links to MaxCDN's CSS files.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/style/css/bootstrap.css">
<link rel="stylesheet" href="/style/css/bootstrap-theme.css">
<title>Test Page</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Test Page</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="navbar navbar-nav navbar-left">
<li><a href="#">Home</a>
</li>
<li><a href="">Link</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 1 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="">Link</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="">Link</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="">Link</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 4 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="">Link</a>
</li>
</ul>
</li>
<li><a href="">Link</a>
</li>
<li><a href="">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<p>Test</p>
</div>
<footer class="footer">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="/style/js/bootstrap.min.js"></script>
</footer>
</body>
</html>