CODEWITHSUNDEEP
angulartwitter-bootstrapangular-materialmdbootstrap
chuckd
chuckd

Reputation: 14540

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

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...

Upvotes: 2

Views: 7276

Answers (3)

JohnnyDevNull
JohnnyDevNull

Reputation: 982

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

Upvotes: 2

Prajwal
Prajwal

Reputation: 4000

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.

Upvotes: 3

Yash Tomar -Aeologic
Yash Tomar -Aeologic

Reputation: 121

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.

Upvotes: 1

Related Questions