Combining angular material with no conflict tweeter bootstrap

Question

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

Angular material uses the 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 boot material, the ads in the documentation look 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 a conflict if I include all the links? I'm pretty confused about how to combine angular stuff and boot file.

Answer 1

It is better not to mix Bootstrap and Angular Material, because the bootstrap system (starting from version 3 ~) is based on the CSS mapping table and Angular Material uses a flex display. So, as suggested in this, you are likely to get CSS conflicts, and the size of your application will increase.

If you need better browser support and you use Bootstrap, I wrote Angular Bootstrap Material , which is a version of AngularJS Theme of Material Design for Download . It removes jQuery and boot JavaScript dependency and supports form validation with ng-messages .

You can install from the gazebo through bower install abm .