Vue Bootstrap with Material Design - Powerful and free UI KIT

Overview

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

Initiate
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

Demo

Carousel

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.

Buttons

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

Cards

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

Alerts

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

Chart

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.

Footer

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

Sidenav

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

Modal

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.

Chrome
Chrome
Firefox
Firefox
Safari
Safari
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.

Chrome
Chrome
Firefox
Firefox
IE / Edge
Internet Explorer
Internet Explorer / Edge
Edge
Opera
Opera
Safari
Safari
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

Comments
  • Consider Packaging

    Consider Packaging

    Any chance this will be migrated into a package ?

    As in be able to include a collection of Vue components that use mdboostrap as a dependency enabling us to stay up to date on the latest components ?

    Right now you are advertising this as a UI Kit but, really its just a vue template with prebuilt mdboostrap Vue components. This doesn't help us if we just want to utilize the components in our own Vue Template

    I would suggest to pull out all of the UI Components and mixins etc ... (basically everything outside of the vue template) and package that up into something like mdboostrap-vue.

    Then in this template, you simply add that mdbootstrap-vue to your dependencies.

    This will allow users to either use your template (which can still get package updates) or use their preferred template and can simply npm install mdboostrap-vue --save. Which would also install all the dependencies that is needed for that package (mdboostrap, boostrap-4.0, etc ...)

    opened by poppabear8883 18
  • Facing Application error while deploy your package in Heroku

    Facing Application error while deploy your package in Heroku

    Hi,

    When I try to deploy your package to Herkoku, I'm facing the application error. The build has been succeed while Deploy the package. But It throws application error while view the site.

    What is the configuration that I'm missig? Because When I try to run in local, I can see that deafult page.

    Can you help me out Plzzz?

    opened by niti15 6
  • Adding to existing project does not work

    Adding to existing project does not work

    I've followed the Vue 5 min quick start at https://mdbootstrap.com/docs/vue/getting-started/quick-start/ and I was no able to add to an existing Vue project. Followed the steps but after adding a "mdb-btn" it does not render properly.

    Thanks in advance.

    opened by monkiki 5
  • I can't install the dependency into Vue.js

    I can't install the dependency into Vue.js

    Although the dependancy is said to be installed on the web console/ dependencies section, the file cannot be found in Node_Modules of Vue.js (am using Visual Studio Code)

    thus, I can't do the importing or anything, e.g. : this code section.

    import { animateOnScroll } from "mdbvue";
    
      export default {
        name: "AnimationsPage",
        directives: {
          animateOnScroll
        }
      }
    

    since I can't do the importing, due to mdbvue cannot be found. then that's mean there is a problem.

    will be great if I can receive some guidance, am a newbie.

    opened by KaitoXion 4
  • Navbar can not auto close when using in mobile

    Navbar can not auto close when using in mobile

    using navbar in mobile like below image show when tap the hamburger icon, the navbar menu open, then tap the menu(may be the 'css') the page navigate the right page, but the navbar menu can not auto close. you should tap the hamburger icon again.

    qq 20181104135423

    bug 
    opened by zmqcherish 4
  • The color-adjust shorthand is currently deprecated

    The color-adjust shorthand is currently deprecated

    I'm getting a console warning from AutoPrefixer. autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

    It looks like it's currently used here and here.

    It looks like this is an upstream issue in Bootstrap which should be fixed soon.

    opened by luc122c 3
  • Idea not resolve dependencies

    Idea not resolve dependencies

    image my package.json

    
    {
      "name": "vite-electron-builder",
      "private": true,
      "engines": {
        "node": ">=v16.13",
        "npm": ">=8.1"
      },
      "main": "packages/main/dist/index.cjs",
      "scripts": {
        "build": "npm run build:main && npm run build:preload && npm run build:renderer",
        "build:main": "cd ./packages/main && vite build",
        "build:preload": "cd ./packages/preload && vite build",
        "build:preload:types": "dts-cb -i \"packages/preload/tsconfig.json\" -o \"packages/preload/exposedInMainWorld.d.ts\"",
        "build:renderer": "cd ./packages/renderer && vite build",
        "compile": "cross-env MODE=production npm run build && electron-builder build --config .electron-builder.config.js --dir --config.asar=false",
        "test": "npm run test:main && npm run test:preload && npm run test:renderer && npm run test:e2e",
        "test:e2e": "npm run build && vitest run",
        "test:main": "vitest run -r packages/main --passWithNoTests",
        "test:preload": "vitest run -r packages/preload --passWithNoTests",
        "test:renderer": "vitest run -r packages/renderer --passWithNoTests",
        "watch": "node scripts/watch.js",
        "lint": "eslint . --ext js,ts,vue",
        "typecheck:main": "tsc --noEmit -p packages/main/tsconfig.json",
        "typecheck:preload": "tsc --noEmit -p packages/preload/tsconfig.json",
        "typecheck:renderer": "npm run build:preload:types && vue-tsc --noEmit -p packages/renderer/tsconfig.json",
        "typecheck": "npm run typecheck:main && npm run typecheck:preload && npm run typecheck:renderer"
      },
      "devDependencies": {
        "@typescript-eslint/eslint-plugin": "5.10.1",
        "@typescript-eslint/parser": "^5.10.1",
        "@vitejs/plugin-vue": "2.1.0",
        "@vue/test-utils": "2.0.0-rc.18",
        "cross-env": "7.0.3",
        "dts-for-context-bridge": "0.7.1",
        "electron": "16.0.8",
        "electron-builder": "22.14.5",
        "electron-devtools-installer": "3.2.0",
        "eslint": "8.8.0",
        "eslint-plugin-vue": "8.4.0",
        "happy-dom": "2.30.1",
        "nano-staged": "0.5.0",
        "playwright": "1.18.1",
        "simple-git-hooks": "2.7.0",
        "typescript": "^4.5.5",
        "vite": "2.7.13",
        "vitest": "0.2.5",
        "vue-tsc": "0.31.1"
      },
      "dependencies": {
        "electron-updater": "4.6.5",
        "mdb-vue-ui-kit": "^1.9.0",
        "vue": "3.2.29"
      }
    }
    
    

    I noticed that if you write the full path, it disappears. But it's inconvenient to write the full path to each item. Help // import { MDBBtn } from 'mdb-vue-ui-kit/src/components/free/components/MDBBtn';

    opened by WhiteBite 3
  • mdb-input value is not updated if model changes

    mdb-input value is not updated if model changes

    Hello there,

    <mdb-input type="text" v-model="someModel.property" /> If I change the someModel.property programatically the input never updates itself.

    Is there a workaround?

    Thanks!

    opened by thomsa 3
  • No NavbarItemDropdown Component

    No NavbarItemDropdown Component

    As stated in the docs there should clearly be a NavbarItemDropdown Component.

    <navbar class="indigo" name="Navbar" href="#"> 
      <navbar-collapse> 
        <navbar-nav> 
          <navbar-item href="#" :active="true">Home</navbar-item> 
          <navbar-item href="#">Features</navbar-item> 
          <navbar-item href="#">Pricing</navbar-item> 
          <navbar-item-dropdown label="Dropdown"> 
            <a class="dropdown-item" href="#">Action</a> 
            <a class="dropdown-item" href="#">Another action</a> 
            <a class="dropdown-item" href="#">Something else here</a> 
          </navbar-item-dropdown> 
        </navbar-nav> 
        <form class="form-inline"> 
          <input class="form-control mr-auto p-2" type="text" placeholder="Search" aria-label="Search"> 
        </form> 
      </navbar-collapse> 
    </navbar>
    

    Official stable release NOR master contains this component.

    This dependency was not found:
    
    * @/components/NavbarItemDropdown in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/App.vue
    

    And another good example why its important to package this up properly Referencing Issue #1

    opened by poppabear8883 3
  • [Bug] npm package missing source map

    [Bug] npm package missing source map

    I've recently started working with the npm version of mdb-vue (free). When trying to embed into an app I couldn't get it to work. After some debugging it seems like the mdbvue.umd.min.js.map is missing from the npm package. Contradictory it's provided by the featured/ recommended CDNs such as cdn.jsdelivr.net.

    The file seems also not to be defined in the /lib folder of this repository.

    Have I missed some building step? I added the mdb package with vue add mdb. Help is really appreciated. Thanks in advance

    opened by Chaostheorie 2
  • Using Nuxt popovers and tooltips don't work

    Using Nuxt popovers and tooltips don't work

    Using the steps from this post: all work except popovers and tooltips.

    <mdb-tooltip trigger="hover" :options="{placement: 'top'}">
            <span slot="tip">This will totally remove all your orders </span>
             <mdb-btn v-if="!isCartEmpty" @click.native="emptyCart">
    Empty cart</mdb-btn>
    </mdb-tooltip>
    

    I get this happening n the browser: Selection_494

    The browser console shows this:

    vendors.app.js:23110 error TypeError: Cannot read property '0' of undefined
        at VueComponent.mounted (vendors.app.js:35499)
        at invokeWithErrorHandling (commons.app.js:12255)
        at callHook (commons.app.js:14609)
        at Object.insert (commons.app.js:13538)
        at invokeInsertHook (commons.app.js:16732)
        at VueComponent.patch [as __patch__] (commons.app.js:16951)
        at VueComponent.Vue._update (commons.app.js:14338)
        at VueComponent.updateComponent (commons.app.js:14450)
        at Watcher.get (commons.app.js:14869)
        at Watcher.run (commons.app.js:14944)
    value @ vendors.app.js:23110
    

    is there a dependency that I'm missing. Modals work fine BTW. Thanks in advance.

    opened by adavie1 2
Releases(3.1.1)
Owner
MDBootstrap
Open Source UI Kits & Templates built using Bootstrap, Angular, React & Vue JS
MDBootstrap
🌟Shards Vue is a free, beautiful and modern Vue.js UI kit based on Shards.

Shards Vue is a free, beautiful and modern Vue.js UI kit based on Shards. Documentation & Demo • Official Page Getting Started Getting started with Sh

DesignRevision 396 Dec 16, 2022
🌟Shards Vue is a free, beautiful and modern Vue.js UI kit based on Shards.

Shards Vue is a free, beautiful and modern Vue.js UI kit based on Shards. Documentation & Demo • Official Page Getting Started Getting started with Sh

DesignRevision 396 Dec 16, 2022
Business React components for Bootstrap and Material-UI

DevExtreme Reactive · DevExtreme Reactive is a set of business React components that deeply integrate with Bootstrap and Material-UI libraries. Common

Developer Express Inc. 1.9k Dec 25, 2022
:diamonds: A modular and customizable UI library based on Material Design and Vue

BalmUI Next Generation Material UI for Vue.js Introduction BalmUI is a modular and customizable Material Design UI library for Vue.js. ?? NOW, balm-ui

BalmJS 428 Jan 4, 2023
Vue2 material design icons with easy access to icons names and types

vue-material-icons Vue2 material design icons with easy access to icons names and types (all available in IDE hints). Hints were tested on IntelliJ ID

Dominik Betka 0 May 11, 2022
Material design for Vue.js

Material Design for Vue.js Vue Material is Simple, lightweight and built exactly according to the Google Material Design specs Build well-designed app

Vue Material 9.7k Jan 5, 2023
Material Design styled components for Vue.js

Material Components Vue Material Design styled components for Vue.js Material-components-vue integrates the mdc-web (by google) vanilla components fol

Mats Pfeiffer 307 Dec 25, 2022
Bootstrap4 Material Design Components for Vue.js

Vue MDBootstrap Vue MDBootstrap is a collection of VueJs components and built according to the Google Material Design specs. They can be used to built

Ahmad Fajar 3 Dec 23, 2022
Material Design UI library for Vuejs 2.0

Muse-UI Material Design UI library for Vuejs 2.0 Installation Muse-UI is available as an npm package npm install muse-ui -S yarn add muse-ui Usage imp

Muse UI 8.3k Dec 27, 2022
Build material design interfaces in record time... without stress for devs... 🍺💛

Beercss Build material design interfaces in record time... ...without stress for devs ?? ?? Cheers, www.beercss.com Why? It's based on latest material

beercss 359 Jan 3, 2023
ICIJ's Design System for Bootstrap 4 and Vue.js

Murmur is ICIJ's Design System for Bootstrap 4 and Vue.js Status CI checks Code Climate NPM version NPM downloads Installation guide If you are using

The International Consortium of Investigative Journalists 15 Nov 15, 2022
A fresh and flat UI-Kit specially for desktop application with Vue.js 2.0

AT-UI Style AT-UI Style is an ui component library based on Flexbox, be used for AT-UI Install npm install at-ui-style Usage import 'at-ui-style' Cont

null 96 Jan 4, 2023
N3-components , Powerful Vue UI Library.

N3-components - Powerful Vue Library. N3 components library is built with Vue.js, is a powerful library for frontend or full-stack engineers to build

null 1k Dec 17, 2022
🐉 Material Component Framework for Vue

Supporting Vuetify Vuetify is a MIT licensed project that is developed and maintained full-time by John Leider and Heather Leider; with support from t

vuetify 36.2k Dec 30, 2022
Vue wrapper arround Material Components for the Web

Material Components for Vue Vue components (Vue 3.0) for Material Web Components which uses the Using Foundations and Adapters integration technique.

null 102 Dec 20, 2022
The material-ripple directive for Vue that actually works

v-wave The material-ripple directive for Vue that actually works Support for both Vue 2 and Vue 3! Why did I make this? Because every ripple-plugin I'

Justin Taddei 167 Dec 29, 2022
📕 Material Components for @vuejs

@lbzui/vue Material Components for Vue.js @lbzui/vue is now available in BETA, but you can read in more depth on API documentation and documentation w

LBZUI 40 Jul 10, 2022
BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.

With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive impl

BootstrapVue 14.2k Dec 31, 2022