Adding bootstrap

1

In all the examples like this, installing bootstrap requires adding bootstrap in aurelia.json under dependencies section. But, when I create a new application with Aurelia CLI(v 0.33.1), I don’t see any bundles, or dependencies section. And, even if I create a dependencies section, still the require of bootstrap is not working.

Please help

1 Like
2

The current cli creates new app with webpack as default setup, not requirejs (old default, many old tutorials were written using requirejs setup). You are another one who were confused by cli document.

Read the webpack section of cli doc first. For how to add various packages under webpack, you need to read more doc from webpack itself (which is not pleasant at all if you did not use webpack before).

If you want to follow requirejs path, when creating new app, choose customize, then choose requirejs.

1 Like
3

If you exclude CLI from the equation all that is needed is npm i [package-name] --save

4

For the sake of completeness:

  1. Install necessary packages locally: yarn add jquery popper.js bootstrap
  2. Append the following lines to src/app.ts or src/app.js:
    require('bootstrap/dist/css/bootstrap.min.css');
require('bootstrap');
  3. Voilà !

The require sections will embed the necessary css and javascript files (and BS dependencies like jQuery and popper.js)

Cheers
Seb

3 Likes
5

Your webpack.config may need the plugin section updated

new ProvidePlugin({
      'Promise': 'bluebird',
      $: "jquery",
      jQuery: "jquery",
      Popper: ['popper.js', 'default']
    }),
6

Well, I did not need it actually to make it fly. Did you?

7

I did. I’d get an error about popper otherwise

8

Strange… I just tried using Aurelia CLI (aurelia-cli@0.33.1) + default scaffolding process (ESNext…), then:

npm install bootstrap jquery popper.js --save

Then edited the app.js and appended following code:

require('bootstrap/dist/css/bootstrap.min.css');
require('bootstrap');

This was enough to make BS4 alive for my app…

@elitmike, would you mind sharing your config? (CLI version, scaffolding variant…)

1 Like
9

You know what, I don’t use pure bootstrap. I forgot about that, it’s been set up for some time now. I’m using this. https://fezvrasta.github.io/bootstrap-material-design I think the standard bootstrap handles popper properly

10

For standard Bootstrap v4 and above , it works, but you can also use bootstrap.bundle.js, which bundles necessary dependencies like popper.js.

11

Thanks. That helped. :slight_smile:

12

Can you please expand on WHERE to use it?

13

Banged my head on this for several hours.

Found this thread. And extrapolated from sboutete06’s answer, above.

If you use bootstrap.bundle you don’t need to include popper.js. But, it was figuring out how to tell it to use bootstrap.bundle. Here:

require('bootstrap/dist/css/bootstrap.min.css');
require('bootstrap/bootstrap.bundle');  // instead of require('bootstrap');

Everything works now.

14

The guide is for CLI built-in bundler, but it works with app with webpack too. https://aurelia.io/docs/cli/cli-bundler/cook-book#bootstrap-css-v4

1 Like