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.

Answer 1

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.