I know Bootstrap, can I use MD Bootstrap and or Angular Material components in the same project?

Question

I've been pretty familiar with Bootstrap for a while. I'm just learning Angular and I'm now looking at MD Bootstrap and Angular Material.

But I'm a little confused. Can these two frameworks, specifically their components, be used as supplements with Bootstrap?

I'm aware they can be used instead of Bootstrap, but what if I like Bootstrap and just want to use 2 components from Angular Material?

ex. sidenav

Bootstrap doesn't have a native sidenav, so I'm trying to see if Angular Meterials sidenav would work...

because I want a good sidenav and I don't think Bootstrap has a native one. but Angular Material does. And what if I want other compnents that aren't in Bootstrap but part of MD Bootstrap? Also it looks like MD Bootstrap has lots of free templates on their site I could use. Like a landing page, admin page, etc — chuckd, Jun 28 '19 at 03:36
I would suggest you to go with Angular material if you are okay with writing your own Css. Else go with bootstrap. You can add both, it still works, but you'll add unnecessary dependencies. — Prajwal, Jun 28 '19 at 03:59
ya well that was my concern! If it uses unneccessary dependencies, how much would it effect the overall performance? — chuckd, Jun 28 '19 at 04:38

score 3 · Answer 1 · answered Jun 28 '19 at 05:21

MD Bootstrap and Angular Material are two different packages trying to achieve the same thing, provide ready-made components.

In current development scenarios, there's no clear need to use Bootstrap like in the good old days. Now, Most of the time Bootstrap is used for layout structuring, and you can get a trimmed version of bootstrap if you want to use it only for layouts (bootstrap-grid.min.css). Also, Bootstrap tries to support most of the browsers including IE10 and 11.

On the other hand, Angular Material focuses on components and their behaviour. And works mostly on all modern browsers (Chrome, mostly Chrome) and provides almost nothing when it comes to layouts. It does support theming, custom styling, etc.

You can use both in your project, both of them are stable and has a lot of community support. But they are very different in their own way. You might be better off using only one of it.

But if you really need some component, you can still import individual module from Angular material, no need to import complete material module and use it, which ensures minimal bundle size. So I would suggest you to use MD-bootstrap as main component library, and import may be 2 or 3 components from Angular material. You will have to add custom stylings for Angular material components.

so you're saying I should use "bootstrap-grid.min.css" for grids and layouts and then md bootstrap as the main? and what makes you think md bootstrap is better than regular bootstrap? — chuckd, Jun 28 '19 at 06:04
No. I meant, if you are using bootstrap only for layout, then go for `bootstrap-grid.min.css`. `md-bootstrap` just provides components along with bootstrap. — Prajwal, Jun 28 '19 at 06:55
So if I'm using Bootstrap 4 and I want to use a MD bootstrap component, I can just import that single MD Bootstrap component and use it, without having to import the whole library? — chuckd, Jun 28 '19 at 18:08

JohnnyDevNull · Accepted Answer · 2019-06-28T07:54:10.317

I've tried some things with bootstrap together with material.

You can build some things together.

Take a look at this blog post: https://www.amadousall.com/the-good-parts-of-bootstrap-4-you-are-missing-in-your-angular-material-projects/

There is explained how you can build the good things from both together with scss.

I loved the solution to have all the bootstrap utility classes together with material.

And now the question why someone should do this?

Because bootstrap has a lot of very good helpers, base styles and especially the best reboot.scss, extended from normalize.css. There are also some other good things like the flex-box helpers, maybe also the pure css grid system.

With SCSS you have the choice to import only the parts you want to and thats a pretty cool thing not to import everything.

Here is my SCSS working base, just extend the parts from bootstrap you want:

_variables.scss

$link-color: #3f51b5;
$link-hover-color: currentColor;
$link-hover-decoration: none;

_reset.scss


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

label {
  margin-bottom: 0; // 2
}


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

main.scss

@import 'variables';
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/utilities';
@import 'reset';

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// **Be sure that you only ever include this mixin once!**
@include mat-core();

// Define the default theme (same as the example above).
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);

// Include the default theme styles.
@include angular-material-theme($candy-app-theme);

// Define an alternate dark theme.
$dark-primary: mat-palette($mat-blue-grey);
$dark-accent:  mat-palette($mat-amber, A200, A100, A400);
$dark-warn:    mat-palette($mat-deep-orange);
$dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

// Include the alternative theme styles inside of a block with a CSS class. You can make this
// CSS class whatever you want. In this example, any component inside of an element with
// `.unicorn-dark-theme` will be affected by this alternate dark theme instead of the default theme.
.unicorn-dark-theme {
  @include angular-material-theme($dark-theme);
}


// Your styles

score 1 · Answer 3 · answered Jun 28 '19 at 04:13

1

Yes you can use Angular Material as a supplement to bootstrap.

I have personally use Angular Material Table

with dynamic data loading in many of my project.

I have also use autocomplete component of angular material.

And the best part is these components are easily configurable.

answered Jun 28 '19 at 04:13

Yash Tomar -Aeologic

101
5

will it effect performance if I use both Bootstrap and Material together? I thought the whole idea of components was to just use the code for each and nothing more? – chuckd Jun 28 '19 at 04:39
Well, it depends on how you import the library. You can include only the required component from Angular material. Which will be very light to use. – Yash Tomar -Aeologic Jun 28 '19 at 12:44
ok that's what I need to do. See, I only only want to use the sidebar in Angular Material. The rest of my app uses Bootstrap 4...and some other ngx-bootstrap components, – chuckd Jun 28 '19 at 18:07

I know Bootstrap, can I use MD Bootstrap and or Angular Material components in the same project?

3 Answers3

And now the question why someone should do this?

Here is my SCSS working base, just extend the parts from bootstrap you want: