Bootstrap 4 Tags

Append and highlight additional information to a string of text with a stylized tag.

Bootstrap's tag classes can be used to highlight additional information that's appended to a string of text.

To create a tag, apply the .tag class, as well as one of the .tag-* classes to the <span> element that represents the tag.


Here we create a default tag by using class="tag tag-default".

Contextual Classes

The following contextual classes are available for tags.

Pill Tags

Make the corners more rounded with Bootstrap's .tag-pill class.

New in Bootstrap 4

  • Bootstrap 4 replaced labels with tags.
  • Bootstrap 4 introduced the .tag-pill class to provide rounded corners.
  • Bootstrap 3 doesn't have the .tag class. It uses labels, and badges (both of which were dropped in Bootstrap 4).

Alpha Release

Bootstrap 4 is currently in alpha release, therefore, do not use it in production yet. To be safe, refer to Bootstrap 3 Tags until Bootstrap 4 becomes an official release.

Also check out the differences between Bootstrap v3 and v4.