Develop Reference

Bootstrap Collapse Button Not Showing Content When Clicked

I have made a CodePen and tried using Bootstrap to make a collapse with a button. I have included the Bootstrap, JQuery, and Popper libraries. The CSS Bootstrap is working because my button is being styled, but when it is clicked it does not display the content. I will include a block of the code as well with a link to the full CodePen. Any suggestions on the project are welcomed as well, but I just really need to know why the collapse is not working. Thanks for reading, and I hope I can get this to work with yall's help!
Button:
<button
data-toggle="collapse"
data-target="#website-code-container"
type="button"
class="btn btn-primary"
>
Click Me to See the code used
</button>
Content to be displayed:
<div id="website-code-container" class="collapse"> ... </div>
Link to full CodePen, this will probably help more: CodePen

You have a problem with the Bootstrap CSS and the Popper JS libraries that you are importing.
Try importing the css from Bootstrap CDN listed at https://getbootstrap.com/
Don't forget to load jQuery before you load bootstrap.js
Here are the links to the CSS and JS for easier access
CSS only
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
JS, Popper.js, and jQuery
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
You can find prior versions of the libraries at https://www.bootstrapcdn.com/legacy/bootstrap/

You are attempting to load files from a local drive. This will not work as filesystem access is not broadly allowed for security reasons.
Instead of these, include the relevant files in your CodePen or in another HTTP-accessible location:
<link type="text/css" rel="stylesheet" href="E:\Tech Page.css" />
<script src="E:\Tech Page.js"> </script>

Bootstrap Installation Issues

I've been trying to install Bootstrap into a project that I'm working on, but I'm being hit with Uncaught Error: Bootstrap's JavaScript requires jQuery. I've installed both through Bower, so I'm not sure whether that's related, but it's not having issues finding the files, so I don't think it is. Upon Googling the issue, I realized that the order in which I reference the script files matters, so I changed it to reflect what I had read, but that didn't fix the issue. When I looked into the directories in the file explorer, I saw a file called core.js, but including that didn't help either. I fairly certain that it's something to do with the way I reference files, so I'll provide that code, but feel free to ask if anything more is required.
index.html (root folder, following text is in body):
<script src="./bower_components/jquery/dist/jquery.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-route/angular-route.js"></script>
<script src="./bower_components/angular-animate/angular-animate.js"></script>
<script src="./bower_components/angular-aria/angular-aria.js"></script>
<script src="./bower_components/angular-material/angular-material.js"></script>
<script src="angulator.js"></script>
<script src="./components/calculator/calculator.controller.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>

I think you might have confused jQuery with angular. You are not including jQuery, but you are including angular (including angular-material, which is a competing framework to bootstrap).
If you want to use bootstrap with angular, you probably want to use ng-bootstrap instead of the standard Bootstrap JS, since it allows you to interact with Bootstrap components from inside your angular components. If you do this via the "standard" (non ng-bootstrap) JavaScript, things will start falling apart as soon as the Bootstrap JS mutates the DOM. You would also be unable to infer the view state from your component state (since you would need to call the functions of the bootstrap JS instead of data binding), which is pretty much the whole idea of angular.

You need jquery to remove the error
bower install jquery

I don't see you referencing jQuery in the code you provided. You've installed it via Bower, but you will still need to add a reference to it.
<script src="./bower_components/jquery/jquery.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-route/angular-route.js"></script>
<script src="./bower_components/angular-animate/angular-animate.js"></script>
<script src="./bower_components/angular-aria/angular-aria.js"></script>
<script src="./bower_components/angular-material/angular-material.js"></script>
<script src="angulator.js"></script>
<script src="./components/calculator/calculator.controller.js"></script>

Import jQuery script before, like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-route/angular-route.js"></script>
<script src="./bower_components/angular-animate/angular-animate.js"></script>
<script src="./bower_components/angular-aria/angular-aria.js"></script>
...

Bootstrap needs jQuery to work properly
Here is how you should include them both
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css"> <!--Bootstrap CSS-->
<link rel="stylesheet" href="css/main.css"> <!--Your custom css file-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Your content goes here -->
<script src="js/jquery-1.12.4.min.js"></script><!--jQuery -->
<script src="js/bootstrap.min.js"></script><!--Bootstrap js-->
<script src="js/main.js"></script> <!--Your custom javascript file-->
</body>
</html>

I think you have made a mistake while referencing JQuery.
It should be like :
<script src="bower_components/jquery/dist/jquery.min.js"></script>
and also make sure that you have included it before any other script file.
The correct way to include JQuery is also given on bower.io under Use Packages https://bower.io/

bootstrap less makes page flash before loading content?

I am designing a site on local host using php,bootstrap , html , jquery everything was working fine until i added bootstrap less its still working but now if i refresh the page or go another page its like a flash before the page loads like it shows a blank screen and then loads the content, before i added less everything was cool it loaded just like any other site now its like a delay , anything that can help me with this issue?
when i use regular twitter bootstrap the page loads fine its just with bootstrap less
<!-- Bootstrap -->
<link rel="stylesheet" href="css/style_template.css?v=2" type='text/css'>
<link href="../bootstrap/less/bootstrap.less" rel="stylesheet/less">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="http://js.pusher.com/3.0/pusher.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../bootstrap/js/less.min.js"></script>
<script src="js/custom.js" type="text/javascript">
</script>

twitter Bootstrap Popovers (and bootstrap in general) not Working

I realize this question has been asked multiple times before, but unfortunately, I am unable to find a solution from the existing questions & answers. I have created an html file which I think will have bootstrap functionality by linking to the CDN. It has a link to the JQuery CDN as well.
Well ... I just noticed that the Bootstrap styles are not loading at all. I am not sure why.
Nonetheless, I am assuming that fix will be relatively minor, but I have been struggling for much longer than that to figure out why the Popover is not working.
Please, if you are answering, make sure you are referencing the Bootstrap 3 rules.
note: the structure of the below code was taken straight from the Bootstrap website.
Without further ado !
Here's the code.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="btn-group-vertical">
1
2
3
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script>
$('.btn').popover();
</script>
</body>
</html>

You need to add http: to this link -
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
So this is the answer:
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

jQuery and all .js files not working locally, only externally

I've got a strange problem. I'm coding a website and inlcuding jQuery and some plugins, that are stored in 'js' folder. When I try to open it through a browser jQuery, plugins and all my custom scripts aren't working. Maybe it's somehing with my code, but don't think so. Of course when I inlude jQuery externally (Google API's) it works, but got some plugins and scripts which aren't hosted elsewhere. Here's my 'head' tag.
<title>TOMTRANS - International Transport</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!-- S3Slider CSS -->
<link rel="stylesheet" type="text/css" href="css/s3slider.css" media="screen" />
<!-- jQuery -->
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<!-- jQuery Effects -->
<script type="text/javascript" src="js/functions.js"></script>
<!-- S3Slider -->
<script type="text/javascript" src="js/s3Slider.js"></script>
<!-- S3Slider Init -->
<script type="text/javascript">
$(function() {
$('#s3slider').s3Slider({
timeOut : 3000,
});
});
</script>
<!-- HTML5 Shiv -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

By locally do you mean a local web server (i.e. http://localhost:12345/) or the file system (i.e. file:///C:/Users/John/Desktop/hello.htm)? If it's the latter, then it's probably the security settings. Some browsers block scripts from the file system by default.

Try to do
"./js/..."
I think it will work as with external jquery.
Thanks

Ok I have solved my problem. It's my IDE fault - Aptana Studio 3. This bug occured because I didn't upload hidden .project file, while I copied it through default file browser (Ubuntu's Nautilus). When I used built-in AS3 ftp manager it also copied .project file, and now it works.

I know this thread is old, but I have't found the answer to this very annoying problem so I am adding my solution.
If your physical folder path includes an underscore, it will fail.
So, if you dropped your website to lets say C:\MyRoot\MyFolder_2\WebSite1\ then it won't work. however, if you remove the underscore and it becomes C:\MyRoot\MyFolder2\WebSite1\ it will suddenly work and jQuery will suddenly be loaded.