Using {{link-to}} with Bootstrap requires some extra work for expected Bootstrap Navigation Styling. (ember-cli-active-link-wrapper Addon solves issue)

Using {{link-to}} with Bootstrap requires some extra work.

Bootstrap expects 
 <li> <a> </a> <li>

Additionally bootstrap expects a class="active" attribute on the <li>
Ember.js will mark the class="active" on the <a> when you use {{link-to}}

This will break the boostrap styling.

You can use the below ember add-on to make this easier, essentially it introduce a new component {{active-link}}
You use {{active-link}} instead of <li>

https://github.com/alexspeller/ember-cli-active-link-wrapper


<ul class="nav nav-tabs" role="tablist">
{{#active-link}}
  {{#link-to "foo" }}Foo{{/link-to}}
{{/active-link}}
{{#active-link}}
  {{#link-to "bar" }}Bar{{/link-to}}
{{/active-link}}
</ul>