Bootstrap snippet: Nesting Columns image

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



<div class="container bootstrap snippet"> <div class="row"> <div class="col-md-4 col-lg-4"> <div class="featured-article"> <a href="#"> <img src="http://placehold.it/400x300/6495ED/Big image" alt="" class="thumb"> </a> </div> </div> <div class="col-md-6 col-lg-6 pull-right"> <ul class="media-list main-list"> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/150x90/9400D3" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Image name</h4> <p class="by-author">Image description</p> </div> </li> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/150x90/FF00FF" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Image name</h4> <p class="by-author">Image description</p> </div> </li> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/150x90/FF0000" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Image name</h4> <p class="by-author">Image description</p> </div> </li> </ul> </div> </div>
/* image thumbnail */ .thumb { display: block; width: 100%; margin: 0; } /* Style to article Author */ .by-author { font-style: italic; line-height: 1.3; color: #aab6aa; } /* Main Article [Module] ------------------------------------- * Featured Article Thumbnail * have a image and a text title. */ .featured-article { width: 482px; height: 350px; position: relative; margin-bottom: 1em; } .featured-article .block-title { /* Position & Box Model */ position: absolute; bottom: 0; left: 0; z-index: 1; /* background */ background: rgba(0,0,0,0.7); /* Width/Height */ padding: .5em; width: 100%; /* Text color */ color: #fff; } .featured-article .block-title h2 { margin: 0; } /* Featured Articles List [BS3] -------------------------------------------- * show the last 3 articles post */ .main-list { padding-left: .5em; } .main-list .media { padding-bottom: 1.1em; border-bottom: 1px solid #e8e8e8; }
Dey-Dey

Nesting Columns image

Dey-Dey
  May 17th 2014, 09:24
2.2K Views