How do I load bootstrap using npm?

Question

I have a npm project that uses jquery.

var $ = require('jquery');

I also have an index html file that references bootstrap.

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<script type="text/javascript" src="my-script.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

Now do I need to a separate load for jquery for bootstrap as it depends on it? I was recently using jqueryify instead of jquery and I did not need the separate load.

Can anyone recommend a loading pattern for bootstrap with use with require?

For the people out there looking for the correct answer: stackoverflow.com/questions/26773767/… — Felipe Jimenez
– Felipe Jimenez, Commented Jul 16, 2016 at 17:37

skinnybrit51 · Accepted Answer · 2014-06-13 14:41:02Z

61

Bootstrap is now a supported node package by the bootstrap guys.

https://www.npmjs.org/package/bootstrap

What this means is you can now require bootstrap in code. So.

npm install bootstrap --save

npm install jquery --save

foo.js

var $ = require('jquery');
window.$ = $;
require('bootstrap');

edited Jun 13, 2014 at 14:41

answered Jun 12, 2014 at 18:36

skinnybrit51

4,9477 gold badges28 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Michael Giovanni Pumo Over a year ago

What about CSS? Do we have to @import in our SASS files to the node_modules folder? Seems dirty.

adam-beck Over a year ago

@MichaelGiovanniPumo yes you would need to. I disagree that it is dirty.

adam-beck Over a year ago

@MichaelGiovanniPumo I want to expand on my comment. You don't necessarily need to. You just need to make sure that the CSS file is loaded. Could just be a <link> tag in your .html file. Or you could use sass/less/postcss to import in the file. I don't use bootstrap but in my postcss file i can call @import 'normalize.css' just like I would require modules in javascript. To me, that is clean.

Chris Schmitz Over a year ago

Note that if you're using the bootstrap-sass npm module instead of regular bootstrap, the require('bootstrap') line would need to be require('bootstrap-sass').

Ryan Over a year ago

This was helpful, but I also needed an alias in my Laravel Mix Webpack config file: stackoverflow.com/a/49576317/470749

Arthur Lacoste · Accepted Answer · 2017-04-27 09:21:16Z

15

If you have some trouble to use require('jquery'), there is a more simple way to do it. Just redirect node modules folders (without using any require()).

app.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js')); // redirect bootstrap JS
app.use('/js', express.static(__dirname + '/node_modules/jquery/dist')); // redirect JS jQuery
app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); // redirect CSS bootstrap

And on your views, just use simply :

<link href="/css/bootstrap.min.css" rel="stylesheet">
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>

answered Apr 27, 2017 at 9:21

Arthur Lacoste

8741 gold badge11 silver badges10 bronze badges

Comments

lmiguelvargasf · Accepted Answer · 2020-01-15 19:52:58Z

Assuming you want to install the latest version of Bootstrap 4, and that you are using node 10+ which uses npm at least 5.6+ (I used it for node v12.14.1 and npm 6.13.6, and it works properly):

npm install bootstrap
npm install jquery
npm install popper.js

Notice that you don't need to pass --save since after npm 5.0.0 installed modules are added as a dependency by default.

Now, assuming you have a file called index.html at the same directory of node_modules, you need to add the following to your head tag:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

You also need to add the following before </body>:

<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

Notice the comment: jQuery first, then Popper.js, then Bootstrap JS. This is important since Bootstrap depends upon JQuery and Popper.js.

Juni Brosas · Accepted Answer · 2016-10-03 15:37:13Z

2

You can try assigning it to global jquery property.

global.jQuery = require('jquery');

answered Oct 3, 2016 at 15:37

Juni Brosas

1,4962 gold badges15 silver badges25 bronze badges

Comments

codefreaK · Accepted Answer · 2018-06-10 16:57:04Z

1

//install expose-loader
npm install jquery --save  //Installing jquery and saving to package.Json
npm install bootstrap --save//Installing boostrap and saving to package.Json
npm install expose-loader --save-dev//Installing expose-loader and saving to package.json

// webpack
module: {
rules: [
{
     test: require.resolve('jquery'),
     loader: 'expose-loader?jQuery!expose-loader?$'
}
]}

// javascript file 
var $ = require("expose-loader?$!jquery"); 
require('bootstrap');
require('jquery.easing');

edited Jun 10, 2018 at 16:57

codefreaK

3,6627 gold badges37 silver badges66 bronze badges

answered Apr 2, 2018 at 8:19

Oceansblue

235 bronze badges

1 Comment

Muhammad Omer Aslam Over a year ago

please add a description with your code what it is doing and why should the OP use it, it would prevent your answer being flagged as low quality.

Ben · Accepted Answer · 2017-07-09 15:00:14Z

0

yarn add bootstrap-sass
yarn add jquery

For style, I use gulp sass which need to include Paths for bootstrap

@import "bootstrap-sprockets";
@import "bootstrap";

var sass = require('gulp-sass');

pipe(sass({includePaths: ['node_modules/bootstrap-sass/assets/stylesheets']}).on('error', sass.logError))

For JavaScript, I assign jquery to window.jQuery as bootstrap-sass needed:

window.jQuery = require('jquery');
require('bootstrap-sass');

answered Jul 9, 2017 at 15:00

Ben

7177 silver badges15 bronze badges

Comments

Ryan · Accepted Answer · 2018-03-30 14:32:21Z

0

I'm using Laravel Mix (Webpack), so I had to add this alias to webpack.mix.js:

mix.webpackConfig({
    ...
    resolve: {    
        ...
        alias: {        
            "bootstrap": path.resolve(__dirname, "node_modules/bootstrap/dist/js/bootstrap.min.js"),
        }
    },
});

My package.json has "bootstrap": "^4.0.0", within devDependencies.

Then in my javascript file for my view, I use:

var $ = require('jquery');
window.$ = $;
require('bootstrap');

https://getbootstrap.com/docs/4.0/getting-started/download/#npm also helped.

answered Mar 30, 2018 at 14:32

Ryan

24.5k37 gold badges214 silver badges410 bronze badges

Comments

Sorya · Accepted Answer · 2021-03-29 07:02:45Z

-3

Add this link below into head

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>

Add these links at the end body tag

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

answered Mar 29, 2021 at 7:02

Sorya

941 silver badge2 bronze badges

Collectives™ on Stack Overflow

How do I load bootstrap using npm?

8 Answers 8

5 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

5 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related