Bulma | Tags
Bulma is a free, open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.
The Bulma tag is a small element that is very useful to attach information to a block or other component.
Example 1: Simple Tag elements
<html> <head> <title>Bulma Tag</title> <link rel='stylesheet' href= <!-- custom css --> <style> div.columns{ margin-top: 50px; } h1{ color:green !important; margin-bottom: 20px; } span{ margin-right:5px; } </style> </head> <body> <div class='container has-text-centered'> <div class='columns is-mobile is-centered'> <div class='column is-8'> <div> <h1 class='title'>Tag Elements</h1> <hr> </div> <div> <span class="tag"> Tag1 </span> <span class="tag"> Tag2 </span> <span class="tag"> Tag3 </span> <span class="tag"> Tag4 </span> <span class="tag"> Tag5 </span> <span class="tag"> Tag6 </span> <span class="tag"> Tag7 </span> <span class="tag"> Tag8 </span> <span class="tag"> Tag9 </span> <span class="tag"> Tag10 </span> </div> </div> </div> </div> </div> </body> </html> |
chevron_right
filter_none
Output:
Example 2: Coloured Tag elements
<html> <head> <title>Bulma Tag</title> <link rel='stylesheet' href= <!-- custom css --> <style> div.columns{ margin-top: 50px; } h1{ color:green !important; margin-bottom: 20px; } span{ margin-right:5px; } </style> </head> <body> <div class='container has-text-centered'> <div class='columns is-mobile is-centered'> <div class='column is-8'> <div> <h1 class='title'>Coloured Tag Elements</h1> <hr> </div> <div> <span class="tag is-primary"> Primary </span> <span class="tag is-info"> Info </span> <span class="tag is-link"> Link </span> <span class="tag is-success"> Success </span> <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-warning"> Warning </span> <span class="tag is-danger"> Danger </span> </div> </div> </div> </div> </div> </body> </html> |
chevron_right
filter_none
Output:
Example 3: Different sizes Tag elements
<html> <head> <title>Bulma Tag</title> <link rel='stylesheet' href= <!-- custom css --> <style> div.columns{ margin-top: 50px; } h1{ color:green !important; margin-bottom: 20px; } span{ margin-right:5px; } </style> </head> <body> <div class='container has-text-centered'> <div class='columns is-mobile is-centered'> <div class='column is-8'> <div> <h1 class='title'> Different sizes Tag Elements </h1> <hr> </div> <div> <span class="tag is-primary is-normal"> Normal </span> <span class="tag is-info is-medium"> Medium </span> <span class="tag is-link is-large"> Large </span> </div> </div> </div> </div> </div> </body> </html> |
chevron_right
filter_none
Output:
Example 4: Rounded Tag elements
<html> <head> <title>Bulma Tag</title> <link rel='stylesheet' href= <!-- custom css --> <style> div.columns{ margin-top: 50px; } h1{ color:green !important; margin-bottom: 20px; } span{ margin-right:5px; } </style> </head> <body> <div class='container has-text-centered'> <div class='columns is-mobile is-centered'> <div class='column is-8'> <div> <h1 class='title'>Rounded Tag Elements</h1> <hr> </div> <div> <span class="tag is-primary is-rounded"> Primary </span> <span class="tag is-info is-rounded"> Info </span> <span class="tag is-link is-rounded"> Link </span> <span class="tag is-success is-rounded"> Success </span> <span class="tag is-black is-rounded"> Black </span> <span class="tag is-warning is-rounded"> Warning </span> <span class="tag is-danger is-rounded"> Danger </span> </div> </div> </div> </div> </div> </body> </html> |
chevron_right
filter_none
Output:
Example 5: Text tag element with delete tag element
<html> <head> <title>Bulma Tag</title> <link rel='stylesheet' href= <!-- custom css --> <style> div.columns{ margin-top: 50px; } h1{ color:green !important; margin-bottom: 20px; } div.tags{ display:flex; float:left; margin-right:10px; } </style> </head> <body> <div class='container has-text-centered'> <div class='columns is-mobile is-centered'> <div class='column is-8'> <div> <h1 class='title'> Text Tag Element with Delete Tag Element </h1> <hr> </div> <div> <div class="tags has-addons"> <span class="tag is-link">Javascript</span> <a class="tag is-delete"></a> </div> <div class="tags has-addons"> <span class="tag is-link">Node.Js</span> <a class="tag is-delete"></a> </div> <div class="tags has-addons"> <span class="tag is-link">Angular</span> <a class="tag is-delete"></a> </div> <div class="tags has-addons"> <span class="tag is-link">React</span> <a class="tag is-delete"></a> </div> <div class="tags has-addons"> <span class="tag is-link">Vue</span> <a class="tag is-delete"></a> </div> <div class="tags has-addons"> <span class="tag is-link">Bulma Css</span> <a class="tag is-delete"></a> </div> <div class="tags has-addons"> <span class="tag is-link">Mongo DB</span> <a class="tag is-delete"></a> </div> <div class="tags has-addons"> <span class="tag is-link">Python</span> <a class="tag is-delete"></a> </div> </div> </div> </div> </div> </div> </body> </html> |
chevron_right
filter_none
Example 6: Tags attach together
<html> <head> <title>Bulma Tag</title> <link rel='stylesheet' href= <!-- custom css --> <style> div.columns{ margin-top: 50px; } h1{ color:green !important; margin-bottom: 20px; } div.tags{ display:flex; float:left; margin-right:10px; } </style> </head> <body> <div class='container has-text-centered'> <div class='columns is-mobile is-centered'> <div class='column is-8'> <div> <h1 class='title'>Tags attach together</h1> <hr> </div> <div class="control"> <div class="tags has-addons"> <span class="tag is-success">Yes</span> <span class="tag is-danger">No</span> </div> <div class="tags has-addons"> <span class="tag is-info">Show</span> <span class="tag is-warning">Hide</span> </div> <div class="tags has-addons"> <span class="tag is-success">Node.Js</span> <span class="tag is-danger">NPM</span> </div> <div class="tags has-addons"> <span class="tag is-primary">CSS</span> <span class="tag is-info">Bulma</span> </div> <div class="tags has-addons"> <span class="tag is-warning">Javascript</span> <span class="tag is-danger">Angular</span> </div> <div class="tags has-addons"> <span class="tag is-warning">Javascript</span> <span class="tag is-primary">React</span> </div> </div> </div> </div> </div> </div> </body> </html> |
chevron_right
filter_none
Output:
