The Bulma tag is a small but versatile element. It's very useful as a way to attach information to a block or other component. Its size makes it also easy to display in numbers, making it appropriate for long lists of items.
--- title: Tags layout: documentation doc-tab: elements doc-subtab: tag breadcrumb: - home - documentation - elements - elements-tag meta: colors: true sizes: true variables: true --- {% capture tag %} Tag label {% endcapture %} {% capture tags_colors %} Black Dark Light White Primary Link Info Success Warning Danger {% endcapture %} {% capture tags_light_colors %} Primary Link Info Success Warning Danger {% endcapture %} {% capture sizes %} Normal Medium Large {% endcapture %} {% capture are_medium %}
{% endcapture %} {% capture are_large %} {% endcapture %} {% capture are_medium_one_large %} {% endcapture %} {% capture rounded %} Rounded {% endcapture %} {% capture delete %} Bar Hello World {% endcapture %} {% capture is_delete %} {% endcapture %} {% capture tags %} {% endcapture %} {% capture tags_multiple %} {% endcapture %} {% capture tags_addons %} {% endcapture %} {% capture tags_field_addons %}The Bulma tag is a small but versatile element. It's very useful as a way to attach information to a block or other component. Its size makes it also easy to display in numbers, making it appropriate for long lists of items.
Black
Dark
Light
White
Primary
Link
Info
Success
Warning
DangerYou can now choose the light version of a color.
Primary
Link
Info
Success
Warning
DangerThe tag comes in 3 different sizes.
While the default size is the normal one, the is-normal
modifier exists in case you need to reset the tag to its normal size.
Normal
Medium
Large
You can change the size of all tags at once:
You can however keep the original size of a subset of tags, simply by applying one of its modifier class:
is-rounded
modifier to make a rounded tag.
is-delete
modifier to turn the tag into a delete button.
Bar
Hello
World
You can now create a list of tags with the tags
container.
If the list is very long, it will automatically wrap on multiple lines, while keeping all tags evenly spaced.
You can attach tags together with the has-addons
modifier.
You can attach a text tag with a delete tag together.
If you want to attach tags
containers together, simply use the field
element with the is-grouped
and is-grouped-multiline
modifiers.
This can be useful for a long list of blog tags.