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) ember-bootstrap will automatically import the static Bootstrap CSS into your ember-cli build. In situations where you prefer to use another strategy for importing Bootstrap CSS, you can opt out of CSS import by setting the importBootstrapCSS option to false in your ember-cli-build.js:

//your-bootstrap-app/ember-cli-build.js
      module.exports = function(defaults) { let app = new EmberApp(defaults, {
      'ember-bootstrap': { 'importBootstrapCSS': false } }); return
      app.toTree(); };

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
    "ember-bootstrap/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 "ember-bootstrap/functions"; @import "ember-bootstrap/variables";
    @import "ember-bootstrap/mixins"; // Optional - Bootstrapping/Resetting
    @import "ember-bootstrap/root"; @import "ember-bootstrap/print"; @import
    "ember-bootstrap/reboot"; // Optional - Everything else @import
    "ember-bootstrap/type"; @import "ember-bootstrap/buttons";

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