Hey there! This section was updated recently. If you're looking for 4.2.0 docs please visit this site
Bootstrap Tags, Labels & Badges
Tags in all their simplicity are a method of categorizing your content with use of a specific word, phrases or formulas, making it easier for your user to browse throughout your articles, comments or pages as a whole.
Their main goal is to provide your visitors with an intuitive way of getting what they want. Just consider, how convenient it is to find all the articles related to web development just by using web development tag.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Primary
Success
Info
Warning
Danger
Chips Premium component
With avatar
<div class="chip">
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="Contact Person"> Jane Doe
</div>
Without avatar
<div class="chip">
Tag 1
<i class="close fa fa-times"></i>
</div>
Labels
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<h1>Example heading <span class="badge red">New</span></h1>
<h2>Example heading <span class="badge blue">New</span></h2>
<h3>Example heading <span class="badge black">New</span></h3>
<h4>Example heading <span class="badge green">New</span></h4>
<h5>Example heading <span class="badge grey">New</span></h5>
<h6>Example heading <span class="badge indigo">New</span></h6>
Contextual variations
Add any of the below mentioned modifier classes to change the appearance of a tag.
Default Primary Success Info Warning Danger
<span class="badge badge-default">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
Javascript usage Premium component
Adding tags
Type a name and press enter to add tag. Click X to remove it.
<div class="chips chips-placeholder"></div>
$('.chips-placeholder').material_chip({
placeholder: 'Enter a tag',
secondaryPlaceholder: '+Tag',
});
Set initial tags
<div class="chips chips-initial"></div>
$('.chips-initial').material_chip({
data: [{
tag: 'Tag 1',
}, {
tag: 'Tag 2',
}, {
tag: 'Tag 3',
}],
});
Chip data object
var chip = {
tag: 'chip content',
image: '', //optional
id: 1, //optional
};
jQuery Plugin Options
Option Name | Type | Description |
---|---|---|
data | array | Set the chip data (look at the Chip data object) |
placeholder | string | Set first placeholder when there are no tags. |
secondaryPlaceholder | string | Set second placeholder when adding additional tags. |
Events
Event | Description |
---|---|
chips.add | this method is triggered when a chip is added |
chips.delete | this method is triggered when a chip is deleted. |
chips.select | this method is triggered when a chip is selected |
$('.chips').on('chip.add', function(e, chip){
// you have the added chip here
});
$('.chips').on('chip.delete', function(e, chip){
// you have the deleted chip here
});
$('.chips').on('chip.select', function(e, chip){
// you have the selected chip here
});
Methods
Parameter | Description |
---|---|
data | It returns the stored data |
options | It returns the given options |
$('.chips-initial').material_chip('data');
$('.chips-initial').material_chip('options');