gallery item

This bootstrap snippet called "gallery item" 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: images,gallery

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<section class="content-item grey" id="gallery-item">
        <div class="container">
        	<div class="row">
            	<div class="col-sm-8">
                	<img src="https://lorempixel.com/550/350/nature/5/" class="img-responsive" alt="">
                </div>
                <div class="col-sm-4">
                	<h2>Landscape of Lake</h2>
                    <div class="box">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </div>
                    <div class="box">
						<ul class="list-unstyled">
                        	<li><i class="fa fa-calendar"></i>26/02/2014</li>
                            <li><i class="fa fa-eye"></i>125 Views</li>
                            <li><i class="fa fa-comment"></i>4 Comments</li>
                        </ul>
                    </div>
                    <a href="#" class="btn btn-normal show-image">Full Size</a>
                    <a href="#comments" class="btn btn-normal scroll">Add Comment</a>
                </div>
            </div>
        </div>
    </section>

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


.content-item {
    padding:30px 0;
	background-color:#FFFFFF;
}

.content-item.grey {
	background-color:#F0F0F0;
	padding:50px 0;
	height:100%;
}

.content-item h2 {
	font-weight:700;
	font-size:35px;
	line-height:45px;
	text-transform:uppercase;
	margin:20px 0;
}

.content-item h3 {
	font-weight:400;
	font-size:20px;
	color:#555555;
	margin:10px 0 15px;
	padding:0;
}

.content-headline {
	height:1px;
	text-align:center;
	margin:20px 0 70px;
}

.content-headline h2 {
	background-color:#FFFFFF;
	display:inline-block;
	margin:-20px auto 0;
	padding:0 20px;
}

.grey .content-headline h2 {
	background-color:#F0F0F0;
}

.content-headline h3 {
	font-size:14px;
	color:#AAAAAA;
	display:block;
}

/* BOXES */

.box {
	background-color:#FFFFFF;
	padding:10px 20px;
	box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);
	margin-bottom:20px;
}

.box h3 {
    margin:30px 0 5px;
	font-weight:bold;
}

.box ul {
	margin:0;
}

.box ul li {
	font-size:13px;
	border-bottom:1px dashed #DDDDDD;
	padding:10px 0;
	font-weight:600;
}

.box ul li:last-child {
	border-bottom:0;
}

.box ul li i {
	font-size:18px;
	margin-right:20px;
}

.box.categories ul li i {
	color:#BBBBBB;	
	position:relative;
	top:2px;
	width:20px;
}

.posts ul li a {
	font-size:14px;
	line-height:23px;
}

.posts ul li a:hover {
	color:#333333;	
}

.posts ul li div {
	font-size:13px;
	color:#999999;
	font-weight:bold;
	text-align:right;
	margin-top:5px;
}

.box.posts ul li i {
    color:#333333;
    font-size:14px;
    margin-right:10px;
}

.box.tags ul.blog-tags li {
	border:0;
}

ul.blog-tags li {
	padding:7px 0;
}

div ul.blog-tags li i,
div .box.tags ul li i {
	color:#FFFFFF;
	position:relative;
	top:1px;
	font-size:14px;
}

#gallery .row {
    margin:0;
}

#gallery .row > div {
	padding:0;
}

#gallery .overlay-wrapper:hover .overlay {
	background-color:rgba(0,0,0,0.7);
}

#gallery-item h2 {
	font-size:20px;
	margin-top:0;
}

#gallery-item img {
	background-color:#FFFFFF;
	border:3px solid #999999;
	padding:7px;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Mar 12th 2016, 20:59

Views: 2.6K

Rated 5/5 based on 2 reviews