Included Assets

ember-bootstrap uses the Bootstrap CSS classes while replacing the behaviors from the components Bootstrap implements in bootstrap.js, such as toggle, navbar, modal, etc., with equivalent, CSS class-compatible native Ember components.

If you are not using a preprocessor, ember-bootstrap will import the static CSS files. If you are using Sass as a preprocessor, ember-bootstrap imports the preprocessor-ready versions of the styles.

No bootstrap.js

ember-bootstrap deliberately excludes bootstrap.js because the jQuery and Ember ways of control flow and animation sometimes don't play well together, causing unpredictable results. This is the main motivation behind ember-bootstrap. It is possible to import bootstrap.js from manually. However this is NOT recommended or supported, and you will be on your own. You have been warned!

Importing assets

Importing static CSS Assets

When not using a CSS preprocessor (see below) you will need to import the static Bootstrap CSS into yourself.

For classic apps, add the following lines to ember-cli-build.js

//your-bootstrap-app/ember-cli-build.js
module.exports = function(defaults) {
  let app = new EmberApp(defaults, { /* Configuration */ });
  app.import('node_modules/bootstrap/dist/css/bootstrap.css');
  app.toTree();
};

For Embroider apps, import the CSS file in app/app.js.

import 'bootstrap/dist/css/bootstrap.css';

Using a CSS preprocessor

ember-bootstrap supports Sass (with ember-cli-sass) as a CSS preprocessor. When it detects it upon first installation of ember-bootstrap, it will install the necessary packages and add an @import statement to your app.scss file respectively:

// app.scss
@import "node_modules/bootstrap/scss/bootstrap";

This will add the whole bootstrap stylesheets allowing you to customize them easily using the available variables.

Important note: this only works when you have the CSS preprocessor addon installed before installing ember-bootstrap itself. If that is not the case, then run the default install blueprint using the preprocessor option: ember generate ember-bootstrap --preprocessor=sass! This will execute the necessary setup steps as described above.

It is possible to import only the assets your app needs but the definitions varies according to the chosen configuration.

// app.scss
// Required
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// Optional - Bootstrapping/Resetting
@import "node_modules/bootstrap/scss/root";
@import "node_modules/bootstrap/scss/print"; // Bootstrap 4 only
@import "node_modules/bootstrap/scss/reboot";

// Optional - Everything else
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/buttons";

You can also checkout which files are available for import in node_modules/bootstrap/scss.