Bootstrap snippet. Related posts

HTML code

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<div class="row">
	<div class="col-xs-12 col-sm-4">
		<div class="be-post style-2">
			<div class="be-post-date"><i class="fa fa-clock-o"></i> April 23, 2015</div>
			<a href="#" class="be-post-title">Poly Bear</a>     	
			<a href="#" class="be-img-block">
				<img src="https://lorempixel.com/292/160/nature/2/" alt="omg">
			</a>
			<span>
				Cras pellentesque blandit arcu eget laoreet. Nulla finibus non.
			</span>
		</div>							
	</div>
	<div class="col-xs-12 col-sm-4">
		<div class="be-post style-2">
			<div class="be-post-date"><i class="fa fa-clock-o"></i> April 23, 2015</div>
			<a href="#" class="be-post-title">Girl in a Glasses</a>     	
			<a href="#" class="be-img-block">
				<img src="https://lorempixel.com/292/160/nature/3/" alt="omg">
			</a>
			<span>
				Proin id justo euismod, efficitur dui id, posuere libero. Aenean sollicitudin magna felis
			</span>
		</div>							
	</div>
	<div class="col-xs-12 col-sm-4">
		<div class="be-post style-2">
			<div class="be-post-date"><i class="fa fa-clock-o"></i> April 23, 2015</div>
			<a href="#" class="be-post-title">Art House modern</a>     	
			<a href="#" class="be-img-block">
				<img src="https://lorempixel.com/292/160/nature/4/" alt="omg">
			</a>
			<span>
				Nam finibus sed lectus sit amet consequat. Proin laoreet mi nec lorem molestie tristique.
			</span>
		</div>							
	</div>														
</div>
</div>

CSS code

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

body{margin-top:20px;}

.be-post.style-2 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.be-post {
    border: 1px solid #edeff2;
    border-radius: 2px;
    width: 100%;
    margin-bottom: 30px !important;
}

.be-post.style-2 .be-post-date {
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    color: #b4b7c1;
    margin: 0 15px 15px 15px;
}

.be-post.style-2 .be-post-title {
    padding-bottom: 0px;
    margin: 0 15px 15px 15px;
    border-bottom: none;
}

.be-post.style-2 a {
    min-height: 0;
}

.be-post-title {
    position: relative;
    display: block;
    font-size: 13px;
    line-height: 20px;
    font-family: 'Conv_helveticaneuecyr-bold';
    color: #262626;
    border-bottom: 1px solid #edeff2;
    margin: 0 15px 10px 15px;
    cursor: pointer;
    min-height: 52px;
    padding-bottom: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.be-post.style-2 a {
    min-height: 0;
}

.be-post .be-img-block {
    margin-bottom: 15px;
    position: relative;
}

.be-img-block {
    overflow: hidden;
    display: block;
}

.be-post .be-img-block img {
    width: 100%;
    height: auto;
    position: relative;
    -webkit-transition: all ease-out 0.3s;
    transition: all 0.3s;
}

.be-post > span {
    color: #b4b7c1;
    display: block;
    font-size: 11px;
    line-height: 20px;
    padding: 0 15px;
    margin-bottom: 15px;
}