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!
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)
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!!!
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