Tags, Labels & Badges

Bootstrap Tags, Labels & Badges

Bootstrap tags 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.

Basic example

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

Example heading New

HTML



        <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.

HTML



        <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.

HTML



        <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

HTML



        <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. 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

Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.

Default Primary Secondary Success Danger Warning Info Light Dark

HTML



        <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>

Links

Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.

Default Primary Secondary Success Danger Warning Info Light Dark

HTML



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

Badges with icons

HTML



        <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-wheelchair" 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>

Tags within table MDB Pro component

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

#	Name	Add label if	Remove label if
1	I am light blue color	Trigger name 1 Add	Trigger name 1 Trigger name 2 Add
2	I am light blue color	Add	Trigger name 1 Add
3	I am light blue color	Trigger name 1 Add	Trigger name 1 Trigger name 2 Add

HTML
CSS



        <!-- 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-success">Get it now <i class="fa fa-diamond 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 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>
        <!-- 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);
        }

Chips

Chips with avatars MDB Pro component

John Doe

Anna Smith

Lara Lim

Tom Dark

Kate Horwitz

Danny Clark

HTML
CSS



          <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>



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

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

HTML



          <div class="chip pink lighten-4">
            Tag 220
            <i class="close fa fa-times"></i>
          </div>

Colorful chips MDB Pro component

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

Caroline Smith

Adam Grey

Danny Moore

Daisy Sun

Martha Lores

Alexandra Deyn

Olaf Horwitz

Mary-Kate Dare

The 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

HTML
CSS



          <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>



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

Javascript usage MDB Pro component

Adding tags

Type a name and press enter to add tag. Click X to remove it.

HTML
JavaScript



          <div class="chips chips-placeholder"></div>



          $('.chips-placeholder').materialChip({
            placeholder: 'Enter a tag',
            secondaryPlaceholder: '+Tag',
          });



          <div class="chips chips-initial"></div>



          $('.chips-initial').materialChip({
            data: [{
              tag: 'Tag 1',
            }, {
              tag: 'Tag 2',
            }, {
              tag: 'Tag 3',
            }],
          });

Chip data object

JavaScript



          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

JavaScript



          $('.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

JavaScript



          $('.chips-initial').materialChip('data');
          $('.chips-initial').materialChip('options');

Getting started : download & setup

Download

All the components and features are part of MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.

Click the button below to go to Download Page, where you can download MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires MDB Pro package.

Click the button below to learn more about MDBbootstrap Pro package

MDBootstrap Pro

Tutorials

If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.

5 min Quick Start Full Tutorial

Compilation

To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.

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

Compilation & Customization tutorial

If you need additional help to compile your custom package, use our Compilation & Customization tutorial

Compilation & Customization tutorial

Integrations with Angular, React or Vue

Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue