Material Design Bootstrap is a version of bootstrap that inspired by Material Designs. MDBootstrap have hundreds of beautiful components, templates, animations, effects, and helpers. Everything fully responsive, compatible with different browsers and it is easy to use. Inspired by Google’s material design concept, Bootstrap extended to MDBootstrap.

1. Rudar Daman Singla
Software Consultant
Knoldus Inc.
Getting Started with
Material Design for
Bootstrap (Angular)

2. OUR AGENDA
01 What is Bootstrap?
02 What is Material Design?
03 What is Material Design for Bootstrap (MDB) ?
04
05
MDB Features
06
Trusted Developers & Designers
07
Demo
References

3. Development Speed
Undoubtedly one of the biggest
advantages of using Bootstrap is the
speed of development.
Responsiveness
There is virtually no work that needs to
be done for responsiveness, just use
fluid grid layout
Customizable
Developers have the ability to pick and
choose the features that are needed and
the rest can be tossed
Support
Bootstrap has a huge support
community behind it

4. Material design is design language developed by Google in 2014. Google announced Material Design on June 25,
2014, at the 2014 Google I/O conference.
Why did Google develop it?
Why do we want to use Material Design?

9. Features
Cross-browser compatibility
Works perfectly with Chrome, Firefox, IE,
Safari, Opera and Microsoft Edge.
Active community
MDB is broadly used by professionals on
multiple levels, who are ready to aid you
Bootstrap 4
Up-to-date with the latest standards of
Bootstrap 4 and all the best it has to offer.
Modularity
Use TypeScript modules to compile package
adjusted to your needs.

10. Not enough?
Technical support
Every day help a lot of users with their issues
and problems.
Flexbox
Full support of Flexbox layout system lets you
forget about alignment issues
No jQuery
Writing your code with pure Angular is now
quicker, easier, and cleaner.
SASS files
Thought-out .scss files come in a compile
ready form.

11. ...and even more
Free for personal and commercial
use.
Step-by-step tutorials that will guide
you through all the Angular
functionalities.
Spend your time on creating, not
setting up with very few steps easy
installation.
Easy to use and customize your
design is limited only by your own
imagination.
All the necessary and crucial page
elements along with 500+ UI
elements.
Scalable, vector 600+ icons perfect for
any purpose you can imagine.
Your fully responsive design will be
displayed exactly in the same, perfect
way on any device.
Attention-grabbing 75+ CSS
animations to focus your visitor's
attention on specific elements

12. Trusted by 1,000,000+ developers & designers

13. REFERENCES
• https://material.io/
• https://mdbootstrap.com/angular
• https://getbootstrap.com/

14. Thank You !