Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Bootstrap v3 for AEM 5.6.1 / 6.0.x


So we all know the out of the box components and responsive grid system that offers for a standard web dev, so I decided to see how hard this would be create a set of templates, layout components and components that can be used AEM while offering an editor a nice editing environment, and it seems that after a few days it wasn’t that hard , so I’ve attached a package to allow you to see what I’ve been done and what types of layouts you can create with a few select components, with more being developed on a daily basis.


Ive added 3 designs bootstrap-default , bootstrap-paper and bootstrap-superhero, so you can swap them in design on advanced page properties.


I have a total of 7 templates each one being available as fixed and fluid containers. The red outline is just in edit mode.

Template 1

template 1 example

Template 2

template 2 example

Template 3

template 3 example

Template 4

template 4 example

Template 5

template 5 example

Template 6

template 6 example

Template 7

template 7 example

this is just a simple parses which can accept any components so you can made and create crazy layouts using columns , and rows.


Each dialog for the columns allow you to define the extra bootstrap grid system classes like , col-sm-* , col-lg-* to allow for the response nature of the pages.


So the idea behind the components to make as much as possible editable from the view and not as much in properties, an example of this are carousels, it seems to be the standard to define the images and allowed content inside of a properties and then load them in that way, so i’ve tried to implement more drag and drop components and then edit the components and add little dialog properties.


Some issues around the designer aspect of this but it works with multiple accordions on a single page, and allows for anything dropped inside of the parsys.

Accordion Responsive

So here we are going see how we can control the responsive behaviour of the columns by adding on bootstrap col-sm-* col-xs-* but there are a lot more documented by default the columns are all col-md-*.

Tab Container

So i’ve only seen tab containers made up using properties, so this one uses drag and drop components.


Collection of bootstrap components , grid system for use in AEM 5.6.1 / 6.0.x



No packages published


You can’t perform that action at this time.