<a href="http://mdbootstrap.com/docs/angular/getting-started/download/"><img src="https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-angular2.png"></a>
# Angular Bootstrap with Material Design

  <a href="https://npmcharts.com/compare/angular-bootstrap-md?minimal=true"><img src="https://img.shields.io/npm/dm/angular-bootstrap-md.svg" alt="Downloads"></a>
  <a href="https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design/blob/master/license.pdf"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a>
  <a href="https://badge.fury.io/js/angular-bootstrap-md"><img src="https://badge.fury.io/js/angular-bootstrap-md.svg" alt="npm"></a>
  <a href="https://twitter.com/intent/tweet/?text=Thanks+@mdbootstrap+for+creating+amazing+and+free+Material+Design+for+Bootstrap+4+UI+KIT%20https://mdbootstrap.com/docs/angular/&hashtags=angular,code,webdesign,bootstrap"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"></a>

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

**Please read [contribution rules](https://github.com/mdbootstrap/bootstrap-material-design/blob/master/CONTRIBUTING.md) before starting your improvements in order to help us make the cooperation and reviewing experience as pleasant and effective as possible**

Trusted by <b>2 000 000+</b> developers & designers. Used by companies like
<table>
  <tbody>
    <tr>
      <td><img src="https://mdbootstrap.com/img/logo/brands/nike.png" style="width: 10px;"></td>
      <td><img src="https://mdbootstrap.com/img/logo/brands/amazon.png" style="width: 10px;"></td>
      <td><img src="https://mdbootstrap.com/img/logo/brands/sony.png" style="width: 10px;"></td>
      <td><img src="https://mdbootstrap.com/img/logo/brands/samsung.png"  style="height: 40px">
      <td><img src="https://mdbootstrap.com/img/logo/brands/airbus.png" style="height: 40px">
      <td><img src="https://mdbootstrap.com/img/logo/brands/yahoo.png"  style="height: 40px">
      <td><img src="https://mdbootstrap.com/img/logo/brands/deloitte.png" style="height: 40px"></div>
      <td><img src="https://mdbootstrap.com/img/logo/brands/ge.png" style="height: 40px">
      <td><img src="https://mdbootstrap.com/img/logo/brands/kpmg.png" style="height: 40px">
      <td><img src="https://mdbootstrap.com/img/logo/brands/unity.png" style="height: 40px">
      <td><img src="https://mdbootstrap.com/img/logo/brands/ikea.png" style="max-height: 40px">
      <td><img src="https://mdbootstrap.com/img/logo/brands/aegon.png" style="height: 40px">
    </tr>
   </tbody>
</table>

-------

# More Web Development Technologies

|⠀ MDBootstrap jQuery⠀ |⠀    MDBootstrap React ⠀­  |⠀ ­   MDBootstrap Vue⠀  ­ | ­­ MDBootstrap 5   ­­|
| --------------- | ------------------ | ------------- | ------------- |
| ­­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­­   [![MDB jQuery](https://mdbootstrap.com/img/Marketing/general/logo/small/jquery.png")](https://mdbootstrap.com/docs/jquery/) ­­ ­­­­ ­­­ |⠀   ­­ ­­­ ­­­ ­­­ ­­­ ­­­   [![MDB React](https://mdbootstrap.com/img/Marketing/general/logo/small/react.png)](https://mdbootstrap.com/docs/react/)  ⠀­­ ­­­ ­­­ ­­­ ­­­ ­­­  |⠀ ­­ ­­­ ­­­ ­­­ ­­­ ­­­   [![MDB Vue](https://mdbootstrap.com/img/Marketing/general/logo/small/vue.png)](https://mdbootstrap.com/docs/vue/)    ­­ ­­­ ­­­ ­­­ ­­­ ­­­   |    ­­­ ­­­ ­­­ ­­­ ­­­ ­­­      [![MDB 5](https://mdbootstrap.com/wp-content/uploads/2020/08/bootstrap5-logo.png)](https://mdbootstrap.com/docs/standard/)   ⠀   ­­ ­­­ ­­­ ­­­ ­­­ ­­­


# Quick Start 

 <a href="https://youtu.be/J3M0QS6YB0w"><img src="https://mdbootstrap.com/wp-content/uploads/2020/08/angular-play-yt.png"></a>

According to your preference, you can follow a [video](https://youtu.be/J3M0QS6YB0w) or [written version](https://mdbootstrap.com/docs/angular/getting-started/quick-start/)

Also, you can install MDB Free using NPM [installation guide](https://mdbootstrap.com/docs/angular/getting-started/quick-start/)

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

<table>
  <tbody>
    <tr>
      <td align="center" valign="middle">
        <a href="https://mdbootstrap.com/cli/">
          <img
            src="https://mdbootstrap.com/img/Marketing/products/cli/cli-free.jpg"
            style="width: 60px;">
        </a>
      </td>
      <td align="left" valign="top">
        <b>Initiate</b>
        <br />
        With MDB CLI you can start a new project within seconds! Use <b><code>mdb init</code></b> command and start with a pre-set configuration!
      </td>
      <td align="left" valign="top">
        <b>Publish and host</b>
        <br />
        Make your project visible with <b><code>mdb publish</code></b>, no need to store your code, simply get the link and share it with the world!
      </td>
        <td align="center">
          <b><a href="https://mdbootstrap.com/cli/">Get started</a> </p>
        </td>
    </tr>
  </tbody>
</table>

# Demo

### Carousel

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

<a href="https://mdbootstrap.com/docs/angular/advanced/carousel/" alt="Bootstrap 5" rel="dofollow">
  <p align="center">
    <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-carousel-mask.gif">
  </p>
</a>

### Loader / Spinner

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

<a href="https://mdbootstrap.com/docs/angular/components/spinners/" alt="Bootstrap 5" rel="dofollow">
  <p align="center">
    <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-loader.gif">
  </p>
</a>

<a href="https://mdbootstrap.com/docs/angular/components/spinners/" alt="Bootstrap 5" rel="dofollow">
  <p align="center">
    <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-color-spinners.gif">
  </p>
</a>

<a href="https://mdbootstrap.com/docs/angular/components/spinners/" alt="Bootstrap 5" rel="dofollow">
  <p align="center">
    <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-multicolor.gif">
  </p>
</a>

<a href="https://mdbootstrap.com/docs/angular/components/spinners/" alt="Bootstrap 5" rel="dofollow">
  <p align="center">
    <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-crazyloader.gif">
  </p>
</a>

### Buttons

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

<a href="https://mdbootstrap.com/docs/angular/components/buttons/" alt="Bootstrap 5" rel="dofollow">
  <p align="center">
    <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-buttons.gif">
  </p>
</a>

<a href="https://mdbootstrap.com/docs/angular/components/buttons/" alt="Bootstrap 5" rel="dofollow">
  <p align="center">
    <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-social-buttons.png">
  </p>
</a>

### Cards

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

<a href="https://mdbootstrap.com/docs/angular/components/cards/" alt="Bootstrap 5" rel="dofollow">
  <p align="center">
    <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-cards-cascading.png">
  </p>
</a>

<a href="https://mdbootstrap.com/docs/angular/components/cards/" alt="Bootstrap 5" rel="dofollow">
  <p align="center">
    <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-fancy-cards.gif">
  </p>
</a>


<a href="https://mdbootstrap.com/docs/angular/components/cards/" alt="Bootstrap 5" rel="dofollow">
  <p align="center">
    <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-cards-overlay.png">
  </p>
</a>

### Alerts 

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

<a href="https://mdbootstrap.com/docs/angular/components/cards/" alt="Bootstrap 5" rel="dofollow">
  <p align="center">
    <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-alerts.png">
  </p>
</a>

### Chart

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

<a href="https://mdbootstrap.com/docs/angular/advanced/charts/" alt="Bootstrap 5" rel="dofollow">
  <p align="center">
    <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-charts.gif">
  </p>
</a>

<a href="https://mdbootstrap.com/docs/angular/advanced/charts/" alt="Bootstrap 5" rel="dofollow">
  <p align="center">
    <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-charts-bar.gif">
  </p>
</a>

### Hamburger Menu

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

<a href="https://mdbootstrap.com/docs/angular/navigation/hamburger-menu/" alt="Bootstrap 5" rel="dofollow">
  <p align="center">
    <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-hamburgermenu.gif">
  </p>
</a>

### Footer

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

<a href="https://mdbootstrap.com/docs/angular/navigation/footer/" alt="Bootstrap 5" rel="dofollow">
  <p align="center">
    <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-footer.png">
  </p>
</a>

### Sidenav

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

<a href="https://mdbootstrap.com/docs/angular/navigation/sidenav/" alt="Bootstrap 5" rel="dofollow">
  <p align="center">
    <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-sidenav.gif">
  </p>
</a>

### Modal

<p>Angular Bootstrap modal is lightweight, but powerful & multipurpose popup. Learn how to manipulate size, styles & position. Multiple examples and detailed tutorial.</p>

<a href="https://mdbootstrap.com/docs/angular/modals/basic/" alt="Bootstrap 5" rel="dofollow">
  <p align="center">
    <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-modal.gif">
  </p>
</a>

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

|                   | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | Android Browser & WebView | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br> 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.

|         | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br> Internet Explorer | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Internet Explorer / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br> Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>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](https://mdbootstrap.com/docs/angular/getting-started/download/), [Freebies](https://mdbootstrap.com/freebies/), [Premium Templates](https://mdbootstrap.com/templates/) & [snippet editor](https://mdbootstrap.com/snippets/)

## Connect with us on

[Twitter](https://twitter.com/MDBootstrap) | [Facebook](https://www.facebook.com/mdbootstrap) | [Pinterest](https://pl.pinterest.com/mdbootstrap) | [Dribbble](https://dribbble.com/mdbootstrap) | [LinkedIn](https://www.linkedin.com/company/material-design-for-bootstrap) | [YouTube](https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA)

## Support MDB developers

- Star our GitHub repo
- Create pull requests, submit bugs, suggest new features or documentation updates
- Follow us on [Twitter](https://twitter.com/mdbootstrap)
- Like our page on [Facebook](https://www.facebook.com/mdbootstrap)

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](https://mdbootstrap.com/pricing/angular/pro/)
