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.
You are viewing the deprecated 0.7.5 version of the website. Click here to view the latest version
Small tag labels to insert anywhere
<span class="tag">
Tag label
</span>
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>
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.
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>
is-rounded
modifier to make a rounded tag.
<span class="tag is-rounded">Rounded</span>
is-delete
modifier to turn the tag into a delete button.
<a class="tag is-delete"></a>
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>
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>
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