The 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.
Tags
Small tag labels to insert anywhere
By default, a tag is a 1.5rem high label.
Tag label
<span class="tag">
Tag label
</span>Colors #
Like with buttons, there are 10 different colors available.
Black
Dark
Light
White
Primary
Link
Info
Success
Warning
Danger<span class="tag is-black">Black</span>
<span class="tag is-dark">Dark</span>
<span class="tag is-light">Light</span>
<span class="tag is-white">White</span>
<span class="tag is-primary">Primary</span>
<span class="tag is-link">Link</span>
<span class="tag is-info">Info</span>
<span class="tag is-success">Success</span>
<span class="tag is-warning">Warning</span>
<span class="tag is-danger">Danger</span>Sizes #
Normal
Medium
Large
<span class="tag is-link is-normal">Normal</span>
<span class="tag is-primary is-medium">Medium</span>
<span class="tag is-info is-large">Large</span>You can change the size of all tags at once:
<div class="tags are-medium">
<span class="tag">All</span>
<span class="tag">Medium</span>
<span class="tag">Size</span>
</div><div class="tags are-large">
<span class="tag">All</span>
<span class="tag">Large</span>
<span class="tag">Size</span>
</div>You can however keep the original size of a subset of tags, simply by applying one of its modifier class:
<div class="tags are-medium">
<span class="tag">Medium</span>
<span class="tag is-normal">Normal</span>
<span class="tag">Medium</span>
<span class="tag is-large">Large</span>
<span class="tag">Medium</span>
</div>Modifiers #
You can add the
is-rounded modifier to make a rounded tag.
Rounded
<span class="tag is-rounded">Rounded</span>
You can add the
is-delete modifier to turn the tag into a delete button.
<a class="tag is-delete"></a>Combinations #
You can append a delete button.
Bar
Hello
World
<span class="tag is-success">
Bar
<button class="delete is-small"></button>
</span>
<span class="tag is-warning is-medium">
Hello
<button class="delete is-small"></button>
</span>
<span class="tag is-danger is-large">
World
<button class="delete"></button>
</span>List of tags #
You can now create a list of tags with the .tags container.
<div class="tags">
<span class="tag">One</span>
<span class="tag">Two</span>
<span class="tag">Three</span>
</div>If the list is very long, it will automatically wrap on multiple lines, while keeping all tags evenly spaced.
<div class="tags">
<span class="tag">One</span>
<span class="tag">Two</span>
<span class="tag">Three</span>
<span class="tag">Four</span>
<span class="tag">Five</span>
<span class="tag">Six</span>
<span class="tag">Seven</span>
<span class="tag">Eight</span>
<span class="tag">Nine</span>
<span class="tag">Ten</span>
<span class="tag">Eleven</span>
<span class="tag">Twelve</span>
<span class="tag">Thirteen</span>
<span class="tag">Fourteen</span>
<span class="tag">Fifteen</span>
<span class="tag">Sixteen</span>
<span class="tag">Seventeen</span>
<span class="tag">Eighteen</span>
<span class="tag">Nineteen</span>
<span class="tag">Twenty</span>
</div>
You can attach tags together with the .has-addons modifier.
<div class="tags has-addons">
<span class="tag">Package</span>
<span class="tag is-primary">Bulma</span>
</div>You can attach a text tag with a delete tag together.
<div class="tags has-addons">
<span class="tag is-danger">Alex Smith</span>
<a class="tag is-delete"></a>
</div>
If you want to attach .tags containers together, simply use the .field element with the .is-grouped and .is-grouped-multiline modifiers.
<div class="field is-grouped is-grouped-multiline">
<div class="control">
<div class="tags has-addons">
<span class="tag is-dark">npm</span>
<span class="tag is-info">0.5.0</span>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag is-dark">build</span>
<span class="tag is-success">passing</span>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag is-dark">chat</span>
<span class="tag is-primary">on gitter</span>
</div>
</div>
</div>This can be useful for a long list of blog tags.
<div class="field is-grouped is-grouped-multiline">
<div class="control">
<div class="tags has-addons">
<a class="tag is-link">Technology</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<a class="tag is-link">CSS</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<a class="tag is-link">Flexbox</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<a class="tag is-link">Web Design</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<a class="tag is-link">Open Source</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<a class="tag is-link">Community</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<a class="tag is-link">Documentation</a>
<a class="tag is-delete"></a>
</div>
</div>
</div>Variables #
You can use these variables to customize this element. Simply set one or multiple of these variables before importing Bulma. Learn how.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| Name | Type | Default value | Computed value |
$tag-background-color
|
color |
$background
|
hsl(0, 0%, 96%)
|
$tag-color
|
color |
$text
|
hsl(0, 0%, 29%)
|
$tag-radius
|
size |
$radius
|
4px
|
$tag-delete-margin
|
size |
1px
|
This page is open source.
Noticed a typo? Or something unclear?
Improve this page on GitHub
