Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED
Bootstrap in a project
I'm using bootstrap for my aem training, but I have a slight problem. Using my clientlib with bootstrap overrides the default aem grid, or bootstrap adds its own on top of it. The issue is that the page now shows very different margins in the root container. How could I solve it?
1 Accepted Solution
Correct answer by
Hi,
The issue lies with the class names because AEM uses the same names for some of their classes as Bootstrap does. For example, "container". So the best solution is to compile your own version of Bootstrap and rename the out-of-the-box (OOTB) classes
In short, you should follow this process:
- Open the SASS (LESS) sources
- Find and replace the classes you want to rename
- Compile that with a SASS / LESS compiler
You can learn more here:
https://getbootstrap.com/docs/5.3/customize/sass/
https://getbootstrap.com/docs/5.0/getting-started/build-tools/
https://getbootstrap.com/docs/5.3/customize/overview/
Hope this helps
Esteban Bustamante
Correct answer by
Hi,
The issue lies with the class names because AEM uses the same names for some of their classes as Bootstrap does. For example, "container". So the best solution is to compile your own version of Bootstrap and rename the out-of-the-box (OOTB) classes
In short, you should follow this process:
- Open the SASS (LESS) sources
- Find and replace the classes you want to rename
- Compile that with a SASS / LESS compiler
You can learn more here:
https://getbootstrap.com/docs/5.3/customize/sass/
https://getbootstrap.com/docs/5.0/getting-started/build-tools/
https://getbootstrap.com/docs/5.3/customize/overview/
Hope this helps
Esteban Bustamante
