Develop Reference

Use Electron with Bootstrap 5 doesn't work

I am creating my first electron app and wanted some styling with bootstrap 5.
So I:
(1) installed via npm i --save bootstrap jquery popper.js the necessary modules
(2) created a main.scss including #import '~bootstrap/scss/bootstrap';
(3) put into the head of my index.html:
<link rel="stylesheet" href="./contents/bootstrap/5.0.2/css/bootstrap.min.css" />
<script>let $ = require('jquery');</script>
<script>require('popper.js');</script>
<script>const bootstrap = require('bootstrap');</script>
After that I copy+paste a nav bar out of the bootstrap documentation. I dont know what is wrong and I didnt find any answer. Thanks for helping.

Bootstrap 5 doesn't use jQuery any longer.
Just do:
npm i --save bootstrap#latest

Bootstrap not working with webpack fails to find fonts

Im trying to bundle my project using webpack 4.
structure for bootstrap:
public
css
images
js
vendor
bootstrap\dist
css
fonts
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
glyphicons-halflings-regular.woff2
js
webpack is unable to locate "fonts" and throws error while building

I solved it as i was using bootstrap 4 and Bootstrap v4 drops the glyphicon font altogether.so, the error occurs instead downgrading with version 3 and below works.
Font Awesome can be used alternative to glyphicons on bootstarp 4.
Bootstrap 4 - Glyphicons migration?

Install offline Bootstrap in Angular

I don't have any way to have internet on my pc and I want to install Bootstrap in my Angular project by downloading it and calling it in my index.html so i can use it offline. Can't use npm i or anything related to internet besides downloading the Bootstrap zip
I just put its folder in "src" and called it with:
<link rel="stylesheet" href="src\bootstrap\css\bootstrap.min.css">
<script src="src\bootstrap\js\bootstrap.min.js"></script>
This isn't working, should I download also popper.js and Jquery? Or should I change something in Angular.json?

Try using assets folder for static files.So move your files to assets and change links like
<link rel="stylesheet" href="assets\bootstrap\css\bootstrap.min.css">
<script src="assets\bootstrap\js\bootstrap.min.js"></script>
Also you will need to add jquery as well

Put the files in the assets folders. It's better to import those files in angular.json instead of index.html. You will also have to include JQuery and popper as in official bootstrap documentation:
Many of our components require the use of JavaScript to function.
Specifically, they require jQuery, Popper.js, and our own JavaScript
plugins.
"styles": [
"src/assets/bootstrap/css/bootstrap.min.css""
],
"scripts": [
"src/assets/jquery/remainingpath...",
"src/assets/popper/remainingpath...",
"src/assets/bootstrap/js/bootstrap/bootstrap.min.js"
]

How to host popper.js locally

I just upgraded to Bootstrap four and realized Popper.js was a dependency. I like to host libraries locally, as I sometimes need to work offline, but when I try to use it offline, I get an error unexpected token export. It works, however, when I use the Cloudflare CDN version, but how can I host popper.js locally?
(I don't want to use a package manager for this.)

The README.md of the project will help sort this out:
Dist targets
Popper.js is currently shipped with 3 targets in mind: UMD, ESM and ESNext.
UMD - Universal Module Definition: AMD, RequireJS and globals;
ESM - ES Modules: For webpack/Rollup or browser supporting the spec;
ESNext: Available in dist/, can be used with webpack and babel-preset-env;
Make sure to use the right one for your needs. If you want to import it with a <script> tag, use UMD.
Hence, if you want to use Popper.js with a <script /> tag, you want to use the umd version of it. Located in dist/umd.

you can use bootstrap.bundle.min.js which already contain Popper.js

I also tried downloading popper and I tried to recreate your problem, and you are correct.
If you check the Quick Start section of getbootstrap.com page, you can find the following line in their example:
<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>
Note the umd part in their link. You can download that file and add it locally and it will work.
PS - You may also have to change your jQuery import.

Download the official bootstrap files by clicking the first link on this page:
https://getbootstrap.com/docs/4.5/getting-started/download/
You can then use the bootstrap.bundle.min.css file in css which contains popper.js as well as the bootstrap code you might need
you can use it by using this code in your <head> tag:
<link rel="stylesheet" type="text/css" href="path-to/bootstrap-4.5.0/css/bootstrap.bundle.min.css">
I included 4.5.0 because that is the current version of bootstrap out there today

If you download Popper.js though
npm install popper.js
I found there are difference between npm package and its original source which is here https://popper.js.org/.
I just download popper.js from its original source and put it new js file. It worked for me.

Just download the source code and refer to it
Get the source code from the github page, then refer to it in your html
<script type="text/javascript" src="/path/to/downloaded/popper.js-1.12.5/dist/poppper.js" />

go to : https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js
the right click and "save as..."
you can do the same with :
https://cdnjs.cloudflare.com/ajax/libs/popper.js/[popper-version]/umd/popper.js
and then in your code you add this line at the bottom between Jquery's and Bootstrap's .js link (script) :

How to integrate Bootstrap CSS in an Angular application

I have two similar very small example Angular applications that integrate Bootstrap CSS. One works and one that I created myself doesn't. It is unclear what the difference is and why it doesn't work in my case.
My steps are as follows:
npm install bootstrap --save
This updates package.json and then subsequently I update index.html and add
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
Exactly the same line as the working application but in example app that I created using ng new new-app it is not working.
Network tab in chrome shows 404. Basically the URL http://localhost:4200/node_modules/bootstrap/dist/css/bootstrap.min.css cannot be found.
What is the correct / complete way to integratie Bootstrap CSS in an Angular app?

It seems you are using angular & angular cli
If this is the case then you can actually add the bootstrap.css file in .angular-cli.json inside array corresponding to style key like this
"styles": [
"styles.less",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
]
Two other possibilities are importing this bootstrap.css at main .css file using #import or you can require this in the main index.js file.

Since you are using Angular-CLI:
update your .angular-cli.json file to include the bootstrap style:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
],
No need to include it in your index.html