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 a preprocessor like LESS or SASS, 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 bower_components or the vendor folder. 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();
};
  

Bootstrap comes with an optional theme CSS with various visual enhancements. To include this file you can import it by setting importBootstrapTheme to true in the 'ember-bootstrap' config of your ember-cli-build.js.

Using CSS preprocessors

ember-bootstrap supports Less (with ember-cli-less) as well as Sass (with ember-cli-sass) as CSS preprocessors. When it detects one of these upon first installation of ember-bootstrap, it will install the necessary packages ('bootstrap' itself or 'bootstrap-sass') and add an @import statement to your app.less or app.scss file respectively:

// app.less
@import "ember-bootstrap/bootstrap";
// 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, make sure to run the default install blueprint after installing the preprocessor addon: ember generate ember-bootstrap! 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.

BS3 - Less

// app.less

// Required
@import "ember-bootstrap/variables";
@import "ember-bootstrap/mixins";

// Optional - Bootstrapping/Resetting
@import "ember-bootstrap/normalize";
@import "ember-bootstrap/print";

// Optional - Everything else
@import "ember-bootstrap/scaffolding";
@import "ember-bootstrap/type";
@import "ember-bootstrap/buttons";

BS3 - Sass

// app.scss

// Required
@import "ember-bootstrap/bootstrap/variables";
@import "ember-bootstrap/bootstrap/mixins";

// Optional - Bootstrapping/Resetting
@import "ember-bootstrap/bootstrap/normalize";
@import "ember-bootstrap/bootstrap/print";

// Optional - Everything else
@import "ember-bootstrap/bootstrap/scaffolding";
@import "ember-bootstrap/bootstrap/type";
@import "ember-bootstrap/bootstrap/buttons";

BS4 - Sass only

// 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 avaliables for import in node_modules/bootstrap/less for BS3 Less, node_modules/bootstrap-sass/assets/stylesheets/bootstrap for BS3 Sass or node_modules/bootstrap/scss for BS4.

Importing the Bootstrap Glyphicons font

By default the icon font that comes with Bootstrap 3(!) is added to your app's assets folder. When you do not want to use it (maybe because of replacing it for Font Awesome), you can opt out of the font import by setting the importBootstrapFont option to false in your ember-cli-build.js:

//your-bootstrap-app/ember-cli-build.js

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    'ember-bootstrap': {
      'importBootstrapFont': false
    }
  });

  return app.toTree();
};