Using Bootstrap for Angular and Material design for Angular together
If you add both bootstrap & angular-material this is what will happen
Both have css which will target your front end elements (e.g. input
element, buttons)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.
If you add both you will have to take care of css styles overriding others on common parts (e.g. font size & font family).
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!.
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.
I just recently wrote a blog post on how to replace Bootstrap with Angular-Material. Its based on the kickstarter framework of choice I'm using, but it'll do the job you are after.
Much like @nitin said, it will be challenging to implement both. What I'd actually ask you to think about, regardless of whether its possible, is why you would want both?
The purpose of both is to provide an overall common UI style, but they are conceptually apposed to each other, rather than something that could work in tandem.
I'd recommend you start reading more about material design from the google guides before jumping right in.
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.
Since you're already using UI Bootstrap, the only additional dependency will be bootstrap material design theme css and Angular Messages
Below is a basic form validation demo:
angular.module('angularBootstrapMaterialDocs', ['angularBootstrapMaterial', 'ui.bootstrap']);angular.module('angularBootstrapMaterialDocs') .controller('validationDemoCtrl', ['$scope', function($scope) { $scope.user = { name: "", notifications: {} } $scope.errorMap = { required: "This field is mandatory", email: "Please enter a valid email" } $scope.change = function() { console.log($scope); } } ]);.container-fluid { background-color: #fff;<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" /><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" /><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/bootstrap-material-design.min.css" rel="stylesheet" /><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/ripples.min.css" rel="stylesheet" /><script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-messages.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap.min.js"></script><script src="https://rawgit.com/tilwinjoy/angular-bootstrap-material/master/dist/angular-bootstrap-material.min.js"></script><div class="container-fluid" ng-app="angularBootstrapMaterialDocs"> <div class="row" ng-controller="validationDemoCtrl"> <div class="col-xs-12 col-sm-6"> <form name="signup"> <abm-form-group error-messages="errorMap"> <label data-abm-label type="floating">Name</label> <input type="text" name="name" class="form-control" abm-form-control ng-model="user.name" required> </abm-form-group> <abm-form-group error-messages="errorMap"> <label data-abm-label>Email</label> <input type="email" name="email" class="form-control" placeholder="johndoe@mail.com" abm-form-control ng-model="user.email" required> </abm-form-group> <div class="form-group"> <div class="togglebutton" abm-toggle label="Premium Account"> <input type="checkbox" name="premiumAccount" ng-model="user.premium" ng-change="user.paymentMode=undefined"> </div> </div> <abm-form-group error-messages="errorMap"> <label>Prefered payment method</label> <div class="radio" abm-radio label="Net banking"> <input type="radio" name="payment" value="net" ng-model="user.paymentMode" ng-required="user.premium" ng-disabled="!user.premium"> </div> <div class="radio" abm-radio label="Credit card"> <input type="radio" name="payment" value="credit" ng-model="user.paymentMode" ng-required="user.premium" ng-disabled="!user.premium"> </div> </abm-form-group> <div class="form-group"> <div class="togglebutton" abm-toggle label="Send Me Updates"> <input type="checkbox" name="notifications" ng-model="user.notify" ng-change="user.notifications={}"> </div> </div> <div class="row"> <div class="col-xs-6"> <abm-form-group error-messages="errorMap"> <label>Notifications via:</label> <div class="checkbox" abm-checkbox label="Text Message"> <input type="checkbox" name="text-notifications" ng-model="user.notifications.text" ng-disabled="!user.notify" ng-required="user.notify && !user.notifications.email"> </div> <div class="checkbox" abm-checkbox label="Email"> <input type="checkbox" name="email-notifications" ng-model="user.notifications.email" ng-disabled="!user.notify" ng-required="user.notify && !user.notifications.text"> </div> </abm-form-group> </div> <div class="col-xs-6"> <abm-form-group error-messages="errorMap"> <label>Notification Frequency:</label> <select class="form-control" name="frequency" abm-form-control ng-model="user.notifications.frequency" ng-disabled="!user.notify" ng-required="user.notify"> <option>Daily</option> <option>Weekly</option> <option>Monthly</option> </select> </abm-form-group> </div> </div> <a href="" class="btn btn-raised btn-primary" ng-disabled="signup.$invalid" abm-component>Create Account</a> </form> </div> <div class="col-xs-12 col-sm-6"> <pre>{{user | json}}</pre> </div> </div></div>