I want to create my own template and I want it to be based on Bootstrap 4 (but I might change in the future).

I can create my module positions, but how do I then assign a class to each module i.e. class="col"

  • I assume you mean without adding it to the "Module Class Suffix" field? – Lodder Jun 14 '18 at 21:35
  • Yes, Understand how to do that. I'm building a template, I don't want to add it to each and every module. I suppose it would make sense to create overrides using the same framework, but in the interests of learning I'd like to understand how to make my own classes using any framework. – Eoin Jun 14 '18 at 22:13
  • 1
    In which case why not create a modChrome? Check the Joomla 4 Atum template ones for an example: github.com/joomla/joomla-cms/blob/4.0-dev/administrator/… – Lodder Jun 14 '18 at 23:51
  • 1
    You're welcome ;) Be sure to add your code as an answer below and you'll get my upvote – Lodder Jun 15 '18 at 15:57
  • Yeah, sure will – Eoin Jun 15 '18 at 15:58


// Count the modules
$belowBanner = ($this->countModules('belowBanner'));
// if the position below module has modules then output code
        <?php if ($belowBanner) : ?>
// my container div gives the width.  Bootstrap requires a div with the class row for each row.  I also add a section.
            <div class="container">
                <div class="row">
                    <section id="<?php echo "belowBanner" ?>">
// insert a module position.  The type is always modules.  Give it a unique name "belowBanner" and give it the default module chrome of "bootstrap4"
                        <jdoc:include type="modules" name="belowBanner" style="bootstrap4" />
        <?php endif ?>

module.php which is in the folder /html/

     * @package     Joomla.Administrator
     * @subpackage  Templates.joomla-london
     * @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
     * @license     GNU General Public License version 2 or later; see LICENSE.txt
    defined('_JEXEC') or die;
     * This is a file to add template specific chrome to module rendering.  To use it you would
     * set the style attribute for the given module(s) include in your template to use the style
     * for each given modChrome function.
     * This gives template designers ultimate control over how modules are rendered.
     * NOTICE: All chrome wrapping methods should be named: modChrome_{STYLE} and take the same
     * two arguments.
     * Module chrome for rendering the module in a belowBanner

    // make sure you name it correctly.  it always starts modChrome and I have named it bootstrap4 as I will be using that framework.  I could have called it anything, but I thought this was the most meaningful/descriptive name.
    function modChrome_bootstrap4($module, &$params, &$attribs)
    // if the module has content
        if ($module->content)
            // Get module params
    // get Bootstrap size and make sure it is returned as an integer
            $bootstrapSize = (int) $params->get('bootstrap_size');
    // if nothing has been selected then just use the class cols
$cols = "col";

    // if the bootstrap class is anything except 0 then insert the class cols- and add the bootstrap size class
            if ($bootstrapSize != '0') {
 $cols = "col-" . $bootstrapSize;}

    // If the modules title is set to show... then show it
            if ($module->showtitle)
                echo '<h2>' .$module->title .'</h2>';
    // output a div and add the column class to it.  It will either be col or col-x depending on the bootstrap size.  So perhaps col-6 or col-4
        <div class="items<?php echo " ". $cols;?> ">
            <div class="item">
    // output the module content
                <?php echo $module->content; ?>


| improve this answer | |
  • Please could you mark the answer as "accepted" so others know it has been solved? Thanks – Lodder Jun 18 '18 at 12:49
  • Thanks CL have done so. Let me.knoe.if you think there is any way to improve it – Eoin Jun 18 '18 at 12:54
  • 1
    Couple of minor tweaks if you want to use it: pastebin.com/tkFGAM4C – Lodder Jun 18 '18 at 13:01
  • Thank you, that was very useful. My code was overly wordy. Also a good idea to put the class items before the column numbers. Thanks, much cleaner now, really appreciate you taking the time to do that. – Eoin Jun 18 '18 at 13:20
  • 1
    No worries Eoin. Yeah I normally put hardcoded classes before as it prevents any whitespace if any dynamic class gets added. – Lodder Jun 18 '18 at 13:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.