Sign in


Sign up


Bootstrap Tags, Labels & Badges

Bootstrap tabs are components which separate content placed in the same wrapper, but in the separate pane. Only one pane can be displayed at the time.

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.

Contact Person Caroline Smith
Contact Person Adam Grey
Contact Person Danny Moore
Contact Person Daisy Sun
Contact Person Martha Um
Contact Person Alexa Deyn
Martha
Agnes
Caroline
Elisa
Francesca

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
Default
Primary
Success
Info
Warning
Danger

Tags within table MDB Pro component

When you click on "I am light blue color" tag, the modal appears.

                
.trigger {
  padding: 1px 10px;
  font-size: 12px;
  font-weight: 400;
  border-radius: 10px;
  background-color: #eee;
  color: #212121;
  display: inline-block;
  margin: 2px 5px;
}

.hoverable, .trigger {
  transition: box-shadow 0.55s;
  box-shadow: 0;
}

.hoverable:hover, .trigger:hover {
  transition: box-shadow 0.45s;
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
                
            
                
<!-- Central Modal Success Demo-->
<div class="modal fade" id="conditionModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-notify modal-success" role="document">
        <!--Content-->
        <div class="modal-content">
            <!--Header-->
            <div class="modal-header">
                <p class="heading lead">Modal Success</p>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true" class="white-text">&times;</span>
                                                </button>
            </div>

            <!--Body-->
            <div class="modal-body">
                <div class="text-center">
                    <i class="fa fa-check fa-4x mb-3 animated rotateIn"></i>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis
                        ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga,
                        enim, ab officiis totam.
                    </p>
                </div>
            </div>

            <!--Footer-->
            <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                <a type="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
            </div>
        </div>
        <!--/.Content-->
    </div>
</div>
<!-- Central Modal Success Demo-->

<!-- Accordion card -->
<div class="card p-3">

    <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>Add label if</th>
          <th>Remove label if</th>
        </tr>
      </thead>
      <tbody>
        <tr>
            <th scope="row">1</th>
            <td><a class="trigger blue lighten-4" data-toggle="modal" data-target="#conditionModal">I am light blue color</a></td>
            <td>
                <a class="trigger teal lighten-4">Trigger name 1</a>
                <a class="trigger info-color text-white">Add<i class="fa fa-plus ml-2"></i></a>
            </td>
            <td>
                <a class="trigger teal lighten-4">Trigger name 1</a>
                <a class="trigger teal lighten-4">Trigger name 2</a>
                <a class="trigger info-color text-white">Add<i class="fa fa-plus ml-2"></i></a>
            </td>
            <td class="text-right">
                <a><i class="fa fa-info mx-1" data-toggle="tooltip" data-placement="top" title="Tooltip on top"></i></a>
                <a><i class="fa fa-pencil-square mx-1" data-toggle="modal" data-target="#conditionModal"></i></a>
                <a><i class="fa fa-copy mx-1"></i></a>
                <a><i class="fa fa-times mx-1"></i></a>
            </td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td><a class="trigger blue lighten-4" data-toggle="modal" data-target="#conditionModal">I am light blue color</a></td>
            <td>
                <a class="trigger info-color text-white">Add<i class="fa fa-plus ml-2"></i></a>
            </td>
            <td>
                <a class="trigger teal lighten-4">Trigger name 1</a>
                <a class="trigger info-color text-white">Add<i class="fa fa-plus ml-2"></i></a>
            </td>
            <td class="text-right">
                <a><i class="fa fa-info mx-1" data-toggle="tooltip" data-placement="top" title="Tooltip on top"></i></a>
                <a><i class="fa fa-pencil-square mx-1" data-toggle="modal" data-target="#conditionModal"></i></a>
                <a><i class="fa fa-copy mx-1"></i></a>
                <a><i class="fa fa-times mx-1"></i></a>
            </td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td><a class="trigger blue lighten-4" data-toggle="modal" data-target="#conditionModal">I am light blue color</a></td>
            <td>
                <a class="trigger teal lighten-4">Trigger name 1</a>
                <a class="trigger info-color text-white">Add<i class="fa fa-plus ml-2"></i></a>
            </td>
            <td>
                <a class="trigger teal lighten-4">Trigger name 1</a>
                <a class="trigger teal lighten-4">Trigger name 2</a>
                <a class="trigger info-color text-white">Add<i class="fa fa-plus ml-2"></i></a>
            </td>
            <td class="text-right">
                <a><i class="fa fa-info mx-1" data-toggle="tooltip" data-placement="top" title="Tooltip on top"></i></a>
                <a><i class="fa fa-pencil-square mx-1" data-toggle="modal" data-target="#conditionModal"></i></a>
                <a><i class="fa fa-copy mx-1"></i></a>
                <a><i class="fa fa-times mx-1"></i></a>
            </td>
        </tr>
      </tbody>
    </table>

</div>
<!-- Accordion card -->
                
            

Chips with avatars MDB Pro component

Contact Person John Doe
Contact Person Anna Smith
Contact Person Lara Lim
Contact Person Tom Dark
Contact Person Kate Horwitz
Contact Person Danny Clark
                
.chip.chip-md {
    height: 42px;
    line-height: 42px;
    border-radius: 21px;
}
.chip.chip-md img {
    height: 42px;
    width: 42px;
}

.chip.chip-lg {
    height: 52px;
    line-height: 52px;
    border-radius: 26px;
}
.chip.chip-lg img {
    height: 52px;
    width: 52px;
}
                
            
                
<div class="chip">
    <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="Contact Person"> John Doe
</div>

<div class="chip chip-md">
    <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-10.jpg" alt="Contact Person"> Anna Smith
</div>

<div class="chip chip-lg">
    <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="Contact Person"> Lara Lim
</div>
                
            

Chips without avatars MDB Pro component

Tag 1
Tag 2
Tag 3
Tag 4
Tag 5
Tag 6
Tag 220
Tag 219
Tag 218
Tag 217
Tag 216
Tag 215
                
<div class="chip pink lighten-4">
    Tag 220
    <i class="close fa fa-times"></i>
</div>
                
            

Chips with various colors MDB Pro component

Info notification

MDB has hundreds of colors to use within chips. Take a look here to know all the possibilities.

Contact Person Caroline Smith
Contact Person Adam Grey
Contact Person Danny Moore
Contact Person Daisy Sun
Contact Person Martha Lores
Contact Person Alexandra Deyn
Contact Person Olaf Horwitz
Contact Person Mary-Kate Dare
Contact PersonThe Sylvester
Martha
Agnes
Caroline
Elisa
Francesca
25.09.2017
24.08.2016
23.07.2015
22.06.2014
Aqua color
Peach color
Purple color
Blue color
                
.chip.chip-md {
    height: 42px;
    line-height: 42px;
    border-radius: 21px;
}
.chip.chip-md img {
    height: 42px;
    width: 42px;
}
.chip.chip-md .close {
    height: 42px;
    line-height: 42px;
    border-radius: 21px;
}

.chip.chip-lg {
    height: 52px;
    line-height: 52px;
    border-radius: 26px;
}
.chip.chip-lg img {
    height: 52px;
    width: 52px;
}
.chip.chip-lg .close {
    height: 52px;
    line-height: 52px;
    border-radius: 26px;
}
                
            
                
<div class="chip blue lighten-4">
    <img src="https://mdbootstrap.com/img/Photos/Avatars/img(7).jpg" alt="Contact Person"> Caroline Smith
</div>
<div class="chip chip-md cyan darken-2 white-text">
    <img src="https://mdbootstrap.com/img/Photos/Avatars/img(28).jpg" alt="Contact Person"> Martha Lores
</div>
<div class="chip chip-lg success-color white-text">
    <img src="https://mdbootstrap.com/img/Photos/Avatars/img(21).jpg" alt="Contact Person">The Sylvester
</div>
<div class="chip teal lighten-2 white-text">
    Martha
    <i class="close fa fa-times"></i>
</div>
<div class="chip chip-md indigo lighten-4 indigo-text">
    24.08.2016
    <i class="close fa fa-times"></i>
</div>
<div class="chip chip-lg aqua-gradient white-text">
    Aqua color
    <i class="close fa fa-times"></i>
</div>
                
            

Labels

This is the first heading New

This is the second heading New

This is the third heading New

This is the fourth heading New

This is the fifth heading New
This is the sixth heading New
                
<h1>This is the first heading <span class="badge red">New</span></h1>
<h2>This is the second heading <span class="badge cyan">New</span></h2>
<h3>This is the third heading <span class="badge amber darken-2">New</span></h3>
<h4>This is the fourth heading <span class="badge pink">New</span></h4>
<h5>This is the fifth heading <span class="badge purple darken-2">New</span></h5>
<h6>This is the sixth heading <span class="badge indigo">New</span></h6>
                
            

Contextual colors badges

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>
                
            

Pills badges

Default Primary Success Info Warning Danger
                
<span class="badge badge-pill pink">Default</span>
<span class="badge badge-pill light-blue">Primary</span>
<span class="badge badge-pill indigo">Success</span>
<span class="badge badge-pill purple">Info</span>
<span class="badge badge-pill orange">Warning</span>
<span class="badge badge-pill green">Danger</span>
                
            

Badges with icons

                
<span class="badge badge-default"><i class="fa fa-facebook" aria-hidden="true"></i></span>
<span class="badge badge-primary"><i class="fa fa-instagram" aria-hidden="true"></i></span>
<span class="badge badge-success"><i class="fa fa-snapchat-ghost" aria-hidden="true"></i></span>
<span class="badge badge-info"><i class="fa fa-anchor" aria-hidden="true"></i></span>
<span class="badge badge-warning"><i class="fa fa-sun-o" aria-hidden="true"></i></span>
<span class="badge badge-danger"><i class="fa fa-battery-3" aria-hidden="true"></i></span>
<span class="badge badge-pill pink"><i class="fa fa-android" aria-hidden="true"></i></span>
<span class="badge badge-pill light-blue"><i class="fa fa-heart-o" aria-hidden="true"></i></span>
<span class="badge badge-pill indigo"><i class="fa fa-bullhorn" aria-hidden="true"></i></span>
<span class="badge badge-pill purple"><i class="fa fa-comments-o" aria-hidden="true"></i></span>
<span class="badge badge-pill orange"><i class="fa fa-coffee" aria-hidden="true"></i></span>
<span class="badge badge-pill green"><i class="fa fa-user" aria-hidden="true"></i></span>
<span class="badge indigo"><i class="fa fa-android fa-2x" aria-hidden="true"></i></span>
<span class="badge cyan"><i class="fa fa-cog fa-2x" aria-hidden="true"></i></span>
<span class="badge orange"><i class="fa fa-btc fa-2x" aria-hidden="true"></i></span>
<span class="badge badge-pill teal"><i class="fa fa-heart fa-2x" aria-hidden="true"></i></span>
<span class="badge badge-pill green"><i class="fa fa-apple fa-2x" aria-hidden="true"></i></span>
<span class="badge badge-pill purple"><i class="fa fa-users fa-2x" aria-hidden="true"></i></span>
                
            

Javascript usage MDB Pro 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 MDB Pro component

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');