Choosing bootstrap vs material design

Question

I'm going to start new project using AngularJS (full stack). My project needs to be responsive and I'll be creating templates from scratch.

So I need an advice on whether to choose bootstrap 3 (with angular directives) or material design for layouts?

I'd greatly appreciate if someone can list the pros & cons of both.

bootstrap has a powerful community behind. Its grid system has more features. material design dictate the way you develop ui and styles. It has modern ui elements. You can read more here http://tutorialzine.com/2015/07/comparing-bootstrap-with-mdl — Farshid Saberi, Sep 27 '15 at 17:49
if you must support IE8/9 then material design will not work as it uses Flexbox grid layout. I would go even NOW with angular ui bootstrap as it is much more mature than material design which has lots of bugs... — Pascal, Oct 15 '15 at 20:03
The dev environment may also be a consideration. In Visual Studio 2015, Bootstrap is mature and well supported. I didn't find that to be so for Materials and so am not using it at this point. Would be interested to see if others using VS2015 had this conclusion. — CYoung, Jul 30 '16 at 06:41
I want to throw in that the inline styles of MD are a pain. I also don't want to have to mix the two when BS has most of what I need. I like MD very much but will wait until it matures more and gets rid of the inline styles (which I read somewhere they were working on, though I can't find it now). — steveareeno, May 08 '17 at 14:04

score 158 · Answer 1 · edited Feb 19 '16 at 04:15

158

As far as I know you can use all mentioned technologies separately or together. It's up to you. I think you look at the problem from the wrong angle. Material Design is just the way particular elements of the page are designed, behave and put together. Material Design provides great UI/UX, but it relies on the graphic layout (HTML/CSS) rather than JS (events, interactions).

On the other hand, AngularJS and Bootstrap are front-end frameworks that can speed up your development by saving you from writing tons of code. For example, you can build web app utilizing AngularJS, but without Material Design. Or You can build simple HTML5 web page with Material Design without AngularJS or Bootstrap. Finally you can build web app that uses AngularJS with Bootstrap and with Material Design. This is the best scenario. All technologies support each other.

Bootstrap = responsive page
AngularJS = MVC
Material Design = great UI/UX

You can check awesome material design components for AngularJS:

https://material.angularjs.org

enter image description here

Demo: https://material.angularjs.org/latest/demo/ enter image description here

edited Feb 19 '16 at 04:15

isherwood

58,414
16
114
157

answered Dec 12 '14 at 08:46

Michael Money

2,441
1
22
25

4

This might also a useful site: http://www.materialup.com/resources, which gives an overview of Material Design frameworks, incl. https://fezvrasta.github.io/bootstrap-material-design/ – Mathias Conradt Feb 10 '15 at 12:49
3

@MathiasConradt first URL doesn't exist anymore. I guess you meant http://www.materialup.com/posts/c/resources – thisdotnull Dec 16 '15 at 06:05
14

That's not a very accurate description...Both material and bootstrap provide a responsive design and great UI/UX. MD seems to be tailored more towards mobile viewership. – Vladimir Mar 24 '17 at 13:21
2

It is important to distinguish *material design* from *angular material*. Material design is a [design language](https://en.wikipedia.org/wiki/Design_language), angular material is just a UI component library that uses MD. I'm sure you can find bootstrap themes and extensions that use material design. – Jens Jul 08 '18 at 17:29
1

I'd like to echo @Jens above. I would like to have the looks and UI effects of Material while still having the flexibility and familiarity of Bootstrap at my disposal. I guess it's a matter of choice. – Yousof K. Oct 27 '18 at 18:07

Choosing bootstrap vs material design

1 Answers1

Linked