Bootstrap snippet: blog post image widget

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,post,image,widget,card



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container bootstrap snippet"> <div class="row"> <div class="col-md-6"> <section class="widget"> <div class="widget-controls"> <a href="#"><i class="fa fa-refresh"></i></a> <a href="#" data-widgster="close"><i class="glyphicon glyphicon-remove"></i></a> </div> <div class="widget-body"> <div class="widget-top-overflow text-white"> <img src="http://lorempixel.com/800/400/nature/3/"> <ul class="tags text-white pull-right"> <li><a href="#">design</a></li> <li><a href="#">white</a></li> </ul> </div> <div class="post-user mt-sm"> <span class="thumb pull-left mr"> <img class="img-circle" src="http://bootdey.com/img/Content/user_1.jpg" alt="..."> </span> <h5 class="mb-xs mt-xs"><span class="fw-semi-bold">Maryna</span> Nilson</h5> <p class="fs-mini text-muted"><time>25 mins</time> &nbsp; <i class="fa fa-map-marker"></i> &nbsp; near Amsterdam</p> </div> <p class="text-light fs-mini m">Lots of cool stuff is happening around you. Just calm down for a sec and listen. Colors, sounds, thoughts, ideas. </p> </div> <footer class="bg-body-light"> <ul class="post-links no-separator"> <li><a href="#"><span class="text-danger"><i class="fa fa-heart"></i> 427</span></a></li> <li><a href="#"><i class="glyphicon glyphicon-comment"></i> 98</a></li> </ul> </footer> </section> </div> <div class="col-md-6"> <section class="widget"> <div class="widget-controls"> <a href="#"><i class="fa fa-refresh"></i></a> <a href="#" data-widgster="close"><i class="glyphicon glyphicon-remove"></i></a> </div> <div class="widget-body"> <div class="widget-top-overflow text-white"> <img src="http://lorempixel.com/800/400/nature/4/"> <ul class="tags text-white pull-right"> <li><a href="#">design</a></li> <li><a href="#">white</a></li> </ul> </div> <div class="post-user mt-sm"> <span class="thumb pull-left mr"> <img class="img-circle" src="http://bootdey.com/img/Content/user_2.jpg" alt="..."> </span> <h5 class="mb-xs mt-xs"><span class="fw-semi-bold">Maryna</span> Nilson</h5> <p class="fs-mini text-muted"><time>25 mins</time> &nbsp; <i class="fa fa-map-marker"></i> &nbsp; near Amsterdam</p> </div> <p class="text-light fs-mini m">Lots of cool stuff is happening around you. Just calm down for a sec and listen. Colors, sounds, thoughts, ideas. </p> </div> <footer class="bg-body-light"> <ul class="post-links no-separator"> <li><a href="#"><span class="text-danger"><i class="fa fa-heart"></i> 427</span></a></li> <li><a href="#"><i class="glyphicon glyphicon-comment"></i> 98</a></li> </ul> </footer> </section> </div> </div> </div>
body{ margin-top:20px; background:#eee; } .widget { position: relative; margin-bottom: 30px; padding: 0px 20px; background: #fff; border-radius: 3px; } .widget-controls { position: absolute; z-index: 1; top: 0; right: 0; padding: 14px; font-size: 12px; } .widget-controls>a { padding: 1px 4px; border-radius: 4px; color:#fff; -webkit-transition: color 0.15s ease-in-out; -o-transition: color 0.15s ease-in-out; transition: color 0.15s ease-in-out; } .text-white { color: #fff; } .widget-top-overflow { margin-top: -15px; border-top-left-radius: 4px; border-top-right-radius: 4px; } .widget-top-overflow, .widget-middle-overflow { position: relative; margin: 0 -20px; } .widget-top-overflow>img { border-top-left-radius: 4px; border-top-right-radius: 4px; } .widget-top-overflow>img, .widget-middle-overflow>img { max-width: 100%; } .widget-top-overflow>img+.tags { position: absolute; bottom: 0; right: 0; margin: 20px; } .tags { padding-left: 0; list-style: none; } .tags>li { float: left; margin:3px; } .tags>li>a { padding: 2px 8px; font-size: 13px; border-radius: 6px; border: 1px solid white; color: inherit; text-decoration: none; } .mt-sm { margin-top: 10px; } .post-user { position: relative; } .mr { margin-right: 15px; } .thumb-xs, .thumb-sm, .thumb-lg, .thumb { position: relative; display: inline-block; text-align: center; } .thumb { width: 48px; } .thumb img { height: auto; max-width: 100%; vertical-align: middle; } .post-user img { border: 3px solid white; } .fs-mini { font-size: 13px; } .text-light { opacity: .8; } .widget>footer { margin: 0 -20px -15px; padding: 30px 20px; } .bg-body-light { background-color: #f6f6f6; } .post-links { margin-bottom: 0; font-size: 12px; padding-left: 0; } .post-links>li { float: left; list-style: none; margin:4px; }
Dey-Dey

blog post image widget

Dey-Dey
  Sep 1st 2015, 07:25
2.4K Views