Choosing bootstrap vs material design

angularjs twitter-bootstrap-3 material-design angular-material
Asik picture Asik · Dec 12, 2014 · Viewed 126.2k times · Source

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.

Answer

Michael Money picture Michael Money · Dec 12, 2014

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.

  1. Bootstrap = responsive page
  2. AngularJS = MVC
  3. 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

Related questions

Best way to represent a Grid or Table in AngularJS with Bootstrap 3?

I am creating an App with AngularJS and Bootstrap 3. I want to show a table/grid with thousands of rows. What is the best available control for AngularJS & Bootstrap with features like Sorting, Searching, Pagination etc.

Read More
Trying to center align button in td

I'm having trouble centering a button in a td. This is probably a simple CSS issue, but the app is using bootstrap, AngularJS, AngularJS-ui-bootstrap, and ngTable. I've included all of these components in my plunkr. I'm trying to set "horizontal-align: …

Read More
Change height of Slick Carousel

Here is a fiddle of Slick Carousel embedded in a Bootstrap thumbnail. JSFiddle How can I make the carousel only 200px tall and ensure that the images are scaled proportionally? I can't seem to get the carousel to fit inside …

Read More