Setup

Installation

Install the addon if you have not done so already:

ember install ember-bootstrap

To allow Bootstrap to render modals and tooltips, add <div id="ember-bootstrap-wormhole"></div> to either the app/index.html or app/templates/application.hbs.

To import the Bootstrap styles, you need to install Bootstrap as well:

npm install --save-dev bootstrap

Configuration

Using plain css

To use ember-bootstrap, include Bootstrap's style sheets into your app's build configuration.

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

let app = new EmberApp(defaults, { /* Configuration */ });
app.import('node_modules/bootstrap/dist/css/bootstrap.css');
app.toTree();

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

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

See the Ember documentation for more information about including assets into your app.

Use a CSS preprocessor

To use a Sass as a CSS preprocessor instead of plain CSS (highly recommended!), you can install and setup ember-cli-sass-

See the Assets guide for details.

Switch to Bootstrap 4

Ember Bootstrap defaults to Bootstrap 5 but supports Bootstrap 4 in parallel. You can switch to Bootstrap 4 by setting the bootstrapVersion option to 4 in your ember-cli-build.js:

module.exports = function (defaults) {
  const app = new EmberApp(defaults, {
    'ember-bootstrap': {
      bootstrapVersion: 4,
    },
  });

  // ...
};

---

All configuration options

You can customize your setup with the following options:

Option	Allowed values	Default	Description
bootstrapVersion	4 / 5	5	Specify the Bootstrap version to use. To make sure you have the right dependencies installed, you should use the default blueprint mentioned above to set this!
importBootstrapCSS	true / false	true if no preprocessor	Include the default static bootstrap.css. Only applicable when not using a preprocessor. See the Assets guide for more details.
include Deprecated	Array of component names		Deprecated: This option is deprecated and will be removed in v7.0.0. Manual tree-shaking via include and exclude options is no longer supported as Ember Bootstrap migrates to v2 addons. Recommended: Use Embroider instead, which supports automatic tree-shaking out of the box. Enable staticComponents or staticInvocables in your Embroider configuration for optimal tree-shaking results.
exclude Deprecated	Array of component names		Deprecated: This option is deprecated and will be removed in v7.0.0. Manual tree-shaking via include and exclude options is no longer supported as Ember Bootstrap migrates to v2 addons. Recommended: Use Embroider instead, which supports automatic tree-shaking out of the box. Enable staticComponents or staticInvocables in your Embroider configuration for optimal tree-shaking results.

These options can be set in your ember-cli-build.js file:

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

module.exports = function(defaults) {
  const app = new EmberApp(defaults, {
    'ember-bootstrap': {
      bootstrapVersion: 4,
      importBootstrapCSS: false,
      exclude: ['bs-popover', 'bs-accordion'],
    },
  });

  // ..
};