Bulma Tags

Bulma Tags

The Bulma tags are a small but versatile element. It is used to attach the information in the form of a block.

Please keep in mind that, The default tag label height is 1.5 rem.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Learn HTML5
Learn CSS3
Learn JS
Learn Ajax

Bulma CSS Tag Color

To change the tag color use the following modifier class such as is-black, is-dark, is-light, is-white, is-primary, is-link, is-info, is-success, is-warning,is-warning.

Example

Learn HTML5
Learn CSS3
Learn JS
Learn Ajax
Learn JSON
Learn MySQL
Learn Bootstrap4
Learn Bootstrap5
Learn Bulma
Learn Pure CSS

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Learn HTML5
Learn CSS3
Learn JS
Learn Ajax

You can also change the all tag size at once using .are-medium & .are-large modifier class.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Medium Normal Medium Large Medium

Rounded Tag

To create a rounded tag, use .is-rounded modifier class.

Example

Rounded Tag

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Learn HTML5
Learn CSS3
Learn Tailwind CSS

Bulma CSS Delete Tag

To create a delete tag, use the .is-delete modifier class.

Example

Learn HTML5
Learn CSS3
Learn Tailwind CSS

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Learn HTML5
Learn CSS3
Learn Tailwind CSS