CODEWITHSUNDEEP
angularangular-materialnpm-installng-bootstrap
Rajesh Malakar
Rajesh Malakar

Reputation: 135

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>

Upvotes: 7

Views: 16367

Answers (4)

captain hak
captain hak

Reputation: 912

If you just need to use the bootstrap grid, you can add in your package.json dependencies: "bootstrap": "4.3.1" and npm i then in your styles.scss add @import 'bootstrap/dist/css/bootstrap-grid.min.css'; upside the angular material theme import and there you go, you imported only the grid style without all other stuffs and material theme is still the same.
Here is an example on stackblitz
Here is the source of the unminified file you imported

Upvotes: 17

jenson-button-event
jenson-button-event

Reputation: 18941

you can localise bootstrap inside components using this in your styles.scss

.bootstrapped {
  @import '~bootstrap/dist/css/bootstrap-grid.min.css';
}

<div class="bootstrapped"><div class="container">etc</div></div>

Upvotes: 3

Rajesh Malakar
Rajesh Malakar

Reputation: 135

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

Upvotes: 1

AndyOR
AndyOR

Reputation: 314

There is a branch of material design for bootstrap specifically aimed at Angular that should solve this problem for you.

https://mdbootstrap.com/docs/angular/

I use this in my own apps and the grid system works perfectly.

If you want to install via npm: https://github.com/mdbootstrap/bootstrap-material-design

Tutorial showing use of mdbootstrap: https://mdbootstrap.com/education/bootstrap/corporate-website-lesson-1/

Hope this helps!

Upvotes: 2

Related Questions