Hints, Tips 'n Tutorials
Template Discussions
Modules / Extensions
Joostrap 101
Discussion Index

With Joostrap templates optimising the integration of Boostrap responsive website design and development in Joomla, we have unlimited layout possibility for modules AND increased felxibility for displaying content across our Joomla sites in a mobile friendly, responsive way.

The image below shows the normal way we “used to” layout out a template, with 'fixed' module positions.

The template modules positions were fixed and no other module position could be added to any of the rows unless you added it to the index.php file of the template & knew your css to sort out the div's and positioning....

Not good! as it fixes our layout & is not flexible!

normal template positions

How JooStrap with Bootstrap does things

The image below is the equivalent to the above fixed positions layout, but how we would do it in Joostrap.

Note that it is only one module position called "below"! This one module position spans all of the 12 columns of the template. But (the clever part) we are adding modules in the same module position with module class suffixes.

This tutorial below is based on Boostrap2

... which uses spans.  In Bootstrap3 we use the col-md-, col-sm-, etc class syntax.  The grid is still based on 12 ... just the naming has changed and some extra functionality added.  The basic conventions and way it works remains pretty much the same ... you can check out more in our learning centre.

span4 | span4 | span4 (which adds up to our 12 columns)

joostrap equivelant template positions

Taking things further with Joostrap

Taking the above even further - the next image shows you that you can just keep on adding modules in the same row, with loads of spans - totally dictating the layout of the page.... all with just ONE module position <<< crazy hey!!!

joostrap numerous template positions

Then, we can add additional css to our custom.css file, to add module layout/design changes to individual modules on the same row.

span4 blue | span4 orange | span4 red
span6 purple | span6 pink

Supporting Partners

jce editor


Our Preferred Joomla Host's

Web Hosting

Get in Touch With us

For account or Joostrap enquiries, please get in touch with us here.

Contact us