Bootstrap snippet: Blog article wrapper

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



<div class="blog-container col-md-12"> <div class="container"> <div class="col-md-12"> <h2>We are Famous!</h2> </div> <div class="article col-md-3 col-sm-6 col-xs-12" > <div class="article-wrapper"> <div class="article-header"> <img src="http://lorempixel.com/128/100/nature/1" alt=" " class="article-image"> <span class="article-by">Mark Denker</span> <span class="article-date">March 2015</span> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="pic-author pull-right"> </div> <div class="article-content"> <h3>Breaking a non-transparent market</h3> </div> </div> </div> <div class="article col-md-3 col-sm-6 col-xs-12"> <div class="article-wrapper"> <div class="article-header"> <img src="http://lorempixel.com/128/100/nature/2" alt=" " class="article-image"> <span class="article-by">Sindhu Chandrashekaran</span> <span class="article-date">September 2015</span> <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="pic-author pull-right"> </div> <div class="article-content"> <h3>Transperency' is the secret of Wiredelts's Sucess</h3> </div> </div> </div> <div class="article col-md-3 col-sm-6 col-xs-12 "> <div class="article-wrapper"> <div class="article-header"> <img src="http://lorempixel.com/128/100/nature/3" alt=" " class="article-image"> <span class="article-by">Curt Finch</span> <span class="article-date">April 2015</span> <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="pic-author pull-right"> </div> <div class="article-content"> <h3>The good and the Evil of Time Tracking</h3> </div> </div> </div> <div class="article col-md-3 col-sm-6 col-xs-12 "> <div class="article-wrapper"> <div class="article-header"> <img src="http://lorempixel.com/128/100/nature/4" alt="" class="article-image"> <span class="article-by">Darren Peterson</span> <span class="article-date">July 2015</span> <img src="http://bootdey.com/img/Content/avatar/avatar4.png" alt="" class="pic-author pull-right"> </div> <div class="article-content"> <h3>Handling uncertainty when estimating software projects</h3> </div> </div> </div> </div> </div>
body{margin-top:20px;} .blog-container { margin-bottom: 190px; padding: 90px 0; background-color: #f3f5f7 } .blog-container h2 { padding-bottom: 40px; font-family: Roboto-Medium; font-size: 36px; text-align: center; color: #414040 } .blog-container .article .article-wrapper { width: 222px; height: 356px; margin: 0 auto 20px; background-color: #fff; box-shadow: 2px 2px 5px rgba(0, 0, 0, .2); border-radius: 3px } .blog-container .article .article-wrapper .article-header { position: relative; height: 220px } .blog-container .article .article-wrapper .article-header>img { width: 100%; height: 164px; border-radius: 3px 3px 0 0 } .blog-container .article .article-wrapper .article-header .article-by { display: block; padding: 15px 0 0 15px; line-height: 100%; font-size: 12px; color: #727272 } .blog-container .article .article-wrapper .article-header .article-date { padding-left: 15px; font-size: 10px; line-height: 100%; color: #b6b6b6 } .blog-container .article .article-wrapper .article-header img.pic-author { width: 29px; height: 29px; position: absolute; bottom: 15px; right: 15px } .blog-container .article .article-wrapper .article-content { height: 136px } .blog-container .article .article-wrapper .article-content h3 { height: 100px; padding: 0 15px 15px; font-size: 14px; overflow: hidden } .blog-container .article .article-wrapper .article-content a { padding: 15px; font-size: 14px; color: #69ba9a } h3 { font-size: 18px; line-height: 22px; color: #6f6f6f; margin: 0; }
Dey-Dey

Blog article wrapper

Dey-Dey
  Jun 16th, 20:21
36 Views