web
mobile
Edit these docs Rate these docs

Labels & Badges

Bootstrap Labels & Badges

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


Basic example

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New


        <h1>Example heading <span class="badge badge-primary">New</span></h1>
        <h2>Example heading <span class="badge badge-primary">New</span></h2>
        <h3>Example heading <span class="badge badge-primary">New</span></h3>
        <h4>Example heading <span class="badge badge-primary">New</span></h4>
        <h5>Example heading <span class="badge badge-primary">New</span></h5>
        <h6>Example heading <span class="badge badge-primary">New</span></h6>

      

Badges can be used as part of links or buttons to provide a counter.



        <button type="button" class="btn btn-primary">
          Notifications <span class="badge badge-danger ml-2">4</span>
        </button>

      

Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.

Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.



        <button type="button" class="btn btn-primary">
          Profile <span class="badge badge-danger ml-2">9</span>
          <span class="sr-only">unread messages</span>
        </button>

      

Contextual variations

Add any of the below-mentioned modifier classes to change the appearance of a badge.

Default Primary Secondary Success Danger Warning Info Light Dark


        <span class="badge badge-default">Default</span>
        <span class="badge badge-primary">Primary</span>
        <span class="badge badge-secondary">Secondary</span>
        <span class="badge badge-success">Success</span>
        <span class="badge badge-danger">Danger</span>
        <span class="badge badge-warning">Warning</span>
        <span class="badge badge-info">Info</span>
        <span class="badge badge-light">Light</span>
        <span class="badge badge-dark">Dark</span>

      

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. So ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.


Pill badges

You can use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). This is useful if you miss the badges from v3.

Default Primary Secondary Success Danger Warning Info Light Dark


        <span class="badge badge-pill badge-default">Default</span>
        <span class="badge badge-pill badge-primary">Primary</span>
        <span class="badge badge-pill badge-secondary">Secondary</span>
        <span class="badge badge-pill badge-success">Success</span>
        <span class="badge badge-pill badge-danger">Danger</span>
        <span class="badge badge-pill badge-warning">Warning</span>
        <span class="badge badge-pill badge-info">Info</span>
        <span class="badge badge-pill badge-light">Light</span>
        <span class="badge badge-pill badge-dark">Dark</span>

      


Badges with icons



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

      

Tags within table MDB Pro component

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



        <!-- 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="fas 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-success">Get it now <i class="far fa-gem ml-1"></i></a>
                <a type="button" class="btn btn-outline-success waves-effect" data-dismiss="modal">No, thanks</a>
              </div>
            </div>
            <!-- Content -->
          </div>
        </div>
        <!-- Central Modal Success Demo -->

        <!-- 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</a></td>
                <td>
                  <a class="trigger teal lighten-4">Trigger name 1</a>
                  <a class="trigger info-color text-white">Add<i class="fas 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="fas fa-plus ml-2"></i></a>
                </td>
                <td class="text-right">
                  <a><i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top"
                      title="Tooltip on top"></i></a>
                  <a><i class="fas fa-pen-square mx-1" data-toggle="modal" data-target="#conditionModal"></i></a>
                  <a><i class="fas fa-copy mx-1"></i></a>
                  <a><i class="fas 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</a></td>
                <td>
                  <a class="trigger info-color text-white">Add<i class="fas 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="fas fa-plus ml-2"></i></a>
                </td>
                <td class="text-right">
                  <a><i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top"
                      title="Tooltip on top"></i></a>
                  <a><i class="fas fa-pen-square mx-1" data-toggle="modal" data-target="#conditionModal"></i></a>
                  <a><i class="fas fa-copy mx-1"></i></a>
                  <a><i class="fas 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</a></td>
                <td>
                  <a class="trigger teal lighten-4">Trigger name 1</a>
                  <a class="trigger info-color text-white">Add<i class="fas 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="fas fa-plus ml-2"></i></a>
                </td>
                <td class="text-right">
                  <a><i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top"
                      title="Tooltip on top"></i></a>
                  <a><i class="fas fa-pen-square mx-1" data-toggle="modal" data-target="#conditionModal"></i></a>
                  <a><i class="fas fa-copy mx-1"></i></a>
                  <a><i class="fas fa-times mx-1"></i></a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- Card -->

      


        .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);
        }

      
Edit these docs Rate these docs

Getting started: download & setup


Download

All of the components and features are a part of the MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is an MIT Licensed framework - free for personal & commercial use.

It combines the esthetic of Material Design and the functionalities of the newest Bootstrap.

Click on the button below to visit the Getting Started Page, where you can download the latest MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires the MDB Pro package - a powerful UI Kit containing over 5,000 components, dozens of plugins and much more cool features.

Click the button below to learn more about the MDBootstrap Pro package.

MDBootstrap Pro

Tutorials

If you need any additional help, use our "5 min Quick Start" guide or start full Bootstrap tutorial.

5 min Quick Start Full Bootstrap Tutorial

Compilation & Customization

To reduce the weight of MDBootstrap package even more, you can compile your own, custom package containing only those components and features that you need.

If you need additional help with compiling your custom package, please use our Compilation & Customization tutorial.

Compilation & Customization tutorial

Map of dependencies of SCSS files in MDBootstrap:


    Legend:

    '-->' means 'required'

    All free and pro files require files from 'core' catalog

    'none' means 'this component doesn't require anything except core files'

    A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working

    All PRO components require 'pro/_variables.scss' file

    scss/
    |
    |-- core/
    |   |
    |   |-- bootstrap/
    |   |	|-- _functions.scss
    |   |	|-- _variables.scss
    |   |
    |   |-- _colors.scss
    |   |-- _global.scss
    |   |-- _helpers.scss
    |   |-- _masks.scss
    |   |-- _mixins.scss
    |   |-- _typography.scss
    |   |-- _variables.scss
    |   |-- _waves.scss
    |
    |-- free/
    |   |-- _animations-basic.scss --> none
    |   |-- _animations-extended.scss --> _animations-basic.scss
    |   |-- _buttons.scss --> none
    |   |-- _cards.scss --> none <_buttons.scss>
    |   |-- _dropdowns.scss --> none <_buttons.scss>
    |   |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
    |   |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
    |   |-- _pagination.scss --> none
    |   |-- _badges.scss --> none
    |   |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
    |   |-- _carousels.scss --> <_buttons.scss>
    |   |-- _forms.scss --> none
    |   |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
    |   |-- _footers.scss none <_buttons.scss> (PRO: )
    |   |-- _list-group.scss --> none
    |   |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
    |   |-- _depreciated.scss
    |
    |-- pro/
    |   |
    |   |-- picker/
    |   |   |-- _default.scss --> none
    |   |   |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
    |   |   |-- _default-date.scss --> _default.scss, free/_forms.scss
    |   |
    |   |-- sections/
    |   |   |-- _templates.scss --> _sidenav.scss
    |   |   |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
    |   |   |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
    |   |   |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _magazine.scss --> _badges.scss
    |   |   |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
    |   |
    |   |-- _variables.scss
    |   |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
    |   |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |-- _tabs.scss --> _cards.scss
    |   |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
    |   |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
    |   |-- _navbars.scss --> free/_navbars.scss  (PRO: )
    |   |-- _scrollspy.scss --> none
    |   |-- _lightbox.scss --> none
    |   |-- _chips.scss --> none
    |   |-- _msc.scss --> none
    |   |-- _forms.scss --> none
    |   |-- _radio.scss --> none
    |   |-- _checkbox.scss --> none
    |   |-- _material-select.scss --> none
    |   |-- _switch.scss --> none
    |   |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
    |   |-- _range.scss --> none
    |   |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
    |   |-- _autocomplete.scss --> free/_forms.scss
    |   |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
    |   |-- _parallax.scss --> none
    |   |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
    |   |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
    |   |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss 
    |   |-- _steppers.scss --> free/_buttons.scss
    |   |-- _blog.scss --> none
    |   |-- _toasts.scss --> free/_buttons.scss
    |   |-- _animations.scss --> none
    |   |-- _charts.scss --> none
    |   |-- _progress.scss --> none
    |   |-- _scrollbar.scss --> none
    |   |-- _skins.scss --> none
    |   |-- _depreciated.scss
    |
    `-- _custom-skin.scss
    `-- _custom-styles.scss
    `-- _custom-variables.scss
    `-- mdb.scss

  

Map of dependencies of JavaScript modules in MDBootstrap:


    Legend:

    '-->' means 'required'

    All files require jQuery and bootstrap.js

    js/
    ├── dist/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    └── vendor/
        ├── addons/
        │   ├── datatables.js
        │   └── datatables.min.js
        ├── chart.js
        ├── enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js --> vendor/jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js --> vendor/hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js --> vendor/picker.js
        ├── picker.js
        ├── picker-time.js --> vendor/picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js
  

Integrations with Angular, React or Vue

Apart from the standard Bootstrap integration (using jQuery), MDBootstrap also integrates with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue

Exclusive resources

MDBootstrap is a platform for web creators and MDB packages are only a part of it.

If you sign up you'll gain free access to other useful tools & resources including:

  • Community developed components & design projects
  • Technical support & community forum
  • CLI interface & free project hosting
  • Helpful articles & news agregators

...and much more!

Don't hesitate and sign up now!

Sign up now