Get 20% off with code BULMA
Valid until the end of November 2024
Download

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Sponsor

Route Planner and Route Optimizer

Tags

Small tag labels to insert anywhere

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.

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>

You can now choose the light version of a color.

Primary

Link

Info

Success

Warning

Danger 
<span class="tag is-primary is-light">Primary</span>
<span class="tag is-link is-light">Link</span>
<span class="tag is-info is-light">Info</span>
<span class="tag is-success is-light">Success</span>
<span class="tag is-warning is-light">Warning</span>
<span class="tag is-danger is-light">Danger</span>

Sizes #

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:

Example

All Medium Size

HTML 

<div class="tags are-medium">
  <span class="tag">All</span>
  <span class="tag">Medium</span>
  <span class="tag">Size</span>
</div>

Example

All Large Size

HTML 

<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:

Example

Medium Normal Medium Large Medium

HTML 

<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>

Hover/Active state #

A tag element will react to the :hover and :active states if:

  • it's an anchor element <a class="tag">
  • it's a button element <button class="tag">
  • it has the is-hoverable modifier class <div class="tag is-hoverable">

Example

Hover me
Hover me

HTML 

<a class="tag">Hover me</a>
<button class="tag">Hover me</button>
<div class="tag is-hoverable">Hover me</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 create hoverable colored tags.
Hover me
Hover me
Hover me
Hover me
<a class="tag is-link">Hover me</a>
<button class="tag is-primary">Hover me</button>
<div class="tag is-hoverable is-success">Hover me</div>
<a class="tag is-info">Hover me</a>
<button class="tag is-warning">Hover me</button>
<div class="tag is-hoverable is-danger">Hover me</div>
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.

One Two Three 
<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.

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty 
<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>

Tag addons #

You can attach tags together with the has-addons modifier.

Package Bulma 
<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.

Alex Smith 
<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.

npm 1.0.2
build passing
chat on gitter 
<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">1.0.2</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.

Technology
CSS
Flexbox
Web Design
Open Source
Community
Documentation 
<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>

Sass and CSS variables #

Sass Variable
CSS Variable
Value 
$tag-radius
 
var(--bulma-tag-radius)
 
var(--bulma-radius)
 
$tag-delete-margin
 
var(--bulma-tag-delete-margin)
 
1px

How to support Bulma

One-time donation

Browser testing via

Visit our Sponsors

Monthly donation

Become a sponsor
#native_company# #native_desc#
#native_cta#
Get started for Free
Get started for Free