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="//"> <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;}{font-size:0.75em; color:#666; background:#eee; padding:5px; margin-top:20px;} > 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(;width:400px;height:300px !important;} .img2{background:url(;width:400px;height:300px !important;} .img3{background:url(;width:400px;height:300px !important;}

Image Columns Bootstrap

  May 6th 2014, 22:55