"Image Tiles Full width"
Bootstrap 3.3.0 Snippet by nandiraju

<div class="container-fluid"> <div class="row text-center"> <h3 style="color:white;font-family:verdana;">Snap Tight Image Tiles (Responisve)<br><small><a href="http://www.nandiraju.com">Srikanth Nandiraju</small></h3> </div> <div class="row"> <div class="cover-card col-sm-4" style="background: url(http://lorempixel.com/300/200/nightlife/2) no-repeat center top;background-size:cover;"> <p> Text Caption </p> </div> <div class="cover-card col-sm-8" style="background: url(http://lorempixel.com/600/200/nightlife/3) no-repeat center top;background-size:cover;"> <p> Text Caption </p> </div> <div class="cover-card col-sm-3" style="background: url(http://lorempixel.com/300/200/nightlife/1) no-repeat center top;background-size:cover;"> <p> Text Caption </p> </div> <div class="cover-card col-sm-3" style="background: url(http://lorempixel.com/300/200/nightlife/4) no-repeat center top;background-size:cover;"> <p> Text Caption </p> </div> <div class="cover-card col-sm-3" style="background: url(http://lorempixel.com/300/200/nightlife/6) no-repeat center top;background-size:cover;"> <p> Text Caption </p> </div> <div class="cover-card col-sm-3" style="background: url(http://lorempixel.com/300/200/nightlife/) no-repeat center top;background-size:cover;"> <p> Text Caption </p> </div> <div class="cover-card col-sm-4" style="background: url(http://lorempixel.com/600/200/city/4) no-repeat center top;background-size:cover;"> <p> Text Caption </p> </div> <div class="cover-card col-sm-4" style="background: url(http://lorempixel.com/300/200/city/5) no-repeat center top;background-size:cover;"> <p> Text Caption </p> </div> <div class="cover-card col-sm-4" style="background: url(http://lorempixel.com/300/200/city/6) no-repeat center top;background-size:cover;"> <p> Text Caption </p> </div> <div class="cover-card col-sm-6" style="background: url(http://lorempixel.com/300/200/city/7) no-repeat center top;background-size:cover;"> <p> Text Caption </p> </div> <div class="cover-card col-sm-6" style="background: url(http://lorempixel.com/300/200/city/8) no-repeat center top;background-size:cover;"> <p> Text Caption </p> </div> </div> </div>
body{ background: #333; } .cover-card { border: 2px solid white; background: silver; padding: 0px; margin: 0px; height:200px; } .cover-card > p { text-align: center; background-color: rgba(6,6,6,0.0); color: rgba(6,6,6,0.0); width: 100%; height: 100%; font-weight: bold; font-size: 20px; } .cover-card:hover > p { background-color: rgba(6,6,6,0.3); color: white; text-shadow: 3px 3px 10px #000; }

Similar snippets: See More


Comments:

allaghi 2015-02-25 08:47:51
    Great!
allaghi 2015-02-27 04:19:57
    Could we add a form in the middle of page?
Samiul Haque Khan 2017-05-21 15:50:59
    add form by useing a modal it will look better
jonathan_adcox 2015-03-08 15:45:50
    Very nice. I LOVE IT. How did you get rid of the padding and margin. I have been trying to over ride it for months and something else gets messed up or default in its place. Great work keep it up.
[CorVayne] #TeamExitoso 2015-06-21 15:44:10
    nice!
Stan Williams 2017-06-13 00:16:02
    Cool!

Commenting will be back soon.