React Bootstrap with Material Design
Clone or download
Latest commit 2f4fec3 Nov 12, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Release v4.8.3 Nov 12, 2018
docs Release v4.8.3 Nov 12, 2018
public Add v4.7.1 Sep 10, 2018
src Release v4.8.3 Nov 12, 2018
.babelrc Release v4.8.3 Nov 12, 2018
.eslintignore Release v.4.8.1 Oct 8, 2018
.eslintrc Release v.4.8.2 Oct 22, 2018
.gitignore yarn.lock added to gitignore Oct 9, 2017
.npmignore Release v4.8.3 Nov 12, 2018
License.pdf version up Jul 2, 2018
README.md Release v4.8.3 Nov 12, 2018
README.txt Release v4.8.3 Nov 12, 2018
index.js Release v.4.8.1 Oct 8, 2018
package.json Release v4.8.3 Nov 12, 2018
webpack.base.config.js Release v4.8.3 Nov 12, 2018
webpack.config.js Release v.4.8.1 Oct 8, 2018
webpack.dev.config.js Release v.4.8.2 Oct 22, 2018

README.md

React-Bootstrap-with-Material-Design

React Bootstrap with Material Design

npm version

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 Material Design for Bootstrap Material Design for Bootstrap

Version:

  • MDBReact 4.8.3
  • React 16.6.0

Quick start

  • Clone following repo:
git clone https://github.com/mdbootstrap/react-bootstrap-with-material-design .

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

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:
import "font-awesome/css/font-awesome.min.css";
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";

Run server

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