Using CoralUI and Bootstrap3 on the same page | Community
Skip to main content
Julio_Tobar
Level 3
April 28, 2016
Solved

Using CoralUI and Bootstrap3 on the same page

  • April 28, 2016
  • 2 replies
  • 1190 views

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?

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 Lokesh_Shivalingaiah

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. 

2 replies

smacdonald2008
Level 10
April 29, 2016

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

Lokesh_Shivalingaiah
Lokesh_ShivalingaiahAccepted solution
Level 10
May 2, 2016

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.