Menu

Bootstrap 4 Grid & Column Layout Examples

Useful responsive grid layouts, for promotions, presentations or anything else...
See skin/ultra/grids.tpl


Smart Grid


Based on a simple unordered list...



{include file="custom/widgets/widget_smart_grid.tpl"}

Masonry Columns 1


With hover captions...


Lorem Ipsum 1

Integer sollicitudin lacus libero, in iaculis turpis tristique sit amet. Nullam augue elit, feugiat nec arcu eget, sodales feugiat ligula.

View More

Lorem Ipsum 2

Integer sollicitudin lacus libero, in iaculis turpis tristique sit amet. Nullam augue elit, feugiat nec arcu eget, sodales feugiat ligula.

View More

Lorem Ipsum 3

Integer sollicitudin lacus libero, in iaculis turpis tristique sit amet. Nullam augue elit, feugiat nec arcu eget, sodales feugiat ligula.

View More

Lorem Ipsum 4

Integer sollicitudin lacus libero, in iaculis turpis tristique sit amet. Nullam augue elit, feugiat nec arcu eget, sodales feugiat ligula.

View More

Lorem Ipsum 5

Integer sollicitudin lacus libero, in iaculis turpis tristique sit amet. Nullam augue elit, feugiat nec arcu eget, sodales feugiat ligula.

View More

Lorem Ipsum 6

Integer sollicitudin lacus libero, in iaculis turpis tristique sit amet. Nullam augue elit, feugiat nec arcu eget, sodales feugiat ligula.

View More

{include file="custom/widgets/widget_masonry_columns_1.tpl"}

Masonry Columns 2


Based on simple unordered lists...

Standard or Fitted


  • Card 1

    Lorem ipsum dolor sit amet, et primis ornatus usu, eum ei graeci regione adipiscing. Eu primis nominavi ius, case facete eum at. In per summo sanctus, mea at tamquam nostrud luptatum, alienum convenire per te. Ei vel diceret complectitur. His choro accusam gubergren et. Cu tale saperet sed. Impetus accusata assentior id vel, tantas admodum mel ad. Sed eruditi sanctus fabellas cu, quas alienum sea ea. Cu vero munere disputationi sed, eruditi offendit his ne. Pri ad dolores laboramus.Vix ut affert civibus petentium, has clita dolorum id, an ius odio alia. An mel elitr scaevola adversarium, nibh dissentias inciderint nec ea.
  • Card 4

    Cu simul oratio indoctum nam, cu offendit moderatius mel. Sea eu euismod consulatu, usu cu audiam perpetua, viris philosophia vis et. Cu sit tibique intellegam, error ludus scripta pri et. His congue aliquam iracundia ei. Has idque fastidii id, mucius erroribus vel ad. Ut posse albucius periculis his, duo an dicunt nostrud deleniti. Modo affert expetenda per ne. Et dolore platonem appellantur cum. Constituam adversarium in sit, mea ne porro vitae, eu pri modus dicam quaeque. At nibh brute sonet sea. Mei simul disputando eu, id vis esse explicari dissentiet, ei agam volutpat usu. Ex vis tollit mollis oportere.
  • Card 5

    Vel adipisci suscipiantur te, nam ullum perfecto ut. Vitae contentiones id sed. Est vitae ponderum facilisis in. Quo illud eligendi similique et, odio detraxit pertinacia ea vix.
  • Card 6

    Cetero perpetua ius at, et feugait nostrum sit, mea ne quaeque fastidii electram. Delenit torquatos adipiscing vix ex. Viris tamquam postulant ei mel, ea singulis corrumpit democritum vim. No fierent salutatus vel, in persecuti vituperata eos, at nusquam perpetua hendrerit est. Ne pri odio option nusquam, sed natum admodum eleifend at. Duo prima eleifend, ea mea agam diceret inciderint.
  • Card 8

    Vis omnium saperet ex. Wisi qualisque corrumpit eu vel, usu in vero inimicus mnesarchum. Eruditi vivendum usu at, elaboraret inciderint pri cu. Ius enim zril ad, zril timeam consulatu ex cum.
  • Card 9

    Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
  • Card 11

    Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Facilisis luctus, metus.
  • Card 12

    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

{include file="custom/widgets/widget_masonry_columns_2.tpl"}

Masonry Columns 3


With Gutter, Bordered or Gutterless



{include file="custom/widgets/widget_masonry_columns_3.tpl"}

Bootstrap Grids



01


No grid required, or use...

<div class="row">
<div class="col-md-12 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/1140/600?image=1" alt=""></div>
</div>

TOP


02


<div class="row">
<div class="col-md-6 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/570/600?image=1" alt=""></div>
<div class="col-md-6 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/570/600?image=2" alt=""></div>
</div>

TOP


03


<div class="row">
<div class="col-md-4 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/380/600?image=1" alt=""></div>
<div class="col-md-4 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/380/600?image=2" alt=""></div>
<div class="col-md-4 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/380/600?image=3" alt=""></div>
</div>

TOP


04


<div class="row">
<div class="col-md-3 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/380/600?image=1" alt=""></div>
<div class="col-md-3 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/380/600?image=2" alt=""></div>
<div class="col-md-3 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/380/600?image=3" alt=""></div>
<div class="col-md-3 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/380/600?image=4" alt=""></div>
</div>

TOP


05


<div class="row">
<div class="col-md-8 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/600/455?image=1" alt=""></div>
<div class="col-md-4 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/380/600?image=2" alt=""></div>
</div>

TOP


06


<div class="row">
<div class="col-md-4 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/380/600?image=1" alt=""></div>
<div class="col-md-8 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/600/455?image=2" alt=""></div>
</div>

TOP


07


<div class="row">
<div class="col-md-3 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/600?image=1" alt=""></div>
<div class="col-md-9 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/600/372?image=2" alt=""></div>
</div>

TOP


08


<div class="row">
<div class="col-md-9 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/600/372?image=1" alt=""></div>
<div class="col-md-3 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/600?image=2" alt=""></div>
</div>

TOP


09


<div class="row">
<div class="col-md-6 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/600/570?image=1" alt=""></div>
<div class="col-md-3 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/600?image=2" alt=""></div>
<div class="col-md-3 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/600?image=3" alt=""></div>
</div>

TOP


10


<div class="row">
<div class="col-md-3 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/600?image=1" alt=""></div>
<div class="col-md-3 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/600?image=2" alt=""></div>
<div class="col-md-6 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/600/570?image=3" alt=""></div>
</div>

TOP


11


<div class="row">
<div class="col-md-3 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/600?image=1" alt=""></div>
<div class="col-md-6 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/600/570?image=2" alt=""></div>
<div class="col-md-3 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/600?image=3" alt=""></div>
</div>

TOP


12



<div class="row">
<div class="col-md-6 mb20">
<img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/147?image=1" alt="">
<br>
<div class="row">
<div class="col-md-6 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/300?image=2" alt=""></div>
<div class="col-md-6"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/300?image=3" alt=""></div>
</div>
</div>
<div class="col-md-6 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/300?image=4" alt=""></div>
</div>

TOP


13


<div class="row">
<div class="col-md-6 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/300?image=1" alt=""></div>
<div class="col-md-6 mb20">
<div class="row">
<div class="col-md-6 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/300?image=2" alt=""></div>
<div class="col-md-6 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/300?image=3" alt=""></div>
</div>
<img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/147?image=4" alt="">
</div>
</div>

TOP


14



<div class="row">
<div class="col-md-6 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/600/600?image=1" alt=""></div>
<div class="col-md-6 mb20">
<img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/500/170?image=2" alt="">
<br>
<div class="row">
<div class="col-md-6 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/185?image=3" alt=""></div>
<div class="col-md-6 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/185?image=4" alt=""></div>
</div>
<div class="row">
<div class="col-md-4 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/300?image=5" alt=""></div>
<div class="col-md-4 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/300?image=6" alt=""></div>
<div class="col-md-4 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/300?image=7" alt=""></div>
</div>
</div>
</div>

TOP


15



<div class="row">
<div class="col-md-6 mb20">
<img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/500/170?image=2" alt="">
<br>
<div class="row">
<div class="col-md-6 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/185?image=3" alt=""></div>
<div class="col-md-6 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/185?image=4" alt=""></div>
</div>
<div class="row">
<div class="col-md-4 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/300?image=5" alt=""></div>
<div class="col-md-4 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/300?image=6" alt=""></div>
<div class="col-md-4 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/300?image=7" alt=""></div>
</div>
</div>
<div class="col-md-6 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/600/600?image=1" alt=""></div>
</div>

TOP


16



<div class="row">
<div class="col-md-3 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/600?image=1" alt=""></div>
<div class="col-md-6 mb20">
<img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/600/264?image=2" alt="">
<br>
<div class="row">
<div class="col-md-6 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/150/150?image=3" alt=""></div>
<div class="col-md-6"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/150/150?image=4" alt=""></div>
</div>
</div>
<div class="col-md-3 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/600?image=5" alt=""></div>
</div>

TOP


17



<div class="row">
<div class="col-md-6 mb20">
<img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/140?image=1" alt="">
<br>
<div class="row">
<div class="col-md-6 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/280?image=2" alt=""></div>
<div class="col-md-6"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/280?image=3" alt=""></div>
</div>
</div>
<div class="col-md-3 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/600?image=4" alt=""></div>
<div class="col-md-3 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/600?image=5" alt=""></div>
</div>

TOP


18



<div class="row">
<div class="col-md-3 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/600?image=1" alt=""></div>
<div class="col-md-3 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/600?image=2" alt=""></div>
<div class="col-md-6 mb20">
<img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/140?image=3" alt="">
<br>
<div class="row">
<div class="col-md-6 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/280?image=4" alt=""></div>
<div class="col-md-6 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/280?image=5" alt=""></div>
</div>
</div>
</div>

TOP


19



<div class="row">
<div class="col-md-4 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/405?image=1" alt=""></div>
<div class="col-md-8 mb20">
<img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/100?image=2" alt="">
<br>
<div class="row">
<div class="col-md-6 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/180?image=3" alt=""></div>
<div class="col-md-6 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/180?image=4" alt=""></div>
</div>
</div>
</div>

TOP


20



<div class="row">
<div class="col-md-8 mb20">
<img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/300/100?image=1" alt="">
<br>
<div class="row">
<div class="col-md-6 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/350/210?image=2" alt=""></div>
<div class="col-md-6"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/350/210?image=3" alt=""></div>
</div>
</div>
<div class="col-md-4 mb20"><img class="img-fluid m-x-auto d-block img-responsive" src="{$ImagesDir}/spacer.gif" data-src="//unsplash.it/350/475?image=4" alt=""></div>
</div>

TOP

The website uses cookies to allow us to better understand how the site is used. By continuing to use this site, you consent to this policy. Click to learn more.