# bootstrap-material-design

**Repository Path**: mdbootstrap/bootstrap-material-design

## Basic Information

- **Project Name**: bootstrap-material-design
- **Description**: Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://mdbootstrap.com
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2019-06-18
- **Last Updated**: 2024-05-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
  <a href="https://mdbootstrap.com/docs/jquery/getting-started/download/">
    <img src="https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-r.png">
  </a>
</p>

<h1 align="center">Material Design for Bootstrap 4</h1>

<p align="center">
  <b>400+</b> material UI elements, <b>600+</b> material icons, <b>74</b> CSS animations, SASS files, templates, tutorials and many more. Free for personal and commercial use. Available jQuery, Angular, React and Vue versions
</p>
<p align="center">
  Trusted by <b>1 000 000+</b> developers & designers. Used by such a companies like Nike, Samsung, Amazon, Ikea, Sony and NASA.
</p>

<p align="center">	
  <a href="https://npmcharts.com/compare/mdbootstrap?minimal=true"><img src="https://img.shields.io/npm/dm/mdbootstrap.svg" alt="Downloads"></a>
  <a href="https://github.com/mdbootstrap/bootstrap-material-design/blob/master/License.pdf"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a>	
  <a href="https://cdnjs.com/libraries/mdbootstrap"><img src="https://img.shields.io/cdnjs/v/mdbootstrap.svg" alt="cdnjs"></a>	
  <a href="https://badge.fury.io/js/mdbootstrap"><img src="https://badge.fury.io/js/mdbootstrap.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/jquery/&hashtags=javascript,code,webdesign,bootstrap"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"></a>	
</p>

<p align="center">
  <a href="https://mdbootstrap.com/docs/jquery/getting-started/download/" target="_blank">
    <img width="600" src="https://mdbootstrap.com/img/Marketing/products/jquery/mdb-free.jpg" alt="logo">
  </a>
</p>

|         | Highlights  |                         |
|-----------------------------------------|------------------|------------------------------|
|💎 |Thanks to MDB you can take advantage of all feature of latest version of Bootstrap 4.⠀⠀⠀⠀⠀ | ✔️ |
|🎓 |We care about the development of our users. We have prepared numerous tutorials, which allow you to learn how to use MDB as well as other technologies.⠀⠀⠀⠀⠀⠀⠀⠀⠀ | ✔️ |
|📱 |It doesn't matter whether your project will be displayed on a desktop, laptop, tablet or mobile phone. MDB looks great on every type of screen.| ✔️ |
|🗺️ |Need inspiration? Use one of our predefined templates for free.⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀ | ✔️| 
|💽 |5 minutes, a few clicks and... done! You will be surprised at how easy it is.⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀ ⠀⠀⠀| ✔️ |
|💄 |Using MDB is straightforward and pleasant. Our flexible components allow deep customization. You will easily be able to adjust each component to suit your needs.| ✔️ |
|🆓 |Our license is user-friendly. Feel free to use MDB for both private as well as commercial projects.| ✔️ |
|📑 |We put detailed user-friendly documentation at your disposal. It will help you to implement your ideas easily.| ✔️ |

________


## Table of Contents

* [Versions](#versions) 
* [Demo](#demo)
* [Quick Start](#quick-start)
* [How to install](#how-to-install)
* [Additional tutorials](#additional-tutorials)
* [MDBootstrap on CDNJS](#mdbootstrap-on-cdnjs)
* [Documentation](#documentation)
* [Supported Browsers](#supported-browsers)
* [Contributing](#contributing)
* [Social Media](#social-media)
* [Useful Links](#useful-links)

________


# Versions

[<img src="https://mdbootstrap.com/img/Marketing/general/logo/small/angular.png"/>](https://mdbootstrap.com/docs/angular/)[<img src="https://mdbootstrap.com/img/Marketing/general/logo/small/react.png"/>](https://mdbootstrap.com/docs/react/)[<img src="https://mdbootstrap.com/img/Marketing/general/logo/small/vue.png"/>](https://mdbootstrap.com/docs/vue/)

# Demo

 - [Main demo](https://mdbootstrap.com/docs/jquery/components/demo/)


# Quick Start

 - [Written Tutorial](https://mdbootstrap.com/education/bootstrap/quick-start/)

 - [Video Tutorial](https://www.youtube.com/watch?v=cXTThxoywNQ&t=9s)


# How to install

You can install MDBootstrap using NPM:

```
npm install mdbootstrap
```

# Additional tutorials

 - [MDB - Bootstrap tutorial](https://mdbootstrap.com/education/bootstrap/)

 - [MDB - WordPress tutorial](https://mdbootstrap.com/education/wordpress/)


# MDBootstrap on CDNJS:

`<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.6/css/mdb.min.css" />`

`<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.6/js/mdb.min.js"></script>`

# Documentation

 - [Huge, detailed documentation available online](https://mdbootstrap.com/)


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


# Contributing

Please read [CONTRIBUTING.md](https://github.com/mdbootstrap/bootstrap-material-design/blob/master/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.


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

________

# Useful Links

- [Getting Started](https://mdbootstrap.com/docs/jquery/getting-started/download/)

- [5 min quick start](https://mdbootstrap.com/education/bootstrap/quick-start/)

- [Freebies](https://mdbootstrap.com/freebies/)

- [Premium Templates](https://mdbootstrap.com/templates/)

________


# Social Media

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


________

# PRO version

 - [Material Design for Bootstrap PRO](https://mdbootstrap.com/products/jquery-ui-kit/)