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: docs theme: library 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 hoverable_tags %} Hover meThe 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:
A tag element will react to the :hover
and :active
states if:
<a class="tag">
<button class="tag">
is-hoverable
modifier class <div class="tag is-hoverable">
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.