Last Updated: February 25, 2016
· flynfish

Bootstrap button group with Ember

If you try the following in an ember template, the button elements get wrapped in the ember metamorph tags which break the bootstrap styling because they use the :first-child css selectors.

<div class="btn-group" data-toggle="buttons-radio">    
   {{#each db in databases}}
      <button class="btn">{{db.name}}</button>

Messed up styling:


You have two options to fix this:

  1. Update your css to fix it
  2. Use an Ember view so metamorph tags are gone

I don't like the first option because it introduces what amounts to duplicate css rules. The 2nd option is below:

App.MyView = Ember.CollectionView.extend({
  classNames: ['btn-group'],
  itemViewClass: Ember.View.extend({
    template: Ember.Handlebars.compile("{{view.content.name}}"),
    tagName: 'button',
    classNames: ['btn']
  attributeBindings: ['data-toggle'],
  'data-toggle': 'buttons-radio'


In my case I also needed to make sure I bound the collection to the view:

{{view App.MyView contentBinding="databases" }}

Correct Styling:


3 Responses
Add your response


thanks @flynfish. I will try it...

over 1 year ago ·

I've been struggling with the same issue with UIKit (nice alternative to Bootstrap btw)'s button groups. They work exactly the same way, and get messed up the same way.
I had figured out the same solution, except that I was directly instantiating the CollectionView with .create() (as shown in http://emberjs.com/api/classes/Ember.CollectionView.html).
Though this (sometimes) works, it didn't this time, and replacing .create() with .extend() fixed it. Thanks!

over 1 year ago ·

Awesome, glad it helped out!

over 1 year ago ·