View list of default-label in bootstrap

Question

I would like to view list of strings in default-label format of bootstrap with angular-js ng-repeat

Following is a code snippet,

<div class="row">
  <div class="col-md-12">
    <span ng-repeat="hobby in hobbies" class="label label-default col-md-2">{{hobby.name}}</span>
  </div>
</div>

Output of above does not looks good. default label fills col-md-2 and also if list is big then it goes out of row div.

I would like to have output as following

How can I acheive following with default-label from bootstrap classes?

And I would like to use only classes/styles provided by bootstrap and NOT custom css.

Answer 1

You dont need the col-md-2 class on the span element:

<div class="row">
  <div class="col-md-12">
    <span ng-repeat="hobby in hobbies" class="label label-default">{{hobby.name}}</span>
  </div>
</div>

You can read up more on the label variations on the bootstrap website

A note from the bootstrap website:

Have tons of labels? Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own inline-block element (like an icon). The way around this is setting display: inline-block;. For context and an example, see #13219.

UPDATE

If you are using the ng-repeat directive directly on a label label- you might end up with labels that do not have spacing between the labels. This is related to this question and this question

You might end up with labels looking like this:

I have created a jsfiddle to show the two results, you might need to update your HTML to fix the spacing issue.

You can use the following HTML to resolve the issue if you do not want to add a custom class with margin:

<div class="row">
    <div class="col-sm-12">
      <span ng-repeat="label in labels">
       <span class="label label-default">{{label}}</span>
      </span>
    </div>
  </div>

The result: