I'm a new Magento developer. I have a question, can I integrate bootstrap5 or tailwind css into my module without affecting the class of other modules and can I integrate angular into magento and how? I tried adding bootstrap5 but on my screen it affects classes like category and other parts of the screen. Thank you everyone for reading this article, I hope to receive help from everyone
2 Answers
Regarding adding Bootstrap or any CSS framework to a limited part of the website there's a lot of ways (and mix of ways) :
- Since Magento is modular even when it comes to Frontend, I suggest getting familiar with the recommended way of including JS libraries (since Bootstrap has a JS part) : RequireJS
- https://magento.stackexchange.com/a/273686/51034
- https://developer.adobe.com/commerce/frontend-core/javascript/requirejs/
- A lot of other resources ...
- https://magento.stackexchange.com/a/273686/51034
- Make sure bootstrap's CSS file gets included first (or among firsts) so that it gets overridden by the existing ones (Magento's Layout System
app/code/Yourvendor/Yourmodule/view/frontend/layout/default_head_blocks.xml) - I've seen some talk about adding a prefix to every CSS Class/ID to make sure it doesn't conflict but I didn't give it much thought yet :
- But there's a better way it seems : NameSpacing Bootstrap
- How to namespace Twitter Bootstrap so styles don't conflict
https://stackoverflow.com/a/13977230/4400714
- How to namespace Twitter Bootstrap so styles don't conflict
Regarding Angular, there's a lot of resources, and what @Tridhya said is true, and it's a whole big thing :) good luck !
yes. You can integrate bootstrap5 & tailwind CSS into your module without affecting the classes of other modules. Need to download the bootstrap package and call it in the specific module layout file. Same for tailwind, need to install tailwind CSS via npm and configure it to generate a CSS file, and then include that file in your module's layout or template files.
Regarding Angular integration, need to follow a headless approach. Need to set up angular application. Utilize Magento's default APIs and replace Magento frontend with the Angular frontend API integration.
