Bootstrap offers a lot of great helper utilities [like for padding, or flex layout] and that can be imported using only its CSS file [not the js file, which provides all its components like calendar, etc]
So, can I use Bootstrap for these helper classes and Angular Material for the components? Is this a good idea? I can even go for TailwindCSS for the helper classes instead of Bootstrap
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 think the best option is to create your own flexbox and padding classes. You can draw inspiration from different MIT libraries such as:
https://www.npmjs.com/package/flexboxes
or
https://www.npmjs.com/package/sass-flexbox
On the other hand, it doesn't seem bad to me that you use Bootstrap and Angular Material either.
