Menu
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>
403
Yes, you can use parts of Angular Material and Bootstrap together in the same web or mobile project. Developers need to be careful not to use the same components, which can clash. Angular Material and Bootstrap offer a variety of unique components for great website design.
Grid System RulesRows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding. Use rows to create horizontal groups of columns. Content should be placed within columns, and only columns may be immediate children of rows.
Angular Material and Flex Layout are absolutely better than bootstrap. But that doesn't mean that you should not use bootstrap, but you may consider utilizing both the libraries.
The Bootstrap Grid can be used alone, without the Bootstrap JavaScript and other CSS Components. You just need to download and reference the “ bootstrap-grid. css ” which contains the Grid and Flexbox classes. More info on only using the Bootstrap Grid CSS is here in the docs.
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
78
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
