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.

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.

Using the default blueprint

By default, ember-bootstrap installs Bootstrap 5 and uses the installed preprocessor if there is one. You can use the ember-bootstrap default blueprint to switch the Bootstrap version or preprocessor.

Use a CSS preprocessor

To use a Sass as a CSS preprocessor instead of plain CSS (highly recommended!), you can use this command to install and set this up:

ember generate ember-bootstrap --preprocessor=sass

See the Assets guide for details.

Switch to Bootstrap 5

You can switch to Bootstrap 5 by running this command:

ember generate ember-bootstrap --bootstrap-version=5

About the default blueprint

The default blueprint does the following:

  • Removes any unneeded versions of bootstrap and bootstrap-sass from package.json and bower.json
  • Installs the appropriate version of bootstrap or bootstrap-sass as an npm package
  • Removes unneeded dependencies on ember-cli-less and ember-cli-sass
  • Installs ember-cli-sass and app.scss if appropriate
  • Adds the appropriate "@import" statement to your app.scss if it's not there already
  • Safely edits your ember-cli-build.js to ensure the proper ember-bootstrap settings for your configuration

All configuration options

Besides the above-mentioned configuration options that are handled explicitly using the default blueprint, you can further 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 Array of component names

Component tree shaking: include only the listed components into your build, to reduce your JavaScript bundle size. Components not listed here will not be available. You should use either include or exclude, not both.

Example:

include: ['bs-button', 'bs-modal',
            'bs-form']
exclude Array of component names

Exclude the listed components from your build, to reduce your JavaScript bundle size. See include.

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

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