Bootstrap in a project | Community
Skip to main content
May 2, 2024
Solved

Bootstrap in a project

  • May 2, 2024
  • 1 reply
  • 599 views
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?
 

 

 
 
 
 
 



 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by EstebanBustamante

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:

  1. Open the SASS (LESS) sources
  2. Find and replace the classes you want to rename
  3. 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

1 reply

EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
May 2, 2024

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:

  1. Open the SASS (LESS) sources
  2. Find and replace the classes you want to rename
  3. 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