Module A

This module is in position-3 with a Module Class Suffix of span4 assigned.

Module B

This module is in position-3 with a Module Class Suffix of span4 assigned.

Module C

This module is in position-3 with a Module Class Suffix of span4 assigned.

If you create a module, there is an option under the Advanced tab called Bootstrap Size with a drop down selector. At this time, the Protostar template does not use this information.

Module Class Suffix text area

You may however assign a class name of span1, span2, span3, etc, in the Module Class Suffix text area under the Advanced Tab. Be sure that you leave a space before span* or it will append it to other terms and the template.css will not style it properly.

What this does is add the span* class to the module as shown below:

<div class="moduletable span4">
    <div class="custom span4">
        --- Content of the module ---
    </div>
</div>

There is a problem with this method in that template.css assigns a percentage for each span class. This is a percentage of the containing element. Here is an example:

.row-fluid .span4 {   
    width: 31.9149%
}

So what happens if for example you want three modules in position-3 to sit side by side? If you have modules in position-7 and position-8, position-3 will have a span6 class assigned. It would make sense that you would then assign a class of span2 to fill span6 in three columns, but since the percentage for the width applies to the containing element, you need to give each module a class name of span4 to have three sit side by side. The modules will also they will stack nicely for responsive web design.

The problem is now that the interior <div class="custom span4"> is a percentage of the containing <div class="moduletable span4">, so it is much to narrow.

A work around is to add the following line to your custom style sheet.

.moduletable div.span4 {width: 100%}

There may be some other styling that you need to add for your modules to look they way you wish.

Another approach is to create your own class, rather than the span classes, and then style this class to sit side by side. See the bj.zemplate.com article: How to have three modules sit side by side in one position


Has BJ.Zemplate.com helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts


Still not finding a special topic?

Use Google's Search function below for search the content of bj.zemplate.com.