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 dependencies are Velocity for animations and Tether for positioning.
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());
}
For Aurelia CLI there are a couple of things that need to be done. We need to install:
npm install aurelia-bootstrap -s
npm install velocity-animate -s
npm install tether -s
Once the packages are installed we need to indicate Aurelia CLI how to load the plugins. Add the following in your
aurelia-project/aurelia.json
project file:
"velocity-animate",
"tether",
{
"name": "aurelia-bootstrap",
"path": "../node_modules/aurelia-bootstrap/dist/amd",
"main": "index",
"resources": [
"**/*.html"
]
}
Finally you need to indicate Aurelia to use the plugin. To do this find your main.js
file
and add the plugin:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-bootstrap')
.feature('resources');
aurelia.start().then(() => aurelia.setRoot());
}
You 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, that could be JSPM or NPM. But you can even manually download the bootstrap.css file.
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>
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());
}