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.
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!
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';
ember-bootstrap supports
Sass
(with
ember-cli-sass) as a CSS preprocessor. Ensure that you have the Bootstrap
package installed and add an
@import
statement to your
app.scss
file:
// 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.
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.