Loading...
 

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-sm-... 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,
{DIV(class="row")}{DIV(class="col-sm-6")}This is a ''col-sm-6'' div.{DIV}
{DIV(class="col-sm-3")}A ''col-sm-3'' div{DIV}
{DIV(class="col-sm-3")}Another ''col-sm-3'' div{DIV}{DIV}


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

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


Adding some content:

{DIV(class="row")}{DIV(class="col-sm-6")}
!!! This is a ''col-sm-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-sm-3")}
!!! A ''col-sm-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-sm-3")}
!!! Another ''col-sm-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-sm-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-sm-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-sm-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:

{DIV(class="row")}{DIV(class="col-md-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-md-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-md-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




Contributors to this page: Gary Cunningham-Lee and Torsten Fabricius .
Page last modified on Thursday 29 October, 2015 12:49:45 UTC by Gary Cunningham-Lee.

doc.tiki.org


Bootstrap

AdminGuide

UserGuide

Keywords

Keywords serve as “hubs” for navigation within the Tiki documentation. They correspond to development keywords (bug reports and feature requests):

Accessibility (WAI and 508)
Accounting (7.x)
Articles and Submissions
Backlinks
Banners
Batch (6.x)
BigBlueButton audio/video/chat/screensharing (5.x)
Blog
Bookmark
Browser Compatibility
Link Cache
Calendar
Category
Chat
Clean URLs
Comments
Communication Center
Compression (gzip)
Contacts (Address Book)
Contact us
Content Templates
Contribution (2.x)
Cookie
Copyright
Credit (6.x)
Custom Home and Group Home Page
Date and Time
Debugger Console
Directory of hyperlinks
Documentation link from Tiki to doc.tiki.org (Help System)
Docs 8.x
Draw 7.x
Dynamic Content
Dynamic Variable
External Authentication
FAQ
Featured links
File Gallery
Forum
Friendship Network (Community)
Gmap Google maps
Groups
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
Kaltura video management (4.x)
Karma
Live Support
Login
Logs (system & action)
Look and Feel
Lost edit protection
Mail-in
Map with Mapserver
Menu
Meta Tags
Mobile Tiki and Voice Tiki
Mods
Module
MultiTiki
MyTiki
Newsletter
Notepad
Payment
Performance Speed / Load
Permissions
Platform independence (Linux-Apache, Windows/IIS, Mac, BSD)
Polls
Profiles
Profile Manager
Report
Toolbar
Quiz
Rating
Feeds
Score
Search engine optimization
Search
Search and Replace
Security
Semantic links (3.x)
Shadowbox
Shadow Layers
Share
Shopping cart
Shoutbox
Slideshow
Smiley
Social Networks
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Stats
Surveys
Tags (2.x)
Task
Tell a Friend, alert + Social Bookmarking
TikiTests (2.x)
Theme CSS & Smarty
Trackers
Transitions (5.x)
TRIM
User Administration including registration and banning
User Files
User Menu
Watch
WebHelp
WebDAV (5.x)
Webmail
Web Services
Wiki 3D
Wiki History, page rename, etc
Wiki Page Staging and Approval (2.x)
Wiki Plugin extends basic syntax
Wiki Syntax
Wiki structure (book and table of content)
Workspace
WSOD
WYSIWYCA
WYSIWYG (2.x)
XMLRPC


Tiki Newsletter

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other news!
Contribute to Tiki
Show php error messages