Using Bootstrap for Angular and Material design for Angular together

I'm working on a project with this template.

The template is written using AngularJs and Bootstrap-UI (bootstrap for angular) and I would like to include some Material Design elements like cards and others.

Is it possible to do that? is it recommended? My thing is we already love this template and way to many elements of it, but Material Design have cards, dropdown, text inputs with the label animation etc for example which are amazing.

So my question is:

AngularJS + Bootstrap for Angular + Material Design for Angular = Awesomeness or Disaster?

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.

I just [recently wrote a blog post][1] 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.

[1]: http://thunk.technology/?p=308 "changing to material from 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.

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="[email protected]" 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>

Use angular material package for form elements. Use bootstrap css grid for responsive design. https://www.npmjs.com/package/@zirafa/bootstrap-grid-only

I recently analyzed this issue as well. There is new version of Angular which is Angular 5. But is not easy to find nice looking components for this version of angular which is released a couple of weeks ago.

Angular Material is mostly based on flex layout. You should check whether that is restriction for you. If you only use input components and do not integrate any other bootstrap javascript (such as ng-bootstrap) framework, it should work.

Because material components do not define any change any native styling (it even do not have any normalize.css implementation). If you check a theme of material styling e.g. https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css you do not find any styling for native tags.

What you should pay attention is do not use both styling at the same element e.g. following will not work as desired

<button mat-raised-button class="btn btn-primary">Submit</button>

If you use a material component you should use a material specific styling on that component. for example

<button mat-raised-button color="primary">Primary</button>

Adding only bootstrap-grid-min.css doesn't work properly, besides it doesn't have other handy classes like text-right etc.

So, here is what I came up with: Put bootstrap-min.css in your assets:

Import in your styles.scss/styles.css:

@import './assets/css/bootstrap.min.css';

But this conflicts with designs of material-ui. Like, I immediately noticed unexpected borders are coming around the buttons when clicked (Not so annoying as it sounds though).

You can add the following in your styles.scss to get rid of these effects.

* {
  &:active,
  :focus {
    outline: none !important;  // 1
  }
}

a:not(.mat-button):not(.mat-raised-button):not(.mat-fab):not(.mat-mini-fab):not([mat-list-item]) {
    color: #3f51b5; // 2
  }

Read More: https://www.amadousall.com/the-good-parts-of-bootstrap-4-you-are-missing-in-your-angular-material-projects/