Bootstrap Grid System Tutorial - Tutorial Bootstrap 3 - Grid System
Bootstrap Grid System Tutorial - Tutorial Bootstrap 3 - Grid System
Bootstrap Framework Tutorial - Bootstrap Framework
• Bootstrap Framework Tutorial - Bootst...
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.
Bootstrap 3.0 Tutorial - Grid System - 1
• Bootstrap 3.0 Tutorial - Grid System - 1
Bootstrap Tutorial for Beginners - 2 - Grid System
• Bootstrap Tutorial for Beginners - 2 ...
Bootstrap 3.0 Grid System
• Bootstrap 3.0 Tutorial - Grid System - 1
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.