I have been utilizing the Visual Studio Code IDE for my coding projects, along with a helpful plugin called "live server" that allows for quick checks of code changes. Everything was running smoothly with Bootstrap until I encountered an issue.
When I attempted to open an .html file by double-clicking on it (without using the live server feature from Visual Studio Code IDE), the file opened as if there were no CSS or Bootstrap JS loaded.
I am in need of assistance in resolving this matter.
Below is a small snippet of code with the necessary components:
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- Main css -->
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-light navbar-expand-md fixed-top bg-light border-bottom">
<a class="navbar-brand text-info" href="#">AirFly</a>
<!-- Hamburger menu -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div style="position:relative;" class="collapse navbar-collapse" id="navbarCollapse">
<div class="float-right">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link text-uppercase text-info" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-uppercase text-dark" href="about.html">About us</a>
</li>
<li class="nav-item">
<a class="nav-link text-uppercase text-dark" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="js/weather.js"></script>
<script src="js/ui.js"></script>
<script src="js/main.js"></script>
</body>
</html>