Bootstrap snippet: Related posts

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: posts,blog



<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="http://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="http://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="http://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>
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; }
Dey-Dey

Related posts

Dey-Dey
  Oct 15th, 00:00
21 Views