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

How do I add nice fluid columns inside my Joomla Articles?

Normal we would use the following code in our Joomla articles to add content with an image algined to the left.

<p><img src="images/apple.jpg" alt="apple" style="float:left;" />This is my article text with an image aligned left.</p>

The above is fine and will respond nicely on smaller devices.

But, let's say I want to create 3 columns of information... Well, try the following:

<div class="row-fluid">
   <div class="span6">...</div>
   <div class="span6">...</div>
</div>

This will give to a nice fluid 2 column grid inside your Joomla article.

Or to have a 4 columns grid, leading with a span of 6, then 3 and 3 - all on the same row,  try the following:

<div class="row-fluid">
<div class="span6">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
</div>

Supporting Partners

stackideas
sobipro
k2
akeebabackup
jomsocial
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