Aurelia Bootstrap is a collection of Custom Elements and Custom Attributes that facilitate working with Bootstrap in a native Aurelia way.
It has no dependency on jQuery, all the Javascript code has been written for Aurelia. Our only dependency is Velocity for animations.
You can install the plugin directly from its Github repository with jspm:
jspm install aurelia-bootstrap -y
Once the plugin is installed you need to indicate Aurelia to use it. To do this find your main.js
file
and add the plugin:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-bootstrap');
aurelia.start().then(() => aurelia.setRoot());
}
You will also need to include the Bootstrap css file. We decided to do not include that css with our plugin, so you can choose where you want to get it from, or you may even want to compile your own version.
The simplest way to get it is through your Package Management, for JSPM that would be:
jspm install bootstrap -y
Once you have installed the Bootstrap css with your preferred method you only need to include the bootstrap.css file,
there is no need to include the fonts (which have been dropped on v4), or the javascript files. This is as simple as adding
the following to your app.html
:
<require from="bootstrap/css/bootstrap.css"></require>
And with this you are ready to start using the plugin.
Right now Bootstrap is in the middle of updating to v4, we have planned support for Bootstrap 4, and in fact it is
already in the codebase. We plan to support both Bootstrap version for the foreseeable future, but for now Bootstrap 3
is the default version. If you wish to switch to Bootstrap 4 you need the following in your
main.js
:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-bootstrap', config => config.options.version = 4);
aurelia.start().then(() => aurelia.setRoot());
}