Badges are handy if you want to show users useful notifications.
They are perfect in a list block for example. Bulkit badges have two
main shapes : square, wich is default, and rounded. Add the
.rounded class to a .b-badge element to
make its edges rounded.
<span class="b-badge is-primary">5</span>
<span class="b-badge rounded is-primary">5</span>
Bulkit badges can have several solid colors. Available classes are
.is-primary, .is-secondary,
is-accent, .is-success,
.is-warning, .is-danger, and
.is-info. Add one of these classes to a
.b-badge element to change its color.
Bulkit badges can be outlined. Add the.badge-outlined
class to a .b-badge to make a badge outlined. Several
colors are available. Available classes are
.is-primary, .is-secondary,
is-accent, .is-success,
.is-warning, .is-danger, and
.is-info. Add one of these classes to a
.b-badge element to change its color.
Bulma badges are an extension to the main framework. They are
positionned via pseudo elements. Add the .badge class
to an html element like a button to create a badge on its top right
corner. Then, use the data-badge="" attribute to set
its value.
<button class="button badge" data-badge="">Button</button>
<span class="badge" data-badge="">Span</span>
Bulma badges can have several solid colors. Available classes are
.badge-primary, .badge-secondary,
badge-accent, .badge-success,
.badge-warning, .badge-danger, and
.badge-info. Add one of these classes to a
.badge element to change its color.
<button class="button badge badge-primary" data-badge="">Primary</button>
Bulma badges can be outlined. Add the
.is-badge-outlined class to a
.badge element to make it oulined. Colors apply the
same way than in the above example.
<button class="button badge badge-primary is-badge-outlined" data-badge="">Primary</button>
Badges are available in different sizes :
.is-badge-small, .is-badge-medium,
.is-badge-large.
<button class="button is-badge-small badge" data-badge="">Small</button>
<button class="button badge" data-badge="">Small</button>
<button class="button is-badge-medium badge" data-badge="">Small</button>
<button class="button is-badge-large badge" data-badge="">Small</button>
Ribbons are also an extension of Bulma framework. Ribbons extend
Bulma's .box component. It display a small ribbon with
text in a chosen corner. Add the .has-ribbon class to a
box to display a ribbon in the top right corner. Ribbons have many
colors. Available classes are .is-primary,
.is-secondary, is-accent,
.is-success, .is-warning,
.is-danger, and .is-info. Add one of these
classes to a .ribbon element to change its color.
Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti
probatus ex.
Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti
probatus ex.
Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti
probatus ex.
Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti
probatus ex.
Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti
probatus ex.
Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti
probatus ex.
Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti
probatus ex.
Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti
probatus ex.
<div class="box has-ribbon">
<div class="ribbon is-primary">Primary</div>
<strong>Box content</strong>
<p class="pt-20">Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti probatus ex.</p>
</div>
4 sizes are available. Available classes are .is-small,
.is-medium, and .is-large.
Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti
probatus ex.
Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti
probatus ex.
Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti
probatus ex.
Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti
probatus ex.
2 additionnal positions are available. Left by replacing
.has-ribbon with .has-ribbon-left, and
bottom by replacing .has-ribbon with
.has-ribbon-bottom. Note that with left and bottom
position, you might have to repoistion your content to avoid
overflow.
Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti
probatus ex.
Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti
probatus ex.
Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti
probatus ex.
Tag labels can be square, rounded and outlined.
<span class="tag">Tag label</span>
<span class="tag squared">Tag label</span>
<span class="tag is-outlined">Tag label</span>
<span class="tag squared is-outlined">Tag label</span>
Tags can have many colors. Available classes are
.is-primary, .is-secondary,
is-accent, .is-success,
.is-warning, .is-danger, and
.is-info.
<span class="tag squared is-primary">Primary</span>
Add the .is-outlined class to a
.tag element to make it outlined. Tags can have many
colors. Available classes are .is-primary,
.is-secondary, is-accent,
.is-success, .is-warning,
.is-danger, and .is-info.
<span class="tag squared is-outlined is-primary">Primary</span>
Tags are available in 3 sizes, default, .is-medium and
.is-large.
A .delete element can be nested inside a tag.
<span class="tag squared is-primary">Normal <button class="delete is-small"></button></span>
<span class="tag squared is-secondary is-medium">Medium <button class="delete is-small"></button></span>
<span class="tag squared is-accent is-large">Large <button class="delete"></button></span>
Tags can be organized like a list. Wrap the
.tag elements into a .tags parent element.
<div class="tags">
<span class="tag is-secondary">One</span>
<span class="tag is-primary">Two</span>
<span class="tag is-accent">Three</span>
<span class="tag is-secondary">Four</span>
<span class="tag is-accent">Five</span>
<span class="tag is-secondary">Six</span>
<span class="tag is-primary">Seven</span>
<span class="tag is-accent">Eight</span>
<span class="tag is-primary">Nine</span>
<span class="tag is-secondary">Ten</span>
<span class="tag is-accent">Eleven</span>
<span class="tag is-secondary">Twelve</span>
</div>
Tags can be grouped to show more complex informations. Check the code examples for more details about structure.
