Issue
If I use ng-bootstrap, grid style does not work but when I use bootstrap (providing it in style.css or in angular.json style[] array) grid style it works fine, but it overrides the angular material designs.
ng-bootstrap and bootstrap both I installed from npm
I used <div class="col-md-6 md-offset-3"></div>
Solution
Even our minimal inclusion of Bootstrap adds couple of styles that don’t play so nicely with the Angular Material out of the box. Let’s create new styles-reset.scss file with the following content and import it after the original Bootstrap imports in the main styles.scss file.
* { &:active, :focus { outline: none !important; }} Label { margin-bottom: 0;}
Bootstrap also sets link color and uses underline text-decoration on the hovered links. We can remove this styles by adjusting content of the styles-variables.scss file like this and import it in the style.scss
$link-hover-decoration: none; // remove underline from button links
$link-color: #3f51b5; // set link color based on the used material theme
$link-hover-color: currentColor;
Reference from : https://medium.com/@tomastrajan/how-to-build-responsive-layouts-with-bootstrap-4-and-angular-6-cfbb108d797b