Шрифтовые стили:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


КОД:

<div class="col-lg-4 col-sm-6 col-xs-12">
<div class="shortstory">

<div class="shortstory-images">
<a href="$ENTRY_URL$" title="$TITLE$"><img src="$IMG_URL1$" alt="$TITLE$"></a>
</div>

<div class="shortstory-content">
<h4 class="shortstory-link"><a href="$ENTRY_URL$"><?if(len($TITLE$)>40)?><?substr($TITLE$,0,37)?>...<?else?>$TITLE$<?endif?></a></h4>
<p><?if(len($MESSAGE$)>85)?><?substr($MESSAGE$,0,82)?>...<?else?>$MESSAGE$<?endif?></p>
</div>

<div class="shortstory-bottom">
<span class="shortstory-date"><i class="fa fa-calendar"></i> $DATE$</span>
<span class="shortstory-comments"><i class="fa fa-comment-o"></i> $COMMENTS_NUM$</span>
<a href="$ENTRY_URL$" class="shortstory-more">Читать далее</a>
</div>

</div>
</div>


CSS:

/**************************************/
.shortstory{background:#fbfbfb;margin:0 0 20px 0;box-shadow:0px 2px 5px rgba(0,0,0,0.2);}
.shortstory-images{position:relative;}
.shortstory-images a{display:block;overflow:hidden;}
.shortstory-images a img{height:auto;width:100%;display:block;}
.shortstory-images a:hover img{opacity:0.8}
.shortstory-content{height:auto;overflow:hidden;padding:20px 20px 0 20px;margin-bottom:20px;}
.shortstory-link{font-size:18px;margin-bottom:20px;}
@media (min-width:768px){.shortstory-images a img{height:230px;}
.shortstory-content{height:150px;}
}
@media (min-width:992px){.shortstory-images a img{height:230px;}
.shortstory-content{height:150px;}
}
@media (min-width:1200px){.shortstory-images a img{height:190px;}
.shortstory-content{height:150px;}
}
.shortstory-bottom{background:#396061;color:#fff;position:relative;height:38px;line-height:38px;overflow:hidden;padding-left:20px;}
.shortstory-date, .shortstory-comments{font-size:11px;}
.shortstory-date i, .shortstory-comments i{font-size:14px;margin-right:5px;}
.shortstory-comments{padding-left:10px;}
.shortstory-bottom .shortstory-more{background:#3ba8ac;color:#fff;position:absolute;right:0;width:110px;display:inline-block;font-size:12px;text-align:center;text-shadow:1px 1px 1px rgba(255,255,255,0.2);}
.shortstory-bottom .shortstory-more:hover{background:#268F93;color:#fff}
.col-lg-4, .col-sm-6,
.col-xs-12
.col-vs-12{position:relative;min-height:1px;padding-left:10px;padding-right:10px;}
.col-xs-12{float:left;}
.col-xs-12{width:100%;}
@media (min-width:768px){ .col-sm-6,
.col-sm-6{width:47%;}}
@media (min-width:1200px){.col-lg-4,
.col-lg-4{width:30.33333333%;}}