Loading...
 
Skip to main content
(Cached)
1
Page actions
Refresh Print

Making columns for wiki content

{maketoc}

Bootstrap grid in Tiki13

From Tiki 13 we use the responsive Bootstrap CSS Framework to determine the layout of Tiki.

The floated box method previously described here has been made obsolete by the switch to Bootstrap CSS grid compatibility. How to have columns in wiki content using the new Bootstrap method is described below. To see the previous Tiki floating box method, check the page history for earlier versions of the page content.

The method described here uses the Bootstrap layout method without any "shortcuts". It may not be possible - or practical - to duplicate the compactness of the old floating box syntax, but that hasn't really been experimented with yet.

As in Bootstrap the full width of a div is a part of 12 gutters, a number of 1 to 12 elements can be put besides each other, each in a div, using the column classes of Bootstrap. The column classes determine the relative with of the elements and the "breakpoints" based on device width (@media queries), when the elements get vertically stacked (mobile device, tablet, smartphone or shrinking the browser width).

Some examples:

Please mind, that adding the width parts of the class name (the number) must give 12 when added (6+6 or 4+4+4 or 2+2+2+6 or 3+4+3+2 etc.)

The {DIV(class=row)} wraps together the 12-gutter side by side elements and "clearfixes" the content to the following part of the page (or custom module or template, if used with html -> div class="row").

"content" refers to arbitrary elements like text, modules, wikiplugins ...

3 Elements equal width (three times -4), 'side by side' - switching to 'vertically stacked' at lower than medium (-md-) with:

Copy to clipboard
{DIV(class=row)}
{DIV(class=col-md-4)}content{DIV}
{DIV(class=col-md-4)}content{DIV}
{DIV(class=col-md-4)}content{DIV}
{DIV}

2 Elements equal width (twice -6), 'side by side' - switching to 'vertically stacked' at lower than large (-lg-) with:

Copy to clipboard
{DIV(class=row)}
{DIV(class=col-lg-6)}content{DIV}
{DIV(class=col-lg-6)}content{DIV}
{DIV}

4 Elements different width, 'side by side' - switching to 'vertically stacked' at lower than small (-sm-) with:

Copy to clipboard
{DIV(class=row)}
{DIV(class=col-sm-3)}content{DIV}
{DIV(class=col-sm-3)}content{DIV}
{DIV(class=col-sm-2)}content{DIV}
{DIV(class=col-sm-4)}content{DIV}
{DIV}

Examples

Two columns

Random Pages

  1. Bootstrap Components Progress Bars
  2. Greenmetal
  3. Planning for Tiki 13
  4. Related page
  5. Journal
  6. Pagetop Styles and CSS Variables
  7. Included themes
  8. Legacy_themes
  9. Menu styling
  10. Theme Control

Random Pages

  1. Bootstrap Transition Preps
  2. Business
  3. Readable
  4. Topbar hero
  5. Status of Color Modes in Tiki - April 23
  6. Lite
  7. Logo Generator
  8. About
  9. Web Template Repositories
  10. Tiki_org_family_headers_fix_CSS

is produced by:

Copy to clipboard
{DIV(class="row")}{DIV(class="col-md-6")}{MODULE(module=random_pages)/}{DIV}{DIV(class="col-md-6")}{MODULE(module=random_pages)/}{DIV}{DIV}

Three columns

Random Pages

  1. Logo Generator
  2. Tuften
  3. Contributing, sharing or selling a theme
  4. Key_Info
  5. CssStylesDev
  6. Using a11y.css with Tiki
  7. Bootstrap Components
  8. Zephyr
  9. Bootstrap 5 Cheatsheet
  10. Darkshine

Random Pages

  1. Updating a Theme for Tiki 26
  2. Menu Topics
  3. PivotTable_test
  4. Metro Vibes
  5. Open Source Icons
  6. Layout Templates in Tiki 13 to 18
  7. Submit_a_theme_TPL
  8. Tiki project sites navbar improvement
  9. Ohia
  10. Initial Implementation of Color Modes in Tiki

Random Pages

  1. Matrix-light
  2. Lux
  3. IncludeCarousel
  4. Business
  5. All content
  6. PivotTable_test
  7. TikiCorp
  8. Sweet Candy
  9. Organization of button colors in Tiki
  10. Jello-piefecta

produced by

Copy to clipboard
{DIV(class="row")}{DIV(class="col-md-4")}{MODULE(module=random_pages)/}{DIV}{DIV(class="col-md-4")}{MODULE(module=random_pages)/}{DIV}{DIV(class="col-md-4")}{MODULE(module=random_pages)/}{DIV}{DIV}

and

Four columns

Random Pages

  1. Making or Updating a Theme for Tiki 27 and Newer Versions
  2. Status of Color Modes in Tiki - April 23
  3. Utilisation de la fonction APPARENCES et SENSATIONS
  4. Tiki (theme name)
  5. Horizontal menu text styling
  6. Minty
  7. Full-width backgrounds and fixed-width content
  8. Gradient
  9. Bootstrap Components Typography
  10. Bootstrap 5 Cheatsheet

Random Pages

  1. Contributing, sharing or selling a theme
  2. Quartz
  3. CSS Overview
  4. Bootstrap Components Buttons
  5. Theme Revamp
  6. Using a11y.css with Tiki
  7. Smarty Templates
  8. Topbar hero
  9. Boosted
  10. Greenvalley

Random Pages

  1. Cupid
  2. Tiki_org_family_headers_fix_CSS
  3. Infinite_carousel testing
  4. RecentFileChanges
  5. Greenvalley
  6. Simple_vertical_timeline
  7. PluginList_test
  8. Front_page_message
  9. Default2 (old)
  10. Look_and_Feel_options_schematic

Random Pages

  1. Tiki layout overview for designers
  2. Bootstrap Transition Preps
  3. Cosmo
  4. Transition to Bootstrap - 2013
  5. WikiPageDivs
  6. Bootstrap 5 Cheatsheet
  7. Updating a Tiki theme from Bootstrap 3 to 4
  8. Bootstrap Components Navbar
  9. Finding a theme
  10. tiki-index.php

produced by

Copy to clipboard
{DIV(class="row")}{DIV(class="col-md-3")}{MODULE(module=random_pages)/}{DIV}{DIV(class="col-md-3")}{MODULE(module=random_pages)/}{DIV}{DIV(class="col-md-3")}{MODULE(module=random_pages)/}{DIV}{DIV(class="col-md-3")}{MODULE(module=random_pages)/}{DIV}{DIV}

Boxes can have any content, not just a module, like this :

produced by:

Copy to clipboard
{DIV(class="row")}{DIV(class="col-md-6")}{DIV(class="panel panel-default panel-body")}Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.{DIV}{DIV}{DIV(class="col-md-6")}{DIV(class="panel panel-default panel-body")}Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.{DIV}{DIV}{DIV}

Mix of modules and other divs

produced by

Copy to clipboard
{DIV(class="row")}{DIV(class="col-md-6")}
!! Lorem Ipsum
Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken.{DIV}{DIV(class="col-md-6")}
{MODULE(module=random_pages)/}{DIV}{DIV}

Tiki 12

The Bootstrap grid layout can work as well in Tiki 12 if the grid CSS rules are gotten from bootstrap.css (available at

In Tiki 12, you may also be able to use a Tiki 13 version of templates/layouts/.../layout_view.tpl, to have the grid rules applied to the module zones and left, right and main columns of the page.

Page last modified on Sunday 14 of September, 2025 06:23:11 UTC
History Source Comments
Collapse/expand modules below