Vue Bootstrap with Material Design - Powerful and free UI KIT

  • By MDBootstrap
  • Last update: Jul 28, 2022
  • Comments: 3

Vue Bootstrap with Material Design

Downloads License npm

Based on the latest Bootstrap 4 and Vue. 400+ material UI elemens, 600+ material icons, 74 CSS animations, SASS files, templates, tutorials and many more. Free for personal and commercial use.

Please read contribution rules before starting your improvements in order to help us make the cooperation and reviewing experience as pleasant and effective as possible

Trusted by 2 000 000+ developers & designers. Used by companies like

More Web Development Technologies

⠀ MDBootstrap Angular⠀ ⠀ MDBootstrap jQuery ⠀­ ⠀ ­ MDBootstrap React⠀ ­ ­­ MDBootstrap 5 ­­
­­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­­ MDB Angular ­­ ­­­­ ­­­ ⠀ ­­ ­­­ ­­­ ­­­ ­­­ ­­­ MDB jQuery ⠀­­ ­­­ ­­­ ­­­ ­­­ ­­­ ⠀ ­­ ­­­ ­­­ ­­­ ­­­ ­­­ MDB Vue ­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­ MDB 5 ⠀ ­­ ­­­ ­­­ ­­­ ­­­ ­­­

Quick Start

According to your preference, you can follow a video or written version

Also, you can install MDB Free using NPM installation guide

MDB CLI - the fastest way to create and host MDB projects

With MDB CLI you can start a new project within seconds! Use mdb init command and start with a pre-set configuration!
Publish and host
Make your project visible with mdb publish, no need to store your code, simply get the link and share it with the world!
Get started



Vue Bootstrap carousel is responsive and interactive slideshow which is created for presenting content, especially images and videos.

Loader / Spinner

Vue Bootstrap loader is animation that is used to keep visitors entertained while the page is still loading, which helps to increase the user experience.


Vue Bootstrap buttons are components which are triggering a desirable user interaction. Easy to customize in terms of size, shape, and color.


Vue Bootstrap cards are components which display content build of different elements with characteristic shadows, depth and hover effects.


Vue Bootstrap alerts are feedback messages which are displayed after specific actions preceded by the user. Length of the text is not limited.


Vue Bootstrap charts are graphical representations of data. Charts come in different sizes and shapes: bar, line, pie, radar, polar and more.

Hamburger Menu

Vue Bootstrap Hamburger menu is a navigation with additional hamburger looks-like icon which activates hidden menu elements in Navbar or Sidenav.


A footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements.


Vue Bootstrap sidenav is a vertical navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms.


Vue Bootstrap modal is lightweight, but powerful & multipurpose popup. Learn how to manipulate size, styles & position. Multiple examples and detailed tutorial.

Supported browsers

MDBootstrap supports the latest, stable releases of all major browsers and platforms.

Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform’s web view API, are not explicitly supported. However, MDBootstrap should (in most cases) display and function correctly in these browsers as well.

Mobile devices

Generally speaking, MDBootstrap supports the latest versions of each major platform’s default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, Amazon Silk) are not supported.

Android Browser & WebView IE / Edge
Miscrosoft Edge
Android Supported Supported N/A Android v5.0+ supported Supported
iOS Supported Supported Supported N/A Supported
Windows 10 Mobile N/A N/A N/A N/A Supported

Desktop browsers

Similarly, the latest versions of most desktop browsers are supported.

IE / Edge
Internet Explorer
Internet Explorer / Edge
Mac Supported Supported N/A N/A Supported Supported
Windows Supported Supported N/A Supported Supported Not supported

Useful resources

Here you'll find more useful resources, like Getting Started, Freebies, Premium Templates & snippet editor

Connect with us on

Twitter | Facebook | Pinterest | Dribbble | LinkedIn | YouTube

Support MDB developers

  • Star our GitHub repo
  • Create pull requests, submit bugs, suggest new features or documentation updates
  • Follow us on Twitter
  • Like our page on Facebook

A BIG ❤️ thank you to all our users ❤️ who are working with us to improve the software. We wouldn't be where we are without you.

PRO version:

Vue Bootstrap with Material Design PRO



  • 1

    MDBTabs doesn't change active Tab id

    I used Tabs like this

    <MDBTabs v-model="selectedTabIndexData">

    And I need to change the active tab by changing the selectedTabIndexData ( triggering the v-model). But No matter of what It doesn't change the Active Tab

  • 2

    Any chance you can publish @types/mdb-vue-ui-kit so that TypeScript doesn't choke in development?


    import { MDBCarousel } from "mdb-vue-ui-kit";

    Causes the following error:

    TS7016: Could not find a declaration file for module 'mdb-vue-ui-kit'. 'D:/dev/testprj/node_modules/mdb-vue-ui-kit/js/mdb.umd.min.js' implicitly has an 'any' type. Try npm i --save-dev @types/mdb-vue-ui-kit if it exists or add a new declaration (.d.ts) file containing declare module 'mdb-vue-ui-kit';

        10 | <script lang="ts">
        11 | import { defineComponent, ref } from "vue";
      > 12 | import { MDBCarousel } from "mdb-vue-ui-kit";
           |                             ^^^^^^^^^^^^^^^^

    I am using Vue3 with Typescript. I believe the addition of the @types/mdb-vue-ui-kit will clear this up.

  • 3

    Question about PRO version timeline

    I was just wondering if there is a timeline for the PRO version. I would certainly like to purchase a PRO version for all the additional features but don't want to buy it now because this MDB version for Vue doesn't have them. Do you have a timeline on when the PRO version will be available? Or should I buy the PRO version now and use the PRO straight javascript for the components that have not been ported to MDB yet?

    Thanks in advance