Twitter bootstrap with AEM 6.5

Avatar

Avatar
Level 1
dexm
Level 1

Likes

0 likes

Total Posts

4 posts

Correct reply

0 solutions
View profile

Avatar
Level 1
dexm
Level 1

Likes

0 likes

Total Posts

4 posts

Correct reply

0 solutions
View profile
dexm
Level 1

28-06-2019

Been looking for a few days on this and I am not finding any good resources. I need to implement twitter bootstrap into my AEM 6.5 project and having a hard time finding any resources on how to go about this. Links are great and thanks!

Replies

Avatar

Avatar
Ignite 1
Employee
dgordon86
Employee

Likes

49 likes

Total Posts

73 posts

Correct reply

26 solutions
Top badges earned
Ignite 1
Give Back 5
Give Back 3
Give Back 10
Give Back
View profile

Avatar
Ignite 1
Employee
dgordon86
Employee

Likes

49 likes

Total Posts

73 posts

Correct reply

26 solutions
Top badges earned
Ignite 1
Give Back 5
Give Back 3
Give Back 10
Give Back
View profile
dgordon86
Employee

28-06-2019

Hi dexm​,

I don't have an exact tutorial. How familiar are you with AEM Client libraries? There are a couple of approaches.

The simplest is to create a new client library and add the distributed Bootstrap CSS/JS and integrate that into your page. Part 3 of the WKND tutorial [0] should give you a decent understanding of how client libraries work and can be integrated into your page. The AEM We.Retail sample site actually uses bootstrap (although its an older version using LESS)

If you want to integrate Bootstrap and extend it using Sass it is possible to integrate it into the build process of your project. A similar approach is used by AEM's SPA editor..instead of React you would just be integrating an external Bootstrap project. This will be much more complicated and require some understanding of Maven and AEM project archetype. [2]

Lastly, you may want to align Bootstrap breakpoints with AEM's responsive grid. This is a decent blog post [3] and I believe the author is working on a more technical example...

HTH!

[0] - 3 - Client-Side Libraries

[1] - aem-sample-we-retail/ui.apps/src/main/content/jcr_root/apps/weretail/clientlibs/vendor/bootstrap at ...

[2] - Adobe Experience Manager Help | Getting Started with React and AEM SPA Editor - Chapter 0

[3] - https://medium.com/adobetech/understanding-how-to-use-the-aem-grid-c52fb6ea6efb

Avatar

Avatar
Ignite 1
Employee
dgordon86
Employee

Likes

49 likes

Total Posts

73 posts

Correct reply

26 solutions
Top badges earned
Ignite 1
Give Back 5
Give Back 3
Give Back 10
Give Back
View profile

Avatar
Ignite 1
Employee
dgordon86
Employee

Likes

49 likes

Total Posts

73 posts

Correct reply

26 solutions
Top badges earned
Ignite 1
Give Back 5
Give Back 3
Give Back 10
Give Back
View profile
dgordon86
Employee

11-07-2019

Just an update in case others find this, there is a new blog post that can help customize the AEM Responsive Grid and integrate with Bootstrap breakpoints: https://medium.com/adobetech/customizing-the-aem-grid-3ff9c2121a36

Avatar

Avatar
Ignite 1
Level 1
rajd82429330
Level 1

Like

1 like

Total Posts

2 posts

Correct reply

0 solutions
Top badges earned
Ignite 1
Give Back
Boost 1
View profile

Avatar
Ignite 1
Level 1
rajd82429330
Level 1

Like

1 like

Total Posts

2 posts

Correct reply

0 solutions
Top badges earned
Ignite 1
Give Back
Boost 1
View profile
rajd82429330
Level 1

03-11-2019

Is it really "integrating" with bootstrap though?
As far as I can tell, following the article would actually create a different css that will "mock" the bootstrap grid and not really extend or integrate with it.