Image Columns Bootstrap

This bootstrap snippet called "Image Columns Bootstrap" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: Image,Columns

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<!-- 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>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview


				                
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;}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.1.0

Created: May 6th 2014, 22:55

Views: 2.7K

Rated 5/5 based on 1 reviews