Angular Bootstrap with Material Design - Powerful and free UI KIT

  • By MDBootstrap
  • Last update: Mar 21, 2022
  • Comments: 7

Angular Bootstrap with Material Design

Downloads License npm

Built with latest version of Angular, Bootstrap 4 and TypeScript. CLI version available. Absolutely no jQuery. 400+ material UI elements, 600+ material icons, 74 CSS animations, TypeScript modules, SASS files and many more. All fully responsive. All compatible with different browsers.

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 jQuery⠀ ⠀ MDBootstrap React ⠀­ ⠀ ­ MDBootstrap Vue⠀ ­ ­­ MDBootstrap 5 ­­
­­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­­ MDB jQuery ­­ ­­­­ ­­­ ⠀ ­­ ­­­ ­­­ ­­­ ­­­ ­­­ MDB React ⠀­­ ­­­ ­­­ ­­­ ­­­ ­­­ ⠀ ­­ ­­­ ­­­ ­­­ ­­­ ­­­ 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



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

Loader / Spinner

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


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


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


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


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

Hamburger Menu

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


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


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


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

Angular Bootstrap with Material Design PRO



  • 1

    Input Field with Label has no border

    I have the following html-code:

    <div class="d-flex">
        <input type="number" id="myInput" class="form-control"">
        <label for="myInput" class="form-label">Input Label</label>

    Without a label, there is a border but with label the border disappears. I have read that I need to insert this code:

    document.querySelectorAll('.form-outline').forEach((formOutline) => {
        new mdb.Input(formOutline).init();

    But this is not the angular way of coding and mdb.Input doesn't even exist.

    So how can I initialize a mdb Input with Angular?

  • 2

    [BUG] mdb-angular-ui-kit installation fails on non-SCSS project

    I tried to install mdb-angular-kit to a test application that does not use SCSS. After the installation I tried to start the test application and got an error:

    ./src/styles.css - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
    ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
    (1:1) postcss-import: /Users/julian/repos/mdbTest/node_modules/mdb-angular-ui-kit/assets/scss/mdb.scss Unknown word
    > 1 | // CORE FUNCTIONS
        | ^
      2 | @import './bootstrap/functions';
      3 | @import './free/functions';
        at processResult (/Users/julian/repos/mdbTest/node_modules/webpack/lib/NormalModule.js:701:19)
        at /Users/julian/repos/mdbTest/node_modules/webpack/lib/NormalModule.js:807:5
        at /Users/julian/repos/mdbTest/node_modules/loader-runner/lib/LoaderRunner.js:399:11
        at /Users/julian/repos/mdbTest/node_modules/loader-runner/lib/LoaderRunner.js:251:18
        at context.callback (/Users/julian/repos/mdbTest/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
        at Object.loader (/Users/julian/repos/mdbTest/node_modules/postcss-loader/dist/index.js:94:7)
        at runMicrotasks (<anonymous>)
        at processTicksAndRejections (internal/process/task_queues.js:94:5)

    Steps to reproduce

    1. ng new mdbTest
    ? Would you like to add Angular routing? No
    ? Which stylesheet format would you like to use? CSS
    1. cd mdbTest
    2. npm i mdb-angular-ui-kit
    3. ng add mdb-angular-ui-kit
    ? Import all MDB modules? Yes
    ? Set up Roboto Font? No
    ? Set up Angular browser animations? Yes
    ? Set up Font Awesome? No
    ? Set up Charts? No
    1. npm start. Error occurs.

    If I look into the styles.css I see an SCSS import:

    @import '~mdb-angular-ui-kit/assets/scss/mdb.scss';

    When I remove it, the application runs, but without any styles.

    Expected behaviour

    I expect that the toolkit works on non-SCSS projects and that all dependencies should be installed. E.g. if non-SCSS users need mdb-ui-kit it should be installed automatically. If non-SCSS users need additional styles placed to the angular.json, it should be placed automatically.


      "name": "mdb-test",
      "version": "0.0.0",
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "watch": "ng build --watch --configuration development",
        "test": "ng test"
      "private": true,
      "dependencies": {
        "@angular/animations": "~12.0.3",
        "@angular/cdk": "^12.0.0",
        "@angular/common": "~12.0.3",
        "@angular/compiler": "~12.0.3",
        "@angular/core": "~12.0.3",
        "@angular/forms": "~12.0.3",
        "@angular/platform-browser": "~12.0.3",
        "@angular/platform-browser-dynamic": "~12.0.3",
        "@angular/router": "~12.0.3",
        "mdb-angular-ui-kit": "^1.0.0-beta6",
        "mdb-ui-kit": "^3.8.0",
        "rxjs": "~6.6.0",
        "tslib": "^2.1.0",
        "zone.js": "~0.11.4"
      "devDependencies": {
        "@angular-devkit/build-angular": "~12.0.3",
        "@angular/cli": "~12.0.3",
        "@angular/compiler-cli": "~12.0.3",
        "@types/jasmine": "~3.6.0",
        "@types/node": "^12.11.1",
        "jasmine-core": "~3.7.0",
        "karma": "~6.3.0",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage": "~2.0.3",
        "karma-jasmine": "~4.0.0",
        "karma-jasmine-html-reporter": "^1.5.0",
        "typescript": "~4.2.3"
  • 3

    Replace license.pdf with a text file

    Hi, there's a PDF file in the published artifact. This increases the artifact size and pollutes the automatically generated 3rdpartylicenses.txt file provided by angular.

    Could you please replace the PDF with a normal license file like this.

    It's in the mdb-angular-ui-kit/projects/mdb-angular-ui-kit/ directory.

    Thanks in advance!

    Regards Christian

  • 4

    Angular 12 production build breaking styles

    When building using ng build --prod, or the new ng build --configuration production, a style tag is addded to the head element that forces the body min-width to be 992px!important, and completely breaks the responsive layout.

    In an attempt to identify the culprit, I removed styles from angular.json until the min-width wasn't added, and found that node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss was the cause.

    Expected behavior

    The CSS should render the same as when built without the --prod flag.

    Actual behavior

    The following CSS is injected into the head, breaking the page. Note the body{min-width:992px!important;} at the end.

    @charset "UTF-8";:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}*,:after,:before{box-sizing:border-box;}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff;}@page {size:a3;}body{min-width:992px!important;}

    Your working environment and MDB version information

    • angular-bootstrap-md - 11.1.0
    • angular - 12.0.4

    Resources (screenshots, code snippets etc.)



      "dependencies": {
        "@angular/animations": "~12.0.4",
        "@angular/cdk": "^11.2.13",
        "@angular/common": "~12.0.4",
        "@angular/compiler": "~12.0.4",
        "@angular/core": "~12.0.4",
        "@angular/fire": "^6.1.5",
        "@angular/forms": "~12.0.4",
        "@angular/localize": "^12.0.4",
        "@angular/platform-browser": "~12.0.4",
        "@angular/platform-browser-dynamic": "~12.0.4",
        "@angular/router": "~12.0.4",
        "@angular/service-worker": "~12.0.4",
        "@fortawesome/fontawesome-free": "^5.15.3",
        "@types/uuid": "^8.3.0",
        "@zxing/browser": "0.0.9",
        "@zxing/library": "^0.18.6",
        "@zxing/ngx-scanner": "^3.1.3",
        "angular-bootstrap-md": "^11.1.0",
        "angularx-qrcode": "^11.0.0",
        "animate.css": "^4.1.1",
        "eslint": "^7.28.0",
        "firebase": "^8.3.3",
        "hammerjs": "^2.0.8",
        "rxjs": "^7.1.0",
        "tslib": "^2.3.0",
        "uuid": "^8.3.2",
        "zone.js": "~0.11.4"
  • 5

    mdbTableSort does all capitals first, then lowercase

    Expected behavior

    I would expect a sort to sort Alphabetically ex. ALPHA Alpha alpha BETA Beta beta GAMMA Gamma gamma

    Actual behavior

    • if a field begins with a lowercase, it sorts them after ALL the ones with capitals But how it sorts is ALPHA Alpha BETA Beta GAMMA Gamma alpha beta gamma

    Your working environment and MDB version information

    Angular 9 / [email protected]

    Resources (screenshots, code snippets etc.)

    For every question of technical nature, in order to get the most detailed answer as soon as possible, ask on our dedicated Support Forum

  • 6

    License is PDF and copyright notice missing

    I'm submitting a...

    [ ] Regression (a behavior that used to work and stopped working in a new release)
    [ ] Bug report  
    [ ] Performance issue
    [ ] Feature request
    [x] Documentation issue or request
    [ ] Support request
    [x] Other... Please describe:

    Current behavior

    Your license is a PDF with just a license name and no text. It can not be parsed by GitHub and Open Source management tools.

    Also no copyright notice is given in your license text. Since the MIT license requires the preservation of the copyright notice at distribution, you are making it hard to impossible to use your library legally in Germany where copyright can not be waivered. I'm not a lawyer, this is just what they tell me ;-)

    Expected behavior

    Your license is in raw text format and includes the license text and copyright notice. Maybe this link helps:

    Minimal reproduction of the problem with instructions


    What is the motivation / use case for changing the behavior?

    A big company's compliance department is refusing to allow the use of an application using your library because your copyright notice is missing.

  • 7

    Dropdown with `container="body"` is broken

    Code example

    <li mdbDropdown class="nav-item dropdown" container="body">
        <a mdbDropdownToggle
               class="nav-link dropdown-toggle"
        <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
              <a mdbWavesEffect
                 class="dropdown-item waves-light"

    Error: ERROR TypeError: Cannot read property 'parentNode' of null