Using Bootstrap for Angular and Material design for Angular together

Question

I'm working on a project with this template.

The template is written using AngularJs and Bootstrap-UI (bootstrap for angular) and I would like to include some Material Design elements like cards and others.

Is it possible to do that? is it recommended? My thing is we already love this template and way to many elements of it, but Material Design have cards, dropdown, text inputs with the label animation etc for example which are amazing.

So my question is:

AngularJS + Bootstrap for Angular + Material Design for Angular = Awesomeness or Disaster?

Answer 1

If you add both bootstrap & angular-material this is what will happen

1. Both have css which will target your front end elements (e.g. input
   element, buttons)

2. Each have their own look & feel (i.e. Bootstrap input element is different from Material input element). So, your overall project won't have one single look & feel.

3. If you add both you will have to take care of css styles overriding others on common parts (e.g. font size & font family).

4. Angular-material handles front end elements in angular way ( directive) So when they release a new version (29 releases so far), you will have to spent some time testing your earlier code (e.g.they changed $media to $mdMedia for handling sideMenu). I've spent a lot of time finding why my sideMenu stopped working!.

5. You overall size of project dependencies will increased if you are using two front end frameworks.

   Angular-material needs its own dependencies like 'angular-animate' & 'angular-aria'.

Talking about your "md-cards" there are "panels" in bootstrap you might wanna have a look here

I would recommend you stick to one thing either bootstrap or angular-material. Both are awesome just dont mix them.