Page layout tags let you create layouts using Bootstrap 3 within your portlets.
This tutorial explains the <aui:*>
tags that developers can use to create
layouts.
AUI Container
The <aui:container>
tag creates a container <div>
tag to wrap <aui:row>
components and offer additional styling.
It supports the following attributes:
Attribute | Type | Description |
---|---|---|
cssClass | String | A CSS class for styling the component |
dynamicAttributes | Map<String, Object> | Map of data- attributes for your container |
fluid | boolean | Whether to enable the container to span the entire width of the viewport. The default value is true |
id | String | An ID for the component instance |
AUI Row
The <aui:row>
tag creates a row to hold <aui:col>
components.
It supports the following attributes:
Attribute | Type | Description |
---|---|---|
cssClass | String | A CSS class for styling the component |
id | String | An ID for the component instance |
AUI Col
The <aui:col>
tag creates a column to display content in an <aui:row>
component.
It supports the following attributes:
Attribute | Type | Description |
---|
Example JSP
Below is an example layout created in a portlet:
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<aui:container cssClass='super-awesome-container'>
<aui:row>
<aui:col md="4" sm="6">
<h2>Some fun content using the 'md' and 'sm' attributes</h2>
</aui:col>
<aui:col md="8" sm="6">
<p>
Some text here.
</p>
</aui:col>
</aui:row>
<aui:row>
<aui:col width="<%= 40 %>">
<h2>Some fun content using the 'width' attribute</h2>
</aui:col>
<aui:col width="<%= 60 %>">
<p>
Cool text here.
</p>
</aui:col>
</aui:row>
<aui:row>
<aui:col span="<%= 4 %>">
<h2>Some fun content using the 'span' attribute</h2>
</aui:col>
<aui:col span="<%= 8 %>">
<p>
Nice text here.
</p>
</aui:col>
</aui:row>
</aui:container>
Now you know how to create layouts inside your portlets!