0

I understand bootstrap 3 has a 12-column grid system. My understanding is that anything over 12 columns is supposed to stack on the next row. Why are my columns stacking 3 images on top, 2 images in middle and 1 on bottom?

Here is my code and a link. If you resize the browser width you can see:

<div id="Portfolio" class="container">
    <div class="row">
        <div class="col-md-4">
            <a href="http://www.gizmoticket.jitsu.com">
                <img class="img-responsive" src="img/gizmo.png" alt="Gizmo Ticket">
            </a>
            <h4>Gizmo Ticket System &#8211; Ajax, EJS, node.js, MongoDB &#8211; </h4>
        </div>      

        <div class="col-md-4">
            <a href="http://www.spataforeguitar.com">
                <img class="img-responsive" src="img/guitar.png" alt="Spatafore Guitar">    
            </a>
            <h4>Spatafore Guitar Instruction &#8211; HTML5, responsive, jQuery</h4>
        </div>

        <div class="col-md-4">
            <a href="http://lyfia.freeiz.com/index.php">
                <img class="img-responsive" src="img/lyfia.png" alt="Lyfia Massage">
            </a>
            <h4>Lyfia Massage Therapy &#8211; Bootstrap, responsive, jQuery</h4>
        </div>

        <div class="col-md-4">
            <a href="https://individualinvestor.myleggmason.com/portal/server.pt?open=514&amp;objID=77504&amp;mode=2&amp;in_hi_userid=355661&amp;cached=true">
                <img class="img-responsive" src="img/esg.png" alt="ESG">
            </a>
            <h4>Legg Mason-ESG Feature &#8211; jQuery, Amazing Slider</h4>
        </div>

        <div class="col-md-4">
            <a href="http://www.leggmason.co.uk/income/">
                <img class="img-responsive" src="img/income.png" alt="Income Campaign">
            </a>
            <h4>Legg Mason-Income Feature &#8211; jQuery, Amazing Slider</h4>
        </div>

        <div class="col-md-4">
            <a href="https://dl.dropboxusercontent.com/u/92838694/Final%20Project/mage.html">
                <img class="img-responsive" src="img/warcraft.png" alt="Warcraft">
            </a>
            <h4>School Project &#8211; HTML5 audio, Adaptive</h4>
        </div>
    </div>
</div>
  • Here is the link: https://dl.dropboxusercontent.com/u/92838694/portfolio/index.html –  Dec 17 '14 at 22:18
  • 1
    See my answer here: http://stackoverflow.com/questions/24571062/gap-in-bootstap-stacked-rows – jme11 Dec 18 '14 at 00:34
  • 1
    Thanks. Adding "clearfix visible-md-block" seems to have fixed it. –  Dec 18 '14 at 00:48

0 Answers0