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
Related
I put the same html (with Bootstrap 4.5.2) in these 2 places.
index.html
App.vue
In index.html, the Bootstrap style works. In App.vue, the space between buttons fails. I fixed this by adding class mr-1 to the buttons. How do I avoid having to fix normal Bootstrap when putting it in components?
what I tried (with the same result)
Added official BootstrapCDN code to index.html
Added this to main.js and installed the modules
import jQuery from "jquery";
global.jQuery = jQuery;
let Bootstrap = require("bootstrap");
import "bootstrap/dist/css/bootstrap.css";
Added this in the <style> section of App.vue
#import url('https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css');
Momin's suggestion:
installed everything in the project folder dir
npm install bootstrap jquery popper.js
added this to the top of main.js:
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
If you need Bootstrap, just go with BootsrapVue which does the heavy lifting for you.
Should you still be open for other choices, Vuetifyjs is a really good framework with much to offer.
Adding bootstrap styles and javascript
In your project directory install Bootstrap and its dependencies.
npm install bootstrap jquery popper.js
If you’re not going to use Bootstrap’s JavaScript and only going to use its styles, don’t worry about installing jQuery or Popper.js
Finally, import it into the main script by adding these lines to the top of project/src/main.js:
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
Repeat, if you just want the styles and not the JavaScript functionality, just drop off the first line and only include the CSS.
BootstrapVue is a good choice, but it really is up to you. People can suggest other alternatives all day (e.g Tailwind Vue). BootstrapVue is nice because if you are already familiar with Bootstrap you will be mostly familiar with BootstrapVue straight away. Again, if it does work for your purposes then go with it.
I personally like the feature of including just what you need.
Read more about that in the BootstrapVue docs ‘Individual components and directives’ here: https://bootstrap-vue.org/docs#component-groups-and-directives-as-vue-plugins
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"
]
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) :
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
I use laravel mix (webpack) to compile my project. Trying to add slick carousel plugin but get an error: Uncaught TypeError: $(...).slick is not a function .
I use .copy() method in webpack.mix.js file to copy from node_modules directory to public directory:
.copy('node_modules/jquery/dist/jquery.min.js', 'public/js')
.copy('node_modules/slick-carousel/slick/slick.min.js', 'public/js')
.copy('node_modules/slick-carousel/slick/slick.css', 'public/css')
.copy('node_modules/slick-carousel/slick/slick-theme.css', 'public/css')
All files successfully appeared in proper public directories and these files are seen in sources tab (in browser inspector).
After I plug slick styles, then jquery (tried several versions), then slick.js in html head. I even used cdn urls.
It's all ok with slick if I do the same without laravel mix.
It doesn't work, I can't understand what's wrong. Please help!
Give a try to change as below:
.copy('node_modules/jquery/dist/jquery.min.js', 'public/assets/js')
.copy('node_modules/slick-carousel/slick/slick.min.js', 'public/assets/js')
.copy('node_modules/slick-carousel/slick/slick.css', 'public/assets/css')
.copy('node_modules/slick-carousel/slick/slick-theme.css', 'public/assets/css')
Reference: https://new.laravel.su/docs/5.4/mix
First npm install slick-carousel
If you are using copy then
mix.copy('node_modules/slick-carousel/slick', 'public/assets/slick');
Or you can just manually copy-paste
In .html file
<link rel="stylesheet" type="text/css" href="/assets/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/assets/slick/slick-theme.css"/>
<script type="text/javascript" src="/assets/slick/slick.min.js"></script>