Nesting Columns image

This bootstrap snippet called "Nesting Columns image" 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

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

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

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

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.1.1

Created: May 14th 2014, 19:31

Views: 3.1K

Rated 5/5 based on 1 reviews