Hello Boldo. Well, I am not an experienced Front-End developer to say which one is better, I enjoyed using both in separate projects. But using both at the same time, I can say – a big NO – I can say this for sure. If you use Material you don’t need Bootstrap at all. There exists a material design for bootstrap, bur for me, it makes no sense. Material is pretty enough on it self, and you can use flex, as I did in this series, to organize the elements on the page.

Hvala puno. Drago mi je da je i dalje korisno iako je starija verzija i Angulara i Material-a.

Since this is the second article of the angular material series, we introduced flex-layout in the previous article.

Import it to the project guys, it’s missing in the guide.

I see no issue with that, you will just have to play a bit with Angular Flex I think to do that.

Thank you for replying so fast! I checked again and found FlexLayoutModule was not imported in my SharedModule. Issue resolved!

I have inserted a logo far left, in the middle will be my menus, and far right I will have a dropdown for Profile and Logout buttons. How do you think that will work?

Thank you!

Well, I can’t be sure. The one obvious difference is the framework version you are using. Yours is 13. But, have you tried downloading our source code and inspecting it?

“dependencies”: {
  “@angular/animations”: “~13.1.0”,
  “@angular/cdk”: “^13.1.2”,
  “@angular/common”: “~13.1.0”,
  “@angular/compiler”: “~13.1.0”,
  “@angular/core”: “~13.1.0”,
  “@angular/flex-layout”: “^13.0.0-beta.38”,
  “@angular/forms”: “~13.1.0”,
  “@angular/material”: “^13.1.2”,
  “@angular/platform-browser”: “~13.1.0”,
  “@angular/platform-browser-dynamic”: “~13.1.0”,
  “@angular/router”: “~13.1.0”,
  “hammerjs”: “^2.0.8”,
  “rxjs”: “~7.4.0”,
  “tslib”: “^2.3.0”,
  “zone.js”: “~0.11.4”
 },