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
How to Set Mousemove Update Speed
Changing Data Content on an Object Tag in HTML
How to Disable JavaScript Function Calls from the Browser Console
How to Dynamically Adjust CSS Stylesheet Based on Browser Width
D3 Bar Graph Example Not Working Locally
How to Detect When a New Element Has Been Added to the Document in Jquery
How to Add a List of Images to the Document from an Array of Urls
Issue with Comparing Two Numbers in JavaScript
Find Selected Item in Datalist in HTML
Specify Parent Divs Opacity But Make It Not Affect Children HTML Elements
Getelementbyclass().Setattribute Doesn't Work
CSS Position Absolute Making the Textbox Go Down
Modify the Value of Each Textfield Based on Original Value Using Jquery
Set the Default Save as Name for a an <Embed> or <Iframe> That Uses a Blob
Choosing Mobile Web HTML5 Framework
Using Document Object in Nodejs
Generate Random Element Position and Prevent Overlapping in JavaScript