[![React-Bootstrap-with-Material-Design](https://mdbootstrap.com/img/Marketing/free/main/react/mdb-react-free.jpg)](https://mdbootstrap.com/docs/react/)

# React Bootstrap with Material Design

[![npm version](https://badge.fury.io/js/mdbreact.svg)](https://badge.fury.io/js/mdbreact)

Built with React and Bootstrap 4. Absolutely no jQuery.

400+ material UI elements, 600+ material icons, 74 CSS animations, SASS files and many more.

All fully responsive. All compatible with different browsers.

---

# Demo:

**Main demo**: https://mdbootstrap.com/docs/react/components/demo/

# Live Preview

[![Material Design for Bootstrap](https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20%2888%29.jpg)](https://mdbootstrap.com/angular/)
[![Material Design for Bootstrap](https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20%2876%29.jpg)](https://mdbootstrap.com/angular/)
[![Material Design for Bootstrap](https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20%2873%29.jpg)](https://mdbootstrap.com/angular/)

# Version:

- MDBReact 4.8.6
- React 16.6.0

# Quick start

- Clone following repo:

```javascript
git clone https://github.com/mdbootstrap/react-bootstrap-with-material-design .
```

note "." at the end. It will clone files directly into current folder.

- Run `npm i`
- Run `npm start`
- Voilà! Open browser and visit http://localhost:3000

Now you can navigate to our documentation (http://mdbootstrap.com/docs/react/), pick any component and place within your project.

# Available commands

- npm start - runs the app in development mode.
- npm run remove-demo - remove demo directory from your project and generate a boilerplate for your app
- npm run build - builds the app for production to the build folder.
- npm test - runs the test watcher in an interactive mode.

# How to install MDB via npm:

- create new project `create-react-app myApp`
- `cd myApp`
- `npm install --save mdbreact`
- Import style files into the src/index.js before the App.js file:

```javascript
import "font-awesome/css/font-awesome.min.css";
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";
```

### Run server

```bash
npm start
```

# PRO version:

**React Bootstrap with Material Design PRO (from $79)**: https://mdbootstrap.com/products/react-ui-kit/

## Documentation:

**Huge, detailed documentation avilable online on**: http://mdbootstrap.com/docs/react/

# Highlights:

**Bootstrap 4**
Up-to-date with the latest standards of Bootstrap 4 and all the best it has to offer.

**Detailed documentation**
Intuitive and user-friendly documentation, created with a copy-paste approach.

**No jQuery**
Writing you code with pure React is now quicker, easier, and cleaner.

**Cross-browser compatibility**
Works perfectly with Chrome, Firefox, Safari, Opera and Microsoft Edge.

**Frequent updates**
Expect any bugs being fixed in a matter of days.

**Active community**
MDB is broadly used by professionals on multiple levels, who are ready to aid you.

**Useful helpers**
Reduce the frequency of highly repetitive declarations in your CSS.

**Technical support**
Every day we help our users with their issues and problems.

**SASS files**
Thought-out .scss files come in a compile-ready form.

**Flexbox**
Full support of Flexbox layout system lets you forget about alignment issues.

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/react/getting-started/download/

5 min quick start: https://mdbootstrap.com/docs/react/getting-started/quick-start/

Changelog: https://mdbootstrap.com/docs/react/changelog/

# Social Media:

Twitter: https://twitter.com/MDBootstrap

Facebook: https://www.facebook.com/mdbootstrap

Pinterest: https://pl.pinterest.com/mdbootstrap

Google+: https://plus.google.com/u/0/b/107863090883699620484/+Mdbootstrap/posts

Dribbble: https://dribbble.com/mdbootstrap

LinkedIn: https://www.linkedin.com/company/material-design-for-bootstrap

## Contact:

office@mdbootstrap.com
