Bootstrap Grid in Wiki Syntax


The Bootstrap CSS framework was introduced into Tiki in release 13. It provides the foundation for a layout grid for content in wiki pages and other sections of the site that uses wiki syntax, such as blog posts, forum posts, and CMS articles. The benefits of this grid are an organized, attractive and responsive layout for page content. Columns to hold text, modules, images and so on can be arranged uniformly for readability. And the page will look good and work well in all display sizes from large PC monitors down to smartphone screens. The grid components react at display-width "breakpoints" to rearrange themselves to stay in view. This page describes how to use the Bootstrap grid in wiki text.

Tiki has a legacy wiki plugin, Split, that creates an HTML table to provide columns and cells, but using tables for this purpose has been a deprecated practice for years. Unless there is a compelling reason to use a table, divs should be used instead.

Grid basics

Bootstrap, by default, uses a grid that is 12 units wide. Columns can be specified to be the width of from one to 12 of these units. (The columns' widths are a percentage of the width of their container.) For more information about the Bootstrap grid itself, see https://getbootstrap.com/css/#grid. Examples are shown here: https://getbootstrap.com/examples/grid/. Not only width, but visibility/invisibility per display size can also be specified.

Gridding in Tiki

The Tiki site (version 13 or later) overall uses this kind of grid to position left and/or right columns and the main column. Then, within the site, in the module zones as well as any area where a text editor is used, contents can be placed in grid rows and columns.

The grid is made with HTML div elements. These can be made by entering HTML syntax if HTML is enabled for the page or if the HTML plugin is used. Or they can be made with wiki syntax, using the DIV wiki plugin.

By one method or another, a div class="row" should be created, and inside that the column divs are created. Following the examples at the Bootstrap site, make the divs appropriate for the content to go into them. For the purposes of wiki area grids, probably using col-xs-... classes wil work well (this generally means the columns will stack vertically in smartphone displays but will be arranged side by side in tablet and PC displays). Of course the page should be viewed in various devices to check the responsive behavior.

For example,

Copy to clipboard
{DIV(class="row")}{DIV(class="col-xs-6")}This is a ''col-xs-6'' div.{DIV}
{DIV(class="col-xs-3")}A ''col-xs-3'' div{DIV}
{DIV(class="col-xs-3")}Another ''col-xs-3'' div{DIV}{DIV}


produces (with the line returns removed from the code above):

This is a col-xs-6 div.
A col-xs-3 div
Another col-xs-3 div


Adding some content:

Copy to clipboard
{DIV(class="row")}{DIV(class="col-xs-6")}
!!! This is a ''col-xs-6'' div.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.{DIV}{DIV(class="col-xs-3")}
!!! A ''col-xs-3'' div
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. {DIV}{DIV(class="col-xs-3")}
!!! Another ''col-xs-3'' div
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.{DIV}{DIV}


produces:

This is a col-xs-6 div.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.

A col-xs-3 div

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Another col-xs-3 div

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.


Another example:

Copy to clipboard
{DIV(class="row")}{DIV(class="col-xs-3" bg="#cdbe23")}
~~#FFF:Some content in a narrow box (3 of 12 grid units wide)~~

{img fileId="607" responsive="y" link="#" title="example image" alt="example image"}

{DIV}{DIV(class="col-xs-6" bg="#f8f9d4")}
More content in a wider box (6 of 12 grid units wide) - keep in mind that Bootstrap is a 12-unit grid system.

{img fileId="428" link="#" responsive="y" title="example image" alt="example image"}

{DIV}{DIV(class="col-xs-3" bg="#a09d1e")}
More content in a narrow right-side box (3 of 12 grid units wide)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

{module module="top_pages"}
{DIV}{DIV}


produces:

Some content in a narrow box (3 of 12 grid units wide)

example image

More content in a wider box (6 of 12 grid units wide) - keep in mind that Bootstrap is a 12-unit grid system.

example image

More content in a narrow right-side box (3 of 12 grid units wide)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.