Loading...
 
Create a Bootstrap responsive grid

Plugin Fluidgrid

Introduced in Tiki 17 by Phil Jollans but will probably be backported to Tiki16 at least.

Use this wiki plugin to create a Bootstrap responsive grid (see https://getbootstrap.com/examples/grid/) in Tiki's wiki text areas. That is, rows and columns of text, images, etc. can be created that will be arranged horizontally in wide screens but will respond dynamically in smaller screens so that good visibility of content is maintained.

This is a modern, "best practices" alternative to using the Split plugin, which creates a table for content layout, a deprecated method.

Parameters

Arrange content into rows and columns using a Bootstrap fluid grid.
Introduced in Tiki 17.
Go to the source code
Preferences required: wikiplugin_fluidgrid

Parameters Accepted Values Description Default Since
(body of plugin) Text to display in a grid. Use "---" to separate the columns and "@@@" to separate rows.
customclass text Add a class to customize the design 17
colsize text Specify all column widths in units which add up to 12 17
devicesize (blank)
sm
md
lg
xl
Specify the device size below which the cells will be stacked vertically sm 17
first (blank)
col
line
Cells specified are ordered first left to right across rows (default) or top to bottom down columns line 17
joincols (blank)
y
n
Merge empty cells into the cell to their left y 17


Usage

There are two ways to use this plugin:

1. The syntax can be copied from these examples and pasted in the wiki edit text area, or otherwise the syntax can be written by hand following the examples on this page.

Or:

2. Alternatively, as with other plugins, the Help icon (question mark in a circle at the right end of the edit toolbar) can be clicked to open a modal window. Then open the Plugin Help tab and find and click the Split plugin icon. This will open another modal window where the plugin can be configured.

If the second method is chosen, there is another choice in ways to proceed:

1. No table content initially selected (highlighted)
If no text in the wiki edit screen is selected before opening the Plugin Help window, then after entering some configuration details, click the Insert button in the plugin's form. This will paste the opening tag of the Fluidgrid plugin into the editor text area. However, the syntax will be incorrect. Clicking "Insert" will paste the plugin name in lowercase letters, and there will be no parentheses around the parameters. You must change the plugin name to use all uppercase letters, and then put parentheses around the parameters as shown in the examples on this page. Then add the syntax for the rows and columns, and the content, and finally add the closing plugin tag, again in all capital letters, surrounded by curly braces.

2. Some or all table content selected (highlighted)
To save time and simplify editing, you can input some or all of the table's row and column syntax and/or table content, and select this before clicking the Help icon to open the Plugin Help window. Then after making the Fluidgrid module configuration choices in the form, click the "Replace" button, and the plugin's full and correct syntax will be input in the edit screen automatically.

Examples

Three rows, two equal-width columns

Copy to clipboard
{FLUIDGRID()} A1 --- A2 @@@ B1 --- B2 @@@ C1 --- C2 {FLUIDGRID}


produces:

A1
A2
B1
B2
C1
C2

Three row, four columns

Copy to clipboard
{FLUIDGRID()} A1 --- A2 --- A3 --- A4 @@@ B1 --- B2 --- B3 --- B4 @@@ C1 --- C2 --- C3 --- C4 {FLUIDGRID}


produces:

A1
A2
A3
A4
B1
B2
B3
B4
C1
C2
C3
C4

Three rows of four columns, with column size specified.

As per the Bootstrap spec, the column sizes are integers that total 12. The small-screen breakpoint is used (the grid divs have a "col-sm-n" class).

Copy to clipboard
{FLUIDGRID(colsize=>6|2|2|2)} A1 --- A2 --- A3 --- A4 @@@ B1 --- B2 --- B3 --- B4 @@@ C1 --- C2 --- C3 --- C4 {FLUIDGRID}


produces:

A1
A2
A3
A4
B1
B2
B3
B4
C1
C2
C3
C4

FLUIDGRID plugin 4X3 with partial column size.

Copy to clipboard
{FLUIDGRID(colsize="1|||5")} A1 --- A2 --- A3 --- A4 @@@ B1 --- B2 --- B3 --- B4 @@@ C1 --- C2 --- C3 --- C4 {FLUIDGRID}


produces:

A1
A2
A3
A4
B1
B2
B3
B4
C1
C2
C3
C4

FLUIDGRID plugin 4X3 with customclass

Copy to clipboard
{FLUIDGRID(customclass="wolf")} A1 --- A2 --- A3 --- A4 @@@ B1 --- B2 --- B3 --- B4 @@@ C1 --- C2 --- C3 --- C4 {FLUIDGRID}


produces:

A1
A2
A3
A4
B1
B2
B3
B4
C1
C2
C3
C4

FLUIDGRID plugin using column mode

Copy to clipboard
{FLUIDGRID(first=>'col')} A1 --- A2 --- A3 @@@ B1 --- B2 --- B3 @@@ C1 --- C2 --- C3 {FLUIDGRID}


produces:

A1
B1
C1
A2
B2
C2
A3
B3
C3


FLUIDGRID plugin with colsize specified in PERCENT

When one of the parameter values of colsize is specified in PERCENT, the total weighting is always 100 with a minimum size of 1 of 12 (Grid bootstrap)

The total can be less than 12, e.g. two columns with 25%|25% will be translated to 3|3 and not 6|6.

When some columns are specified in PERCENT and the rest are not specified, the size is an approximate weighting, relative to 100, with a minimum size of 1.
All columns with an unspecified width are fill up remaining space, e.g. 3 columns with 25%|25% should translate to 3|3|6

Exemples

Copy to clipboard
{FLUIDGRID(colsize="20%|50%|30%")} A1 --- A2 --- A3 @@@ B1 --- B2 --- B3 @@@ C1 --- C2 --- C3 {FLUIDGRID}


produces:

A1
A2
A3
B1
B2
B3
C1
C2
C3


and

Copy to clipboard
{FLUIDGRID(colsize="20%|20%")} A1 --- A2 --- A3 @@@ B1 --- B2 --- B3 @@@ C1 --- C2 --- C3 {FLUIDGRID}


produces :

A1
A2
A3
B1
B2
B3
C1
C2
C3




Aliases

FluidGrid

doc.tiki.org

Get Started

Admin Guide User Guide

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
Articles and Submissions
Backlinks
Banners
Batch
BigBlueButton audio/video/chat/screensharing
Blog
Bookmark
Browser Compatibility
Link Cache
Calendar
Category
Chat
Clean URLs
Comments
Communication Center
Compression (gzip)
Contacts (Address Book)
Contact us
Content Templates
Contribution
Cookie
Copyright
Credit
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
Draw
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)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
Kaltura video management
Karma
Live Support
Login
Logs (system & action)
Look and Feel
Mail-in
Map with Mapserver
Menu
Meta Elements
Mobile Tiki and Voice Tiki
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
Shadowbox
Shadow Layers
Share
Shopping cart
Shoutbox
Slideshow
Smiley
Social Networks
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Stats
Surveys
Tags
Task
Tell a Friend, alert + Social Bookmarking
TikiTests
Theme CSS & Smarty
Tiki Manager
Trackers
Transitions
User Administration including registration and banning
User Files
User Menu
Watch
WebDAV
Webmail
Web Services
Wiki History, page rename, etc
Wiki Syntax
Wiki structure (book and table of content)
Workspace
WSOD
WYSIWYCA
WYSIWYG
XMLRPC

Tiki Newsletter

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