Actually, I needed to add/include Bootstrap 5 in my project referring this post. And worked.
But whenever I am running "mvn clean install -PautoInstallBundle" in ui.frontend after creating .scss for my component, my clientlibs in /apps get reset & bootstrap support is gone. So, then again I've to add bootstrap files in clientlib.
I am still learning, so I know I'm doing something wrong here. Thus, please tell me how to add bootstrap in my project.
Thanks!
Solved! Go to Solution.
Views
Replies
Total Likes
Hi @sesmic , you need to add bootstrap5 as a category name, follow this article if it helps
https://medium.com/adobetech/creating-a-bootstrap-carousel-from-core-components-8df7b2173d25
~Aditya.Ch
Whenever you will build ui.frontend, it will overwrite the clientlib-site and clientlib-dependency. If you are adding bootstrap as a separate library then you can update clientlib-dependency with category of bootstrap 5 clientlibs.
You can refer code of ui.frontend/clientlibs.config.js, it is creating clientlibs inside ui.apps. Refer sample code for addition of bootstrap5
name: 'clientlib-dependencies', categories: ['project.dependencies'], dependencies: ['bootstrap5'],
Add bootstap5 JS and CSS file in separate clientlibs in ui.apps/project/clientlibs/bootstrap5.
Also this command is to install bundle of project : mvn clean install -PautoInstallBundle
Refer this document for correct commands : https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-wknd-tutorial-devel...
Thanks for the reply.
I did as you said & bootstrap js & css were also added to clientlibs. But bootstrap isn't working. To add "dependencies: ['bootstrap']" don't we need to add categories = bootstrap5 to that folder?
Hi @sesmic , you need to add bootstrap5 as a category name, follow this article if it helps
https://medium.com/adobetech/creating-a-bootstrap-carousel-from-core-components-8df7b2173d25
~Aditya.Ch
Yes, you have to create a separate clientlibs with categories=bootrstap5(any other name you want to keep) as I mentioned above i.e. ui.apps/project/clientlibs/bootstrap5. You have to add this in your codebase to avoid getting removed after deployment.
Views
Likes
Replies