Tags in Bulma

Tags are phrases or words that describe the content of your website. The tags can be used with any type of content; text, images, videos, etc.

The Bulma framework makes it quite easy for creating tags with various features. For example, you may create simple tags anywhere on the web page. A tag can be created with the cross close button.

The examples below show creating simple and other tags.

How to create a basic tag in Bulma?

A tag can be created by using the “tag” class attached to an element like a span HTML tag. By default,  a Bulma tag is 1.5 rem high label as shown in the example below:

See online demo and code

Available colors for tags example

As with other elements, you may customize the tag color as required by using the Sass variables. However, Bulma has plenty of available colors that you may apply by using the contextual class.

For example, in order to create a red color tag, just add the is-danger class along with tag class. Twelve colors are available:

See online demo and code

Tags with light colors

Just add the is-light class in addition to the above example classes for creating the tags with lighter colors. For example, “tag is-danger is-light” will create a light red color tag:

See online demo and code

Append a cross delete button example

To allow your visitors to close a tag, you may add a delete button with each tag. For that, use a button tag combination as in the code below:

See online demo and code

Adding delete button functionality by jQuery

As such, Bulma does not provide any JavaScript for its components or wherever this is required; you have to do it yourself or find a solution. For example, in the above tag with the close button, the “delete” button does not work. You have to add some JavaScript to make it actionable.

In the following example, we used jQuery code to achieve that.

See online demo and code

Creating various available size tags example

Following three sizes are available for creating tags:

• is-normal
• is-medium
• is-large

The default size is normal, however, the is-normal modifier is still available (in case you require to set the tag size to normal).

See the example below for various sized tags:

See online demo and code

An example of rounded tags

Just add the is-rounded modifier class for making the tags rounded. Have a look:

See online demo and code

List of tags example

The list of tags that are evenly spaced can be created by using the tags class in the container. This can be useful for blogs that show tags in the left navigation or footer of the website:

See online demo and code

Available list of variables

For customizing the tags – text color, background color, radius, and delete margin, you may use the Sass variables. Following variables are available:

• $tag-background-color
• $tag-color
• $tag-radius
• $tag-delete-margin

You may learn about how to use these variables here.