Protostar: 3 module position horizontally above and below content

Question

I'm trying for Joomla Protostar template to create 3 custom module positions above and below the content area.

I have added the positions to the templateDetails.xml. And I figured that I then have to add the positions into the index.php.

Around line 180 I have this section:

        <main id="content" role="main" class="<?php echo $span; ?>">
            <!-- Begin Content -->
            <jdoc:include type="modules" name="position-3" style="xhtml" />
            <jdoc:include type="message" />
            <jdoc:include type="component" />
            <jdoc:include type="modules" name="position-2" style="none" />
            <!-- End Content -->
        </main>

And then if I'm right, my code for my Top positions will go before "message" and bottom after "component", using?

<jdoc:include type="modules" name="position-4" style="xhtml" />

but not sure how to do this correctly?

My custom positions Bottom A-B-C and Top A-B-C needs to be horizontally in 3 columns and fill 100% of the main sections width.

For example, if I place a module only on Bottom-A, then that module will fill 100% of the width (same width as position-2). If I place a module on e.g. Bottom A and B they are to be 50/50. If I place a module on Bottom A, B and C they will be 1/3 of the width each (like on position image below)

Had a look at this thread: how to make custom positions stack horizontally rather than vertically

With a little modification by the code given in that thread, did give me 3 horizontal positions, but they weren't correctly aligned with e.g position-2 and didn't function according to my wishes.

<div class="row">
    <div class="bottom-a">
        <?php if ($this->countModules('position-9')) : ?>
             <!--custom position 9 'Bottom-A' -->
            <div id="top-2a" class="span3">
                <jdoc:include type="modules" name="position-9" style="xhtml" />
            </div>
             <!-- End Sidebar -->
            <?php endif; ?>
    </div>
    <div class="bottom-b">
        <?php if ($this->countModules('position-10')) : ?>
        <!--custom position 10 'Bottom-B' -->
            <div id="top-2b" class="span3">
                <jdoc:include type="modules" name="position-10" style="xhtml" />
            </div>
        <!-- End Sidebar -->
        <?php endif; ?>
    </div>
    <div class="bottom-c">
        <?php if ($this->countModules('position-11')) : ?>
        <!--custom position 11 'Bottom-C' -->
            <div id="top-2c" class="span3">
                <jdoc:include type="modules" name="position-11" style="xhtml" />
            </div>
        <!-- End Sidebar -->
        <?php endif; ?>
    </div>
</div>

Any help appreciated :)

Answer 1

Explanation:

Lets looks at what we know:

• Bootstrap is a 12 column grid framework
• You're trying to implement 3 boxes, divided equally in a row

---

<------------------------span12------------------------>
<------span4------><------span4------><-----span4------>
<----span3---><----span3---><----span3---><----span3--->

12 ÷ 3 = 4

---

Solution:

Use span4 instead of span3