Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
{% example html %}
-<span class="badge badge-pill tag-default">Default</span>
-<span class="badge badge-pill tag-primary">Primary</span>
-<span class="badge badge-pill tag-success">Success</span>
-<span class="badge badge-pill tag-info">Info</span>
-<span class="badge badge-pill tag-warning">Warning</span>
-<span class="badge badge-pill tag-danger">Danger</span>
+<span class="badge badge-pill badge-default">Default</span>
+<span class="badge badge-pill badge-primary">Primary</span>
+<span class="badge badge-pill badge-success">Success</span>
+<span class="badge badge-pill badge-info">Info</span>
+<span class="badge badge-pill badge-warning">Warning</span>
+<span class="badge badge-pill badge-danger">Danger</span>
{% endexample %}
</ul>
{% endexample %}
-## Tags
+## Badge
-Add tags to any list group item to show unread counts, activity, etc.
+Add badges to any list group item to show unread counts, activity, etc.
{% example html %}
<ul class="list-group">
<li class="list-group-item">
- <span class="badge badge-default tag-pill float-xs-right">14</span>
+ <span class="badge badge-default badge-pill float-xs-right">14</span>
Cras justo odio
</li>
<li class="list-group-item">
- <span class="badge badge-default tag-pill float-xs-right">2</span>
+ <span class="badge badge-default badge-pill float-xs-right">2</span>
Dapibus ac facilisis in
</li>
<li class="list-group-item">
- <span class="badge badge-default tag-pill float-xs-right">1</span>
+ <span class="badge badge-default badge-pill float-xs-right">1</span>
Morbi leo risus
</li>
</ul>