Learn how to integrate Bootstrap framework with AEM and create a custom Login component using HTL and Bootstrap

[AnkurAhlawat]

The aim of this tutorial is to create Login component in AEM Using HTL (formally know as Sightly) and Bootstrap Framework. I have decided to use Bootstrap as it provides a very rich collection of responsive components , which will save my time from writing css and js for this component and we can focus on functionality of this component.

Lets take the use case for build this component:- You are building a website for a social networking site  or a restricted user site and you want to restrict unauthorized users from accessing it, for that you are asked to build a login component which will authorize your users.

• Users that are  available only on publish instance are authorized to access the website.
• Login component should have Remember Me functionality to remember user name.(Using cookies)
• Heading, SubHeading, Logo and alt text of logo should be configurable.

For more info Visit http://www.aemcq5tutorials.com/tutorials/adobe-aem-cq5-tutorials/create-login-component-in-aem-using...

[kautuk_sahni]

Thanks a lot for sharing the article with the community.

Keep the good community work going on. 

~kautuk

[daleg86991897]

This does work BUT as soon as Bootstrap is included it starts interfering with the AEM UI. If you look at your screenshots you'll see that the 'Drag components here' boxes are now thinner than they should be. Is there a fix for this or do you know the specific bootstrap CSS which is causing this?