[Fixed] how can I use bootstrap grid style in angular without disturbing/overriding angular material design


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>


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

Leave a Reply

(*) Required, Your email will not be published