Bootstrap snippet: Image Columns Bootstrap

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: Image,Columns



<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <h1>Image Columns</h1> <div style="padding:0 15px;"> <div class="row"> <div class="col-xs-8 col-sm-4"> <img class="img-thumbnail img1" alt="photo1"> </div> <div class="col-xs-4 col-sm-8"> <div class="row"> <div class="col-sm-6"> <img class="img-thumbnail img2" alt="photo2"> </div> <div class="col-sm-6"> <img class="img-thumbnail img3" alt="photo3"> </div> </div> </div> </div> </div>
body{margin-top:20px;} body {padding:20px;} h1{ background: none repeat scroll 0 0 #5BC0DE; color:#fff!important; padding:10px 0; text-align:center; margin-bottom:20px!important;} p.cr{font-size:0.75em; color:#666; background:#eee; padding:5px; margin-top:20px;} p.cr > strong{color:#F1645E;} .debug > .row > div {box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; } .debug > .row > div:nth-child(3n+1) {background-color: #5F8EFC;} .debug > .row > div:nth-child(3n+2) {background-color: #FEBA00;} .debug > .row > div:nth-child(3n) {background-color: #F1645E;} .img1{background:url(http://lorempixel.com/400/300/sports/3/);width:400px;height:300px !important;} .img2{background:url(http://lorempixel.com/400/300/sports/4/);width:400px;height:300px !important;} .img3{background:url(http://lorempixel.com/400/300/sports/5/);width:400px;height:300px !important;}
Dey-Dey

Image Columns Bootstrap

Dey-Dey
  May 6th 2014, 22:55
2.0K Views