Learn how to integrate Bootstrap framework with AEM and create a custom Login component using HTL and Bootstrap | Community
Skip to main content
AnkurAhlawat-1
AnkurAhlawat-1
Level 6
April 18, 2017

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

  • April 18, 2017
  • 2 replies
  • 7633 views

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-htl/

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

2 replies

kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
April 18, 2017

Thanks a lot for sharing the article with the community.

Keep the good community work going on. 

~kautuk

Kautuk Sahni
D
daleg86991897
July 19, 2017

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?

Terms & ConditionsAccessibility statement

Loading footer...