Can Bootstrap (4) Be Integrated Along with Angular Material (2)

Angular Material 2 with Bootstrap 4 Grid

There is no point to use bootstrap grid with angular material2 at all.

I don't know Flex that well so I was thinking on using Bootstrap's 4
Grid for sorting out the layouts.

I do not think you are quite right on that as in order to use flex-layout you do not have to be a flexbox css expert at all.

Flex-layout is just an abstraction API on top of flexbox css it is very simple to master. Just have a look in to live samples https://tburleson-layouts-demos.firebaseapp.com/ and also checkout this ngair episode https://www.youtube.com/watch?v=TewrxMo_QAs to get some interesting insides on flex-layout from its creator Troy Burleson

Should I use Bootstrap for helper classes alongside Angular Material for components?

Yes, I regularly use Angular Material for its components and Bootstrap for layout. Note that you should use @ng-bootstrap/ng-bootstrap since normal Bootstrap requires jQuery.

Here's an example of how I mix the two together:

/*-----------------------------------------------
|   Bootstrap 4 Setup
-----------------------------------------------*/
@import '~bootstrap/scss/functions';

// My custom Bootstrap overrides
@import 'theme/variables';

/*-----------------------------------------------
|   Bootstrap 4 Stylesheets
|   Comment out unused stylesheets
-----------------------------------------------*/
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/root';
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/type';
@import '~bootstrap/scss/images';
@import '~bootstrap/scss/code';
@import '~bootstrap/scss/grid';
@import '~bootstrap/scss/tables';
@import '~bootstrap/scss/forms';
@import '~bootstrap/scss/buttons';
@import '~bootstrap/scss/transitions';
@import '~bootstrap/scss/dropdown';
@import '~bootstrap/scss/button-group';
@import '~bootstrap/scss/input-group';
@import '~bootstrap/scss/custom-forms';
@import '~bootstrap/scss/nav';
@import '~bootstrap/scss/navbar';
@import '~bootstrap/scss/card';
@import '~bootstrap/scss/breadcrumb';
@import '~bootstrap/scss/pagination';
@import '~bootstrap/scss/badge';
@import '~bootstrap/scss/jumbotron';
@import '~bootstrap/scss/alert';
@import '~bootstrap/scss/progress';
@import '~bootstrap/scss/media';
@import '~bootstrap/scss/list-group';
@import '~bootstrap/scss/close';
@import '~bootstrap/scss/toasts';
@import '~bootstrap/scss/modal';
@import '~bootstrap/scss/tooltip';
@import '~bootstrap/scss/popover';
@import '~bootstrap/scss/carousel';
@import '~bootstrap/scss/spinners';
@import '~bootstrap/scss/utilities';
@import '~bootstrap/scss/print';

/**
Angular custom theme
 */
@import '~@angular/material/theming';

@include mat-core();

$md-primary: (
        50 : #e6effc,
        100 : #c0d7f7,
        200 : #96bdf2,
        300 : #6ba3ed,
        400 : #4c8fe9,
        500 : #2c7be5,
        600 : #2773e2,
        700 : #2168de,
        800 : #1b5eda,
        900 : #104bd3,
        A100 : #ffffff,
        A200 : #cedbff,
        A400 : #9bb5ff,
        A700 : #81a2ff,
        contrast: (
                50 : #000000,
                100 : #000000,
                200 : #000000,
                300 : #000000,
                400 : #000000,
                500 : #ffffff,
                600 : #ffffff,
                700 : #ffffff,
                800 : #ffffff,
                900 : #ffffff,
                A100 : #000000,
                A200 : #000000,
                A400 : #000000,
                A700 : #000000,
        )
);

$md-warning: (
        50 : #fef0e8,
        100 : #fcd9c5,
        200 : #fac09f,
        300 : #f8a678,
        400 : #f7935b,
        500 : #f5803e,
        600 : #f47838,
        700 : #f26d30,
        800 : #f06328,
        900 : #ee501b,
        A100 : #ffffff,
        A200 : #fff2ee,
        A400 : #ffcabb,
        A700 : #ffb6a1,
        contrast: (
                50 : #000000,
                100 : #000000,
                200 : #000000,
                300 : #000000,
                400 : #000000,
                500 : #000000,
                600 : #000000,
                700 : #000000,
                800 : #000000,
                900 : #ffffff,
                A100 : #000000,
                A200 : #000000,
                A400 : #000000,
                A700 : #000000,
        )
);

$md-danger: (
        50 : #fce7eb,
        100 : #f8c3cd,
        200 : #f39bab,
        300 : #ee7389,
        400 : #ea5570,
        500 : #e63757,
        600 : #e3314f,
        700 : #df2a46,
        800 : #db233c,
        900 : #d5162c,
        A100 : #ffffff,
        A200 : #ffd3d7,
        A400 : #ffa0a8,
        A700 : #ff8691,
        contrast: (
                50 : #000000,
                100 : #000000,
                200 : #000000,
                300 : #000000,
                400 : #000000,
                500 : #ffffff,
                600 : #ffffff,
                700 : #ffffff,
                800 : #ffffff,
                900 : #ffffff,
                A100 : #000000,
                A200 : #000000,
                A400 : #000000,
                A700 : #000000,
        )
);

$md-secondary: (
        50 : #eef0f2,
        100 : #d5d9df,
        200 : #bac0ca,
        300 : #9ea7b4,
        400 : #8994a4,
        500 : #748194,
        600 : #6c798c,
        700 : #616e81,
        800 : #576477,
        900 : #445165,
        A100 : #c1d9ff,
        A200 : #8ebaff,
        A400 : #5b9cff,
        A700 : #418cff,
        contrast: (
                50 : #000000,
                100 : #000000,
                200 : #000000,
                300 : #000000,
                400 : #000000,
                500 : #ffffff,
                600 : #ffffff,
                700 : #ffffff,
                800 : #ffffff,
                900 : #ffffff,
                A100 : #000000,
                A200 : #000000,
                A400 : #000000,
                A700 : #000000,
        )
);

$default-theme-primary: mat-palette($md-primary, 500, 100, 900);
$default-theme-accent: mat-palette($md-warning, 800, 300, 200);
$default-theme-warn: mat-palette($md-danger, A700);

// create theme (use mat-dark-theme for themes with dark backgrounds)
$default-theme: mat-light-theme(
                $default-theme-primary,
                $default-theme-accent,
                $default-theme-warn
);

$custom-typography: mat-typography-config(
        $font-family: $font-family-sans-serif,
        $subheading-1: mat-typography-level(19.2px, $headings-line-height, $headings-font-weight),
        $subheading-2: mat-typography-level(27.648px, $headings-line-height, $headings-font-weight),
        $headline: mat-typography-level(39.8131px, 24px, $headings-font-weight),
        $title: mat-typography-level(33.1776px, 24px, $headings-font-weight),
        $body-2: mat-typography-level(16px, 24px, 500),
        $body-1: mat-typography-level(16px, 20px, 400),
        $caption: mat-typography-level(14px, 20px, 400),
        $button: mat-typography-level(16px, 14px, 500)
);

@include angular-material-theme($default-theme);
@include angular-material-typography($custom-typography);

/**
Custom theme files here
 */

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

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

Can we use both angular material and bootstrap together for an angular project?

Yes, you can. I am doing that in a project right now.
But, we started with bootstrap, and then added Material later just to use a few of it's components that don't really look specifically like material design, e.g. the date picker and the autocomplete component.

Given that the two libraries are both collections of UI components and CSS, you're going to have to decide if you want the bootstrap look and feel, or the Material one. I'm not sure if we would have used Bootstrap if we had started with Material Design.

If you want Material, you can probably just go with that - I don't think Bootstrap would get you much extra, unless you just want to use their css grid layout.

If you want the Bootstrap look and feel, there are a few components that either bootstrap does not provide, or where the Material component is subjectively better.

Is Angular 4 material responsive like bootstrap?

To add responsiveness in modern angular app you can use Flex-layout it is completely separate from material2 so you can use that even without using material2 in your app.

Bare in mind that as flex-layout is based on Flexbox CSS so it is not supported in old browsers.

Here are some examples

Also check out the new ngAir episode episode talking about Flex-Layout

UPDATE:

Starting from 6.0.0-beta.16 flex-layout now has an API to support CSS Grid. You can find more details by checking pr#712

---

Related Topics