Possible entries are e. g. (of course without '):

(1) Example 6 to 6

{'row}{'span6}Lorem ipsum ...{/span}{'span6}Lorem ipsum ...{/span}{/row}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo

(2) Example 4 to 8

{'row}{'span4}Lorem ipsum ...{/span}{'span8}Lorem ipsum ...{/span}{/row}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo

(3) Example 8 to 4

{'row}{'span8}Lorem ipsum ...{/span}{'span4}Lorem ipsum ...{/span}{/row}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

(4) Example 4 to 4 to 4

{'row}{'span4}Lorem ipsum ...{/span}{'span4}Lorem ipsum ...{/span}{/row}{'span4}Lorem ipsum ...{/span}{/row}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
{span4}Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.{/span}{/row}

(5) Example Flex 6 to 8

{'row type="flex"}{'span6}Lorem ipsum ...{/span}{'span6}Lorem ipsum ...{/span}{/row}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

(6) Example 6 to 6 with css class

{'row class="someClass" style="background:red;"}{'span6}Lorem ipsum ...{/span}{'span6}Lorem ipsum ...{/span}{/row}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

(1) Syntax

Possible entries are e. g. (of course without '):

  • {'row}{'span6}Lorem ipsum ...{/span}{'span6}Lorem ipsum ...{/span}{/row}
  • {'row}{'span4}Lorem ipsum ...{/span}{'span8}Lorem ipsum ...{/span}{/row}
  • {'row}{'span8}Lorem ipsum ...{/span}{'span4}Lorem ipsum ...{/span}{/row}
  • {'row}{'span4}Lorem ipsum ...{/span}{'span4}Lorem ipsum ...{/span}{/row}{'span4}Lorem ipsum ...{/span}{/row}
  • {'row}{'span3}Lorem ipsum ...{/span}{'span3}Lorem ipsum ...{/span}{/row}{'span6}Lorem ipsum ...{/span}{/row}

Explanation: The sum of the numbers behind 'span' adds always up to 12, as the page itself is devided in 12 imaginary cols. The number tells you how much room the generated col will take, e. g. span6 = 6/12 = 0,5 page or; span2 = 2/12 = 1/6 page.

(2) Parameters

(2.1) Use styles:
If this setting is set to yes, the bootstrap framework will be called. If you already use a bootstrap template, set to no.

(2.2) Default
Default setting whether usual bootstrap rows (row-fluid) or flex system is used.

(2.2) Row settings (for straight bootstrap):

  • padding: Padding of div box
  • text-align: alignement of text, i. e. left, right, justify or center

(2.3) Flex settings (for flex boxes):

Alternatively you can use the flex version. For this add type="flex" within your tag.

  • padding: Padding of flex box
  • text-align: alignement of text, i. e. left, right, justify or center
  • mobile switch:
    integer, pixel width, when horizontal flex boxes will switch to vertical alignment

(2.4) Param setting / override within tag:

Within the row tags params can be overridden or be set; these params are:

  • type, values either "row-fluid" or "flex"
  • class, for setting css class
  • id, for setting css id
  • style, for setting additional css style commands

Here some examples:

  • {'row type="flex"}{'span6}Lorem ipsum ...{/span}{'span6}Lorem ipsum ...{/span}{/row}
  • {'row type="row-fluid"}{'span6}Lorem ipsum ...{/span}{'span6}Lorem ipsum ...{/span}{/row}
  • {'row id="someId" type="row-fluid"}{'span6}Lorem ipsum ...{/span}{'span6}Lorem ipsum ...{/span}{/row}
  • {'row class="someClass" style="background:red;"}{'span6}Lorem ipsum ...{/span}{'span6}Lorem ipsum ...{/span}{/row}

qlboot helps you to divide your article's text into columns. It is based on bootstrap framework which is called via Joomla!

Add tags like {'row}{'span6}Lorem ipsum ...{/span}{'span6}Lorem ipsum ...{/span}{/row} into article to generate cols (of course without ').

Feature Basic PRO
Mobile switch  
Editor button  
Bugfix
Support