ember-cli-bootstrap-4

An ember-cli addon for using Bootstrap 4 in Ember applications.

Usage no npm install needed!

<script type="module">
  import emberCliBootstrap4 from 'https://cdn.skypack.dev/ember-cli-bootstrap-4';
</script>

README

Ember CLI Bootstrap 4

npm version npm monthly downloads Build Status Ember Observer Score License: MIT

An ember-cli addon for using Bootstrap 4 in Ember applications.

Compatibility

  • Ember.js v3.4 or above
  • Ember CLI v2.13 or above
  • Node.js v8 or above

Installation

Demo

Getting Started

Install in ember-cli application

ember install ember-cli-bootstrap-4

Then include the following in your app.scss file:

@import "ember-cli-bootstrap-4/bootstrap";

or for grid only

@import "ember-cli-bootstrap-4/bootstrap-grid";

Configuration

JavaScript Components

This addon don't have any Ember.js components.

Javascript files of Bootstrap are adding from bootstrap/dist/js/bootstrap.js.

For import not all Bootstrap 4 js modules, you can specify its in ember-cli-build:

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-cli-bootstrap-4': {
      //Default list
      js: ['util', 'alert', 'button', 'carousel', 'collapse', 'dropdown', 'modal', 'tooltip', 'popover', 'scrollspy', 'tab', 'toast']
    }
  });

  ...
};

Or you can turn its off:

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-cli-bootstrap-4': {
      js: null
    }
  });

  ...
};

Custom variables

You can use custom Bootstrap 4 variables. Store your custom available variables in app\styles\_custom.scss. And add import _custom.scss in app.scss.

@import "custom";
@import "ember-cli-bootstrap-4/bootstrap";

Custom Bootstrap 4 components

For import custom Bootstrap 4 css components instead @import "ember-cli-bootstrap-4/bootstrap"; you can use code below:

@import "ember-cli-bootstrap-4/functions";
@import "ember-cli-bootstrap-4/variables";
@import "ember-cli-bootstrap-4/mixins";
@import "ember-cli-bootstrap-4/root";
@import "ember-cli-bootstrap-4/reboot";
@import "ember-cli-bootstrap-4/type";
@import "ember-cli-bootstrap-4/images";
@import "ember-cli-bootstrap-4/code";
@import "ember-cli-bootstrap-4/grid";
@import "ember-cli-bootstrap-4/tables";
@import "ember-cli-bootstrap-4/forms";
@import "ember-cli-bootstrap-4/buttons";
@import "ember-cli-bootstrap-4/transitions";
@import "ember-cli-bootstrap-4/dropdown";
@import "ember-cli-bootstrap-4/button-group";
@import "ember-cli-bootstrap-4/input-group";
@import "ember-cli-bootstrap-4/custom-forms";
@import "ember-cli-bootstrap-4/nav";
@import "ember-cli-bootstrap-4/navbar";
@import "ember-cli-bootstrap-4/card";
@import "ember-cli-bootstrap-4/breadcrumb";
@import "ember-cli-bootstrap-4/pagination";
@import "ember-cli-bootstrap-4/badge";
@import "ember-cli-bootstrap-4/jumbotron";
@import "ember-cli-bootstrap-4/alert";
@import "ember-cli-bootstrap-4/progress";
@import "ember-cli-bootstrap-4/media";
@import "ember-cli-bootstrap-4/list-group";
@import "ember-cli-bootstrap-4/close";
@import "ember-cli-bootstrap-4/toasts";
@import "ember-cli-bootstrap-4/modal";
@import "ember-cli-bootstrap-4/tooltip";
@import "ember-cli-bootstrap-4/popover";
@import "ember-cli-bootstrap-4/carousel";
@import "ember-cli-bootstrap-4/spinners";
@import "ember-cli-bootstrap-4/utilities";
@import "ember-cli-bootstrap-4/print";

Contributing

See the Contributing guide for details.

License

Ember-cli-bootstrap-4 is released under the MIT License. See the bundled LICENSE file for details.