Using Bootstrap for Angular and Material design for Angular together

by

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.

More Related Contents:

  1. Good way to dynamically open / close a popover (or tooltip) using angular, based on expression?
  2. Can you override specific templates in AngularUI Bootstrap?
  3. Angular ng-repeat add bootstrap row every 3 or 4 cols
  4. Scope issue in AngularJS using AngularUI Bootstrap Modal
  5. angularjs share data config between controllers
  6. bootsrap nav-bar collapsable cannot make it work
  7. Invoking modal window in AngularJS Bootstrap UI using JavaScript
  8. Angular JS – Automatically focus input and show typeahead dropdown – ui.bootstrap.typeahead
  9. How do I create an AngularJS UI bootstrap popover with HTML content?
  10. Hide Angular UI Bootstrap popover when clicking outside of it
  11. Model in a modal window in angularjs is empty
  12. How do I increase modal width in Angular UI Bootstrap?
  13. Angular bootstrap datepicker date format does not format ng-model value
  14. Create a simple Bootstrap Yes/No confirmation or just notification alert in AngularJS
  15. How to usemultiple Angular UI Bootstrap Datepicker in single form?
  16. Trying to have a grid of card with angular material
  17. Use of ng-src vs src
  18. Descending order by date filter in AngularJs
  19. angular.js link behaviour – disable deep linking for specific URLs
  20. Angular, content type is not being sent with $http
  21. Change format of md-datepicker in Angular Material with momentjs
  22. Usage of $broadcast(), $emit() And $on() in AngularJS
  23. How to handle $resource service errors in AngularJS
  24. How to create a AngularJS promise from a callback-based API
  25. Set URL query parameters without state change using Angular ui-router
  26. Couldn’t load template using templateUrl in Angularjs
  27. How to Set Background image of div with ng-style
  28. Bootstrap-UI Typeahead display more than one property in results list?
  29. upload file from angularjs directly to amazon s3 using signed url
  30. How to pass .env file variables to webpack config?

Leave a Comment