Combining angular material with twitter bootstrap without conflicts

Question

I would like to combine twitter bootstrap together with angular material. I found bootstrap material design https://github.com/FezVrasta/bootstrap-material-design

Angular material uses following declarations;

<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-animate/angular-animate.min.js"></script>
<script src="../bower_components/angular-aria/angular-aria.min.js"></script>
<script src="../bower_components/angular-material/angular-material.min.js"></script>

For bootstrap material, the declarations in the documentation are like this;

  <!-- Material Design fonts -->
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">

  <!-- Bootstrap -->
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <!-- Bootstrap Material Design -->
  <link rel="stylesheet" type="text/css" href="dist/css/bootstrap-material-design.css">
  <link rel="stylesheet" type="text/css" href="dist/css/ripples.min.css">

Will there be conflict if I include all the links? I am quite confused on how to combine angular material and bootstrap.

When using angular and bootstrap, it is suggested to go for angular-bootstrap https://angular-ui.github.io/bootstrap/ . As far as using material design and bootstrap together is concerned, prefer material design. But bootstrap has certain directives that are not available in material. So wherever you cannot use material design, use bootstrap, and vice versa. There is no issue of any conflict at least to the best of my knowledge. — Sohan Shirodkar, May 01 '16 at 07:32

score 6 · Accepted Answer · edited May 23 '17 at 10:30

It is better not to mix Bootstrap and Angular Material because bootstrap's grid system (as of version 3~) is based on CSS display table and Angular Material is using display flex. So as suggested in this answer you're likely to get CSS conflicts and your application size will increase.

If you need better browser support and you're using Bootstrap, I have written Angular Bootstrap Material which is an AngularJS version of Bootstrap material design theme. It eliminates the dependency on jQuery and bootstrap's JavaScript and supports form validation using ng-messages.

You can install from bower via bower install abm.

Combining angular material with twitter bootstrap without conflicts

1 Answers1

Linked