Hello world

This is a simple tutorial explaining how to integrate Bootstrap for Ember in your project.

Clone the starter-kit

Clone the Starter Kit project, this is exactly the official Ember.js starter kit but with Bower support.

git clone https://github.com/ember-addons/starter-kit-bower.git myproject

Install dependencies

First, lets install the minimal dependencies for the starter-kit,

bower install

Then we need the official Bootstrap and Bootstrap for Ember packages:

bower install bootstrap --save
bower install ember-addons.bs_for_ember --save

At this stage, opening index.html in the browser should run the starter kit with no errors.

Include Javascripts & css

open with your favorite editor index.html and add within the header tag:

<!--standard Bootstrap css file-->
<link rel="stylesheet" href="/vendor/bootstrap/dist/css/bootstrap.css">

...

<!--Put before the initialization of the application, respect order, bs-core.min.js must run before any other bs components -->
<!--Core of Bootstrap for Ember -->
<script src="/vendor/ember-addons.bs_for_ember/dist/js/bs-core.min.js"></script>
<!--Alert component -->
<script src="/vendor/ember-addons.bs_for_ember/dist/js/bs-alert.min.js"></script>

Register Bootstrap for Ember components [I DONT THINK WE NEED THIS ANYMORE?]

Open 'app.js' and change:

App = Ember.Application.create();

TO:

App = Ember.Application.createWithMixins(Bootstrap);

Add a component to a template

Lets add an alert component to a template that is auto dismissed after 2 seconds:

In the same file index.html, change the application template to:

<script type="text/x-handlebars">
    {{bs-alert message="A self destroyable hello world message!" type="info" dismissAfter=2 fade=true}}

    {{outlet}}
</script>

Refresh the index.html page in your browser, you should see a 2 seconds fading out alert message.