Angular Material and Bootstrap 4

For a rather large Angular project (7.2.10), I use the Angular Material components as well. As you may probably know this library does not provide out of the box a good layout system, CSS reset and utilities...

So why not include these elements from the Bootstrap 4 framework ?

I'll show you how you can add parts of the Bootstrap to your Angular project.

Add Bootstrap to package.json

You first need to include the Bootstrap to your dependencies : npm install bootstrap --save

Add Bootstrap parts to the global stylesheet (src/style.scss)

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

view raw angular_bootstrap_style.scss hosted with ❤ by GitHub

When adding the Reboot, we have to fix some issues by including :

• src/_variables.scss
• src/_reset.scss

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

view raw angular_bootstrap_variables.scss hosted with ❤ by GitHub

	* {
	&: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
	}

view raw angular_bootstrap_reset.scss hosted with ❤ by GitHub

Thanks...