Using Bootstrap for Angular and Material design for Angular together

Question

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?

Solution 1

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.

Solution 2

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.

Solution 3

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>

Solution 4

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

Solution 5

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/

View more solutions

Comments

[Colo Ghidini]

Hey @nitin great arguments, I just have a little concern and I want your opinion, I like angular material elements, like inputs, tabs, etc. but the layout flex based is driving me crazy on mobile. What if I use bootstrap grid system within angular material elements, is that make any sense to you?

[nitin]

@ColoGhidini, flex is even more simpler you just need to first spend some time on it. I would recommend going through this very good flex guide and material layout docs

[Johhan Santana]

I've been working on a project that has both bootstrap and angular-material. What I've seen for now is that you can get the best thing out of both sides (bootstrap classes, toolbar, etc + material flex alignments, card designs, etc) and have been very pleased for now, I've encountered 2 bugs so far that material dialogs and md-selects don't work quite well (the screen goes blank when activating them) but haven't seen any other issue at the moment.

[Sergei Panfilov]

I just want to add, that Angular-material still under heavy construction, so it's still a bit risky to use it right now

[nitin]

@forgottofly : you will have to explore and find out, i'm not using these two together so can't list much.

[forgottofly]

@Johhan Did you got the solution for the problem you faced?

[Johhan Santana]

@forgottofly I kind off didn't bother on using the material design selects or dialogs since the whole design was custom based on the bootstrap design but when I tried to use them at least on this project it bugged the screen completely. I haven't tried to replicate this bug in any other project yet but you could just create a new one and add bootstrap-ui and angular-material and test if it bugs out.

[Xsmael]

what if i don't use boostrapp classes ? or only use them when i need and vice versa for angular material ?

[Edric]

OP is probably wanting to use AngularJS

[Enrique]

Hi guys. Very interesting replies. I've started developing angular 5 app and integrated material.angular.io but I see that this library does not have a nice grid, or global style (reset) etc. so I came here to see how about mixing both (AMD and bootstrap) but i see it is not a bad idea. What would you suggest me to do or to apply so I can have a reset css, and global styles (headings, fonts, p, etc.) applied to my angular app? It seems that AMD only applies the styles to the "limited" components it offers. Thanks

[nitin]

@Enrique: angular material uses angular/flex for layout. Flex layout is great and I would recommend you use it in your angular material app. For global styles, you can configure your material to use custom typography and mixins. See: material.angular.io/guides When you say reset, I assume you just want to overwrite some styling of a specific angular material component, there are couple of different ways to do that, it would be better if you can post a new question for same.