Using CoralUI and Bootstrap3 on the same page

[Julio_Tobar]

Scenario: we have a group of UI developers who are very knowledgeable on Bootstrap and would like to continue to use it with AEM at the same time leverage the widgets provided by Coral UI.

what  have we tested:

1. We have included both frameworks on a page but obviously they collide.

<cq:includeClientLib categories="coralui, cq.social.bootstrap.3" /> <header class="top"> <div class="logo"><img src="..." alt="DMS logo"></div> <nav class="main"> <a href="#" class="selected">Home</a> <a href="#">Activities</a> <a href="#">Admin</a> </nav> <div class="drawer"> <div class="badge">5</div> </div> </header>

produces this result with wrong CSS:

2. We took at look at how Geometrixx Community site (http://localhost:4502/editor.html/content/geometrixx-media/en/community.html) is implemented

We realized it does not use Bootstrap for responsiveness but instead it uses coralUI classes:

<div class="row-fluid"> .... <div class="aem-GridColumn welcome-message"> .....

Question: Can we include coralUI and Bootstrap on the same page?

[smacdonald2008]

I have asked the Touch UI team to look at this one. 

[Lokesh_Shivalingaiah · Accepted solution]

You can use both of them. However, there would be some discrepancies between both of them which needs to be overridden by your custom clientlibs.